Develop Reference

How FrameLayout works in android layout

I am trying achieve the above design but using Frame Layout the blue image is not showing above the white background. Where is the mistake, please help?
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/adapter_flParent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#drawable/bg_edit_text"
android:elevation="5dp"
android:translationZ="1dp"
android:layout_margin="10dp"
android:padding="10dp">
<TextView
android:id="#+id/adapter_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
android:layout_marginEnd="10dp"
android:text="Regional Snooker" />
<TextView
android:id="#+id/adapter_org"
android:layout_below="#+id/adapter_Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
android:layout_marginEnd="10dp"
android:text="Concered Authority"/>
</RelativeLayout>
<ImageView
android:layout_width="100dp"
android:layout_height="60dp"
android:layout_margin="10dp"
android:layout_gravity="right"
android:background="#drawable/adapter_blue" />
<TextView
android:id="#+id/adapter_data"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
android:layout_marginEnd="10dp"
android:gravity="right|center"
android:layout_gravity="right|center"
android:text="PASSED"/>
</FrameLayout>
I am trying to get the blue image but unable to get this blue image above white background using framelayout and also have to add the love image above blue image.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/adapter_flParent"
android:elevation="#dimen/ten_dp"
android:orientation="vertical"
android:layout_margin="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#drawable/white_corner_radius_background"
android:elevation="5dp"
android:weightSum="1"
android:orientation="horizontal"
android:layout_marginBottom="20dp">
<LinearLayout
android:layout_weight="0.75"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_vertical">
<TextView
android:id="#+id/adapter_Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="#dimen/ten_dp"
android:paddingEnd="#dimen/ten_dp"
android:text="Regional Snooker"
/>
<TextView
android:id="#+id/adapter_org"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="#dimen/ten_dp"
android:paddingEnd="#dimen/ten_dp"
android:text="Concered Authority"/>
</LinearLayout>
<TextView
android:id="#+id/adapter_data"
android:layout_weight="0.25"
android:layout_width="0dp"
android:layout_height="match_parent"
android:gravity="center"
android:textColor="#color/white"
android:background="#drawable/test_blue_bg"
android:layout_gravity="right|center"
android:text="PASSED"/>
</LinearLayout>
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginEnd="#dimen/ten_dp"
android:layout_gravity="end|bottom"
android:elevation="10dp"
android:background="#drawable/ic_round_favorite_unfilled" />
</FrameLayout>

Linearlayout above Relativelayout ( gravity bottom )

Layout wrap content not working
Below is my XML code . I want to place the portion linear layout with grey colour just above the main image . Screenshot of my code here.
In devices with aspect ratio 16:9 design is correct , but in 18:9 and 18.5:9 the grey portion is on top side .
The topic text and icon must be top left side portion of main image .
The design i want here
Never mind top side . From bottom the hight must be wrap the size of image
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:background="#color/light_green"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/dark_green">
<LinearLayout
android:id="#+id/topLin"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/grey"
android:orientation="horizontal">
<TextView
android:id="#+id/nameTxt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:ellipsize="end"
android:gravity="center|start"
android:maxLength="25"
android:singleLine="true"
android:text="Abin Stanly"
android:textColor="#color/white"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:adjustViewBounds="true"
android:src="#drawable/test" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#id/imageView"
android:layout_marginStart="20dp"
android:layout_marginTop="15dp">
<ImageView
android:id="#+id/icon"
android:layout_width="#dimen/icon_height"
android:layout_height="#dimen/icon_height"
android:layout_gravity="center"
android:src="#drawable/ic_love" />
<TextView
android:id="#+id/topicTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:gravity="center"
android:paddingEnd="10dp"
android:shadowColor="#color/grey"
android:shadowDx=".5"
android:shadowDy=".5"
android:shadowRadius="3.5"
android:text="Topic"
android:textColor="#color/white"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</LinearLayout>

Here the main layout is RelativeLayout and the children are both layout_alignParentBottom="true"
You can just switch the child layouts around until you get the required layout
Tip: The less layouts you use, the faster rendering will be on slow devices.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/light_green">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/grey">
<TextView
android:id="#+id/nameTxt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:ellipsize="end"
android:gravity="center|start"
android:maxLength="25"
android:singleLine="true"
android:text="Abin Stanly"
android:textColor="#color/white"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<ImageView
android:id="#+id/icon"
android:layout_width="#dimen/icon_height"
android:layout_height="#dimen/icon_height"
android:layout_gravity="center"
android:src="#drawable/ic_love" />
</LinearLayout>
</RelativeLayout>

