CODEWITHSUNDEEP
androidxmlandroid-layoutlayoutborder
CDrosos
CDrosos

Reputation: 2528

How to make layout with a color bar behind text and image

Im trying to create this layout (sorry for the quality, it's all what I have): enter image description here

So far I have built this

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="12dp">
    <ImageView xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:id="@+id/UserPhotoImageView"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_marginRight="16dp" />
    <TextView
        android:text="UserName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textStyle="normal"
        android:typeface="normal"
        android:textSize="16dp"
        android:layout_toRightOf="@+id/UserPhotoImageView"
        android:layout_alignTop="@+id/CalendarImageView"
        android:id="@+id/UserNameTextView"
        android:textColor="#333333" />
    <TextView
        android:text="Date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:typeface="normal"
        android:textSize="12dp"
        android:id="@+id/DateTextView"
        android:gravity="top"
        android:layout_toLeftOf="@+id/CalendarImageView"
        android:layout_alignTop="@+id/CalendarImageView" />
    <ImageView
        android:layout_width="16dp"
        android:layout_height="16dp"
        android:gravity="top"
        android:id="@+id/CalendarImageView"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="6dp"
        android:src="@drawable/ic_calendar_icon"
        android:backgroundTint="#ffffffff" />
    <TextView
        android:text="Comment"
        android:layout_below="@+id/UserNameTextView"
        android:layout_alignLeft="@+id/UserNameTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:typeface="normal"
        android:textSize="14dp"
        android:id="@+id/UserCommentTextView" />
</RelativeLayout>

Which give me the first part as I want to achive this: enter image description here

Now for the last row, I know how to make a rounded image but how can i place the image and the text behind a colored bar?

Upvotes: 0

Views: 343

Answers (3)

kris larson
kris larson

Reputation: 30995

Wrap both in a FrameLayout.

I guessed at the dimensions, but this should get you in the ballpark.

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/UserCommentTextView">

            <TextView
                android:id="@+id/name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:paddingTop="8dp"
                android:paddingBottom="8dp"
                android:paddingRight="96dp"
                android:gravity="right|end"
                android:background="@color/purple"
                tools:text="Name"/>

            <!-- replace with whatever component you are using for circle image view -->
            <CircleImageView
                android:id="@+id/circle_image_view"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:layout_gravity="right|end"
                android:layout_marginRight="16dp"
                android:background="@color/purple"
                tools:src="@drawable/gwynneth"/>

        </FrameLayout>

EDIT

Alternatively, if you wanted to eliminate the FrameLayout, you could integrate those two views right into your RelativeLayout with these changes:

  • For the positioning, I would go with android:layout_alignParentTop="true" and then a top margin to push the views down beneath your other views. You have a slight issue in that you want these to be below both the user image and the comment text, but since the comment text could expand so the bottom is lower than the image, it's hard to say which view you should anchor on. You might want to set a maxHeight on the comment to keep it from getting too big.

  • Since you don't have the FrameLayout to center on anymore, you would have to give the TextView an absolute size in order to line it up with the circle image view. If you're okay with that, you can just put these right in your RelativeLayout then set their top margins so that they align correctly:

            <TextView
            android:id="@+id/name"
            android:layout_width="match_parent"
            android:layout_height="32dp"
            android:layout_alignParentTop="true"
            android:layout_marginTop="80dp"
            android:paddingTop="8dp"
            android:paddingBottom="8dp"
            android:paddingRight="96dp"
            android:paddingEnd="96dp"
            android:gravity="right|end"
            android:background="@color/purple"
            tools:text="Name"/>

        <!-- replace with whatever component you are using for circle image view -->
        <CircleImageView
            android:id="@+id/circle_image_view"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:layout_marginTop="64dp"
            android:layout_marginRight="16dp"
            android:layout_marginEnd="16dp"
            android:background="@color/purple"
            tools:src="@drawable/gwynneth"/>

Upvotes: 1

Gal Yedidovich
Gal Yedidovich

Reputation: 787

I would create a RelativeLayout for this part (circle image with color bar and text)

you can add a View (could be an ImageView) in this relative layout, to show behind your image. and give it background with color of your choice.

Example:

<RelativeLayout
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> <!--change here to what you need-->

    <!--your colored bar-->

    <View
        android:layout_width="match_parent"
        android:layout_height="30dp" <!--control the thickness of your bar-->
        android:layout_centerVertical="true"
        android:background="#3333aa" />

    <!--face image-->

    <ImageView
        android:id="@+id/imageFace"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="15dp"
        android:background="@color/#2323ea" />

    <!--text view-->

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginRight="15dp"
        android:layout_toLeftOf="@id/imageFace"
        android:text="name" />
</RelativeLayout>

add your own customizations but this is a general example

Upvotes: 2

JuLes
JuLes

Reputation: 271

So I understand that you want to draw that purple thick line and put on top of it a Imageview. The easiest way, the whay i usually do to overlapp two or more layouts/ views is this: lets say we have 3 views( View 1, View 2 and View 3). If you put them in this order(1,2,3)in a Relative layout, and set them the same position in the Layout, the result will be that the View 3 will be on top of other 2.

So as a conclusion, if you want to overlapp two or more Views just put the View you want to be on top( the picture in your case) before the view you want to be overlapped( the purple line)

Upvotes: 0

Related Questions