Develop Reference

Android match_parent on child not reaches weight from parent

Like in title. Layout looks great on Android Studio, but when I get it on real device it looks bad. The JavaCameraView takes only half of the screen while in Android Studio takes about 3/4 as it should be. JavaCameraView should reach horizontal bar shown on screen.
Here are my screenshots.
On Android Studio:
On real device:
Layout Inspector shows that this RelativeLayout that hosts JavaCameraView occupies all that space but JavaCameraView with height:match_parent not behaves like that:
Why is that so?
Here is my layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:opencv="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="5"
android:layout_above="#+id/scroll_view">
<org.opencv.android.JavaCameraView
android:id="#+id/java_surface_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
opencv:camera_id="any"
opencv:show_fps="true" />
</RelativeLayout>
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_marginBottom="?actionBarSize">
<RelativeLayout
android:id="#+id/rl"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="#+id/View1"
android:layout_width="wrap_content"
android:layout_height="2dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#android:color/darker_gray" />
<TextView
android:id="#+id/alert_pxcm_too_small"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/View1"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:textColor="#FF0000"
android:textSize="#dimen/text_size_rest"
android:visibility="visible" />
<Spinner
android:id="#+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:layout_below="#id/alert_pxcm_too_small"/>
<TextView
android:id="#+id/measurements_width_converter"
android:layout_marginTop="15dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/spinner"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:textColor="#0000FF"
android:text="#string/width_info"
android:textSize="#dimen/text_size_rest"
android:visibility="visible" />
<TextView
android:id="#+id/measurements_height_converter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/measurements_width_converter"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:textColor="#0000FF"
android:text="#string/width_info"
android:textSize="#dimen/text_size_rest"
android:visibility="visible" />
</RelativeLayout>
</ScrollView>
If you need something more just ask. Probably you will need also some Java code of classes, this fragment etc. Thank you in advance! :)

Your problem is on the value you're using in android:layout_weight and how you're set the android:layout_width and android:layout_height.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
...
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.3"
..
>
<org.opencv.android.JavaCameraView
android:layout_width="match_parent"
android:layout_height="match_parent"
..
/>
</RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.7"
<!-- Other views here -->
</ScrollView>
</LinearLayout>

Here is the working correctly layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:opencv="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginBottom="?actionBarSize">
<org.opencv.android.JavaCameraView
android:id="#+id/java_surface_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/scroll_view"
android:layout_alignParentTop="true"
opencv:camera_id="any"
opencv:show_fps="true" />
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_alignParentBottom="true">
<RelativeLayout
android:id="#+id/rl"
android:layout_width="match_parent"
android:layout_height="150dp">
<View
android:id="#+id/View1"
android:layout_width="wrap_content"
android:layout_height="2dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#android:color/darker_gray" />
<TextView
android:id="#+id/alert_pxcm_too_small"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/View1"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:textColor="#FF0000"
android:textSize="#dimen/text_size_rest"
android:visibility="visible" />
<Spinner
android:id="#+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/alert_pxcm_too_small"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp" />
<TextView
android:id="#+id/measurements_width_converter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/spinner"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp"
android:gravity="center_horizontal"
android:text="#string/width_info"
android:textColor="#0000FF"
android:textSize="#dimen/text_size_rest"
android:visibility="visible" />
<TextView
android:id="#+id/measurements_height_converter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/measurements_width_converter"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:text="#string/width_info"
android:textColor="#0000FF"
android:textSize="#dimen/text_size_rest"
android:visibility="visible" />
</RelativeLayout>
</ScrollView>
</RelativeLayout>

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>

Custom row with circular ImageView and textview in android

I am trying to create a custom row for my RecyclerView. Here is my custom row layout:
<?xml version="1.0" encoding="utf-8"?>
<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="180dp"
android:layout_margin="5dp"
android:background="#00000000">
<FrameLayout
android:id="#+id/customLevelLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/levelImage"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_above="#+id/gameText"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:src="#drawable/circular_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="1"
android:textColor="#fff"
android:textSize="45sp" />
<TextView
android:id="#+id/gameText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:gravity="center"
android:textColor="#000"
tools:text="Tracing" />
</RelativeLayout>
<ProgressBar
android:id="#+id/gameProgressBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:indeterminate="true"
android:padding="45dp"
android:visibility="gone" />
</FrameLayout>
<ImageView
android:id="#+id/lockImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/lock_background"
android:padding="45dp"
android:src="#drawable/lock"
android:visibility="gone" />
</RelativeLayout>
This is how it looks like:
The problem is, I have to define a predefined height of the custom row i.e 170dp currently. I am facing 2 problems because of this:
1) If I open the application in a small screen or a tablet device. The custom row is looking ugly i.e I loose the circular shape of the ImageView.
2) The text doesn't remain at the centre if there is a slight change in the layout.

Try this in your code .
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:layout_margin="5dp"
android:background="#00000000">
<FrameLayout
android:id="#+id/customLevelLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/levelImage"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:src="#drawable/circular_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:text="1"
android:textColor="#fff"
android:textSize="45sp"/>
</RelativeLayout>
<TextView
android:id="#+id/gameText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:gravity="center"
android:textColor="#000"
tools:text="Tracing"/>
</LinearLayout>
<ProgressBar
android:id="#+id/gameProgressBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:indeterminate="true"
android:padding="45dp"
android:visibility="gone"/>
</FrameLayout>
<ImageView
android:id="#+id/lockImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/lock_background"
android:padding="45dp"
android:src="#drawable/lock"
android:visibility="gone" />
</RelativeLayout>

Try This. You can use Linearlayout as root than for image and text use RelativeLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#00000000"
android:orientation="vertical">
<FrameLayout
android:id="#+id/customLevelLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/levelImage"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:src="#drawable/circular_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="1"
android:textColor="#fff"
android:textSize="45sp" />
</RelativeLayout>
<TextView
android:id="#+id/gameText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_margin="10dp"
android:gravity="center"
android:textColor="#000"
tools:text="Tracing" />
</LinearLayout>
<ProgressBar
android:id="#+id/gameProgressBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:indeterminate="true"
android:padding="45dp"
android:visibility="gone" />
</FrameLayout>
<ImageView
android:id="#+id/lockImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/lock_background"
android:padding="45dp"
android:src="#drawable/lock"
android:visibility="gone" />
</LinearLayout>

Use constrain layout which helps you to set image like you want just by drag and drop and add constrain

For supporting multiple screen. First you have to go through this link
enter link description here
Once you fix first issue, second issue also will get fix

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>