I have added weightSum to parent LinearLayout so you can easily divide screen according to your requirements.
Assigned View android:layout_weight="3" so it will cover 3/10th part of the screen, you can change it according to what you feels good for you.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:background="#android:color/holo_green_light"
android:orientation="vertical"
android:weightSum="10"
xmlns:android="http://schemas.android.com/apk/res/android">
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:background="#android:color/holo_green_light"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="7">
<TextView
android:id="#+id/nameTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLength="25"
android:padding="11dp"
android:background="#android:color/darker_gray"
android:text="Abin Stanly"
android:textColor="#android:color/white"
android:textStyle="bold" />
<RelativeLayout
android:id="#+id/RelativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/nameTxt"
android:layout_alignParentBottom="true"
>
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:scaleType="centerCrop"
android:src="#drawable/mobile_world" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#id/imageView"
android:background="#android:color/black"
android:padding="11dp"
>
<ImageView
android:id="#+id/icon"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="center"
android:src="#drawable/back_arrow" />
<TextView
android:id="#+id/topicTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:gravity="center"
android:paddingEnd="10dp"
android:shadowColor="#android:color/darker_gray"
android:shadowDx=".5"
android:shadowDy=".5"
android:shadowRadius="3.5"
android:layout_gravity="center_vertical"
android:text="Topic"
android:textColor="#android:color/white"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
Output

Check this layout:
<?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="match_parent"
android:background="#android:color/holo_green_light">
<TextView
android:id="#+id/nameTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/imageView"
android:background="#android:color/darker_gray"
android:maxLength="25"
android:padding="10dp"
android:text="Abin Stanly"
android:textColor="#android:color/white"
android:textStyle="bold" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:scaleType="centerCrop"
android:src="#drawable/test" />
<TextView
android:id="#+id/topicTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView"
android:layout_gravity="center_vertical"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:drawableStart="#drawable/ic_love"
android:drawablePadding="10dp"
android:gravity="center"
android:paddingEnd="10dp"
android:shadowColor="#android:color/darker_gray"
android:shadowDx=".5"
android:shadowDy=".5"
android:shadowRadius="3.5"
android:text="Topic"
android:textColor="#android:color/white"
android:textStyle="bold" />
</RelativeLayout>

How to add a line accross layout like in the given image?

I want to make my layout below like in the image I have added at the end. I am able to rotate and add a picture as in the image, but the problem is that the line is going out of the border.
So, how can I perfectly make that lie within border?
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#drawable/cover_pic_background"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#736f6f"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/star"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Certified"
android:layout_gravity="center"
android:textSize="30sp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/star"
/>
</LinearLayout>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageViewId_CoverPic"
android:scaleType="centerInside"
android:padding="3dp"
/>
<ImageView
android:id="#+id/inside_imageview"
android:layout_width="80dp"
android:layout_height="90dp"
android:layout_marginStart="39dp"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:scaleType="centerInside"
android:background="#drawable/cover_pic_background"
android:elevation="5dp"
/>
</RelativeLayout>

Try this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_margin="10dp">
<ImageView
android:id="#+id/nilu"
android:layout_width="match_parent"
android:layout_height="250dp"
android:src="#color/colorAccent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="250dp"
android:layout_height="150dp"
android:layout_alignBottom="#+id/nilu"
android:layout_alignParentStart="true"
android:src="#mipmap/ic_launcher_round" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/imageView"
android:layout_alignTop="#+id/imageView"
android:layout_marginLeft="-70dp"
android:background="#color/colorPrimary"
android:padding="10dp"
android:paddingStart="50dp"
android:rotation="-50"
android:layout_marginTop="-10dp"
android:text="certified profile"
android:textColor="#ffffff" />
</RelativeLayout>
OUTPUT

Make transparent image with this design. And put it over profile pic.

View not visible in device but visible in XML

I am trying to build a layout with a right arrow and a vertical line with 2 textviews to right of it.
This layout will be used in a RecyclerView
This is the code that I am using,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:clickable="true"
android:id="#+id/rootLayout"
>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:layout_margin="#dimen/app_margin"
card_view:cardCornerRadius="4dp"
card_view:cardElevation="4dp"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
>
<View
android:layout_width="20dp"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:id="#+id/lineView"
android:layout_marginLeft="15dp"
android:background="#color/colorPrimary"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/name"
android:layout_toRightOf="#+id/lineView"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/type"
android:layout_toRightOf="#+id/lineView"
android:layout_below="#+id/name"
/>
<android.support.v7.widget.AppCompatImageView
android:layout_width="50dp"
android:layout_height="50dp"
app:srcCompat="#drawable/right_arrow"
android:layout_alignParentEnd="true"
android:layout_centerInParent="true"
android:id="#+id/right_arrow"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
This is the result of the above layout
The blue line is not visible when I run the output on my device but is visible in XML as shown
My Questions
How do I make it visible in my device ?
The blue line is very big I tried wrap_content but still did not work

You can simply align your lineView upto the height of text views. otherwise it will grow upto the device height. Refer this sample.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardBackgroundColor="#FFFFFF"
app:contentPadding="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<View
android:id="#+id/view"
android:layout_width="20dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/linearLayout"
android:layout_alignParentTop="true"
android:background="#color/colorPrimary" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/view"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="ABCD"
android:textSize="15sp" />
<TextView
android:id="#+id/value"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="ABCD"
android:textSize="15sp" />
</LinearLayout>
<ImageView
android:id="#+id/img"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
app:srcCompat="#drawable/ic_keyboard_arrow_right_black_24px" />
</RelativeLayout>
</android.support.v7.widget.CardView>
Screenshot of above example:

To fit the line according to content use this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white">
<View
android:layout_width="20dp"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:id="#+id/lineView"
android:layout_marginLeft="15dp"
android:background="#color/colorPrimary"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/name"
android:layout_toRightOf="#+id/lineView"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/type"
android:layout_toRightOf="#+id/lineView"
android:layout_below="#+id/name"
/>
<LinearLayout />

linear layout alignment issue on device while rendering correctly on designer

I have this code where I want 4 buttons to appear in given size and a textview to occupy the remaining space. this code while rendering correctly on android studio designer but on device it seems textview takes the wrapcontent property instead of layoutweight. did i miss anything?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/bg_now_playing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/primaryColor"
android:orientation="vertical"
tools:ignore="RtlHardcoded"
android:baselineAligned="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.7"
android:background="#color/miniplayer_color"
android:orientation="vertical">
<!--few components-->
<LinearLayout
android:id="#+id/bottom_controls"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="#+id/options"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/now_playing_extra_options_bg"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/nowplaying_favourites"
android:layout_width="#dimen/nowplaying_icon_dimension"
android:layout_height="#dimen/nowplaying_icon_dimension"
android:layout_marginLeft="#dimen/nowplaying_button_padding"
android:src="#drawable/favorite_icon" />
<ImageView
android:id="#+id/download_btn"
android:layout_width="#dimen/nowplaying_icon_dimension"
android:layout_height="#dimen/nowplaying_icon_dimension"
android:layout_margin="#dimen/nowplaying_button_padding"
android:src="#drawable/download_icon" />
<ImageView
android:id="#+id/now_playing_share_btn"
android:layout_width="#dimen/nowplaying_icon_dimension"
android:layout_height="#dimen/nowplaying_icon_dimension"
android:layout_marginRight="#dimen/nowplaying_button_padding"
android:src="#drawable/share_icon" />
<views.CustomTextView
android:id="#+id/caller_tune"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/roundcorner_white"
android:fontFamily="#string/roboto_regular"
android:text="#string/tune"
android:textAlignment="center"
android:textColor="#color/miniplayer_color"
android:textSize="#dimen/button_text_size"
android:textStyle="bold" />
<ImageView
android:id="#+id/equalizer_now_playing"
android:layout_width="#dimen/nowplaying_icon_dimension"
android:layout_height="#dimen/nowplaying_icon_dimension"
android:layout_margin="#dimen/nowplaying_button_padding"
android:gravity="right"
android:src="#drawable/equalizer_icon" />
</LinearLayout>
</LinearLayout>
<!--few more components-->
</LinearLayout>
</LinearLayout>

I think it might be problem with your custom view. Because I placed just textview it worked fine. Here is my sample code with sample icons and metrics.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/bg_now_playing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
android:baselineAligned="false"
android:orientation="vertical"
tools:ignore="RtlHardcoded">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.7"
android:background="#color/colorPrimary"
android:orientation="vertical">
<!--few components-->
<LinearLayout
android:id="#+id/bottom_controls"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="#+id/options"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/nowplaying_favourites"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="4dp"
android:src="#android:drawable/ic_delete" />
<ImageView
android:id="#+id/download_btn"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="4dp"
android:src="#android:drawable/ic_delete" />
<ImageView
android:id="#+id/now_playing_share_btn"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="4dp"
android:src="#android:drawable/ic_delete" />
<views.CustomTextView
android:id="#+id/caller_tune"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/roundcorner_white"
android:fontFamily="#string/roboto_regular"
android:text="#string/tune"
android:textAlignment="center"
android:textColor="#color/miniplayer_color"
android:textSize="#dimen/button_text_size"
android:textStyle="bold" />
<ImageView
android:id="#+id/equalizer_now_playing"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginLeft="4dp"
android:gravity="right"
android:src="#android:drawable/ic_delete" />
</LinearLayout>
</LinearLayout>
<!--few more components-->
</LinearLayout>