Develop Reference

Button height custom list view

I'm trying to create a custom listview with 4 columns. Everything works fine, except for the height of each row, it's too big.
Here the result I have:
The problem comes from my button, because android take a weird height, that doesn't match the height of my image (I already check my image and it have the right proportion).
Here an example:
And I would like the "zone" of my image to just be the size of my image.
Here's my code:
<?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="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="100">
<TextView
android:id="#+id/txtAudioNom"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="17sp"
android:textColor="#color/black"
android:layout_weight="25"
android:text="Audio 1"/>
<TextView
android:id="#+id/txtAudioDate"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="17sp"
android:textColor="#color/black"
android:layout_weight="18" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_marginEnd="10dp"
android:layout_weight="29">
<ImageView
android:id="#+id/imgAudioNote"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:src="#drawable/icon_star"
app:tint="#color/purple_500"
android:contentDescription="#string/txt_content_desc"/>
<TextView
android:id="#+id/txtAudioNote"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="20sp"
android:textColor="#color/white" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_marginEnd="5dp"
android:layout_weight="29">
<ImageButton
android:id="#+id/btnAudioPlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:gravity="center"
android:background="#android:color/transparent"
android:src="#drawable/icon_play"
app:tint="#color/purple_500"
android:contentDescription="#string/txt_content_desc" />
</RelativeLayout>
</LinearLayout>
If you have any idea on how I can change that, thank you
EDIT:
I found a solution, I needed to add this line of code to my ImageButton:
android:adjustViewBounds="true"

Needed changes:
wrap_content all the views.
android:layout_centerInParent="true" the txtAudioNote
Extra:
No need to the RelativeLayout at the bottom.
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="100">
<TextView
android:id="#+id/txtAudioNom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="25"
android:gravity="center"
android:text="Audio 1"
android:textColor="#color/black"
android:textSize="17sp" />
<TextView
android:id="#+id/txtAudioDate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="18"
android:gravity="center"
android:textColor="#color/black"
android:textSize="17sp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_weight="29"
android:gravity="center">
<ImageView
android:id="#+id/imgAudioNote"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
app:src="#drawable/icon_star"
android:contentDescription="#string/txt_content_desc"
app:tint="#color/purple_500" />
<TextView
android:id="#+id/txtAudioNote"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#null"
android:gravity="center"
android:text="4"
android:textColor="#color/white"
android:textSize="20sp" />
</RelativeLayout>
<ImageButton
android:id="#+id/btnAudioPlay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="5dp"
android:layout_weight="29"
android:background="#android:color/transparent"
android:gravity="center"
android:scaleType="fitCenter"
android:contentDescription="#string/txt_content_desc"
android:src="#drawable/icon_play"
app:tint="#color/purple_500" />
</LinearLayout>

He has found a solution which he states in the EDIT:
android:adjustViewBounds="true"
But I want to add for those who want to do it programmatically.
//add in onCreate
view.setAdjustViewBounds(true);

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>

Android layout with fixed button on bottom

I have the following xml which is supposed to be something similar to the following
The activity shows mostly ok, but i cant get the two down buttons to get fixed to the bottom of the screen without messing the top views.
I've tried to use a FrameLayout with two RelativeLayouts, alignment_bottom, an empty view with weight 1 between components and even still havent being able to accomplish my goal. Any help will be really appreciated, thank you in advance.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ScrollView android:layout_width="match_parent" android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/RelativeLayout1">
<ImageView
android:id="#+id/group_info_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:layout_alignParentTop="true"
/>
<TextView
android:id="#+id/description_text"
android:layout_below="#id/group_info_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/mainColor"
android:textSize="20sp"
android:text="#string/descripcion"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:fontFamily="sans-serif"
/>
<TextView
android:layout_below="#id/description_text"
android:gravity="start"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/group_info_description"
android:layout_marginTop="5dp"
android:layout_marginBottom="10dp"
android:layout_marginStart="10dp"
android:textSize="15sp"/>
<TextView
android:layout_below="#id/group_info_description"
android:scrollbars="vertical"
android:gravity="center"
android:textColor="#android:color/black"
android:layout_marginTop="10dp"
android:layout_marginStart="5dp"
android:layout_marginBottom="2dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/group_info_user_number"
android:textSize="15sp"
/>
<es.tretornesp.clickerchat.NonScrollableListView
android:layout_below="#id/group_info_user_number"
android:id="#+id/group_info_user_list"
android:layout_height="match_parent"
android:divider="#drawable/list_divider"
android:dividerHeight="1px"
android:layout_width="match_parent"/>
</RelativeLayout>
</ScrollView>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/delete_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/borrar_grupo"
android:background="#color/mainColor" />
<View
android:id="#+id/divisor"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/grey"/>
<Button
android:id="#+id/exit_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:text="#string/salir"
android:background="#color/mainColor"
/>
</LinearLayout>
</LinearLayout>

Change your layout file as below,
<?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">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/exit_group">
<RelativeLayout
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/group_info_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:scaleType="fitStart" />
<TextView
android:id="#+id/description_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/group_info_image"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:fontFamily="sans-serif"
android:text="#string/descripcion"
android:textColor="#color/mainColor"
android:textSize="20sp" />
<TextView
android:id="#+id/group_info_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/description_text"
android:layout_marginBottom="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="5dp"
android:gravity="start"
android:textSize="15sp" />
<TextView
android:id="#+id/group_info_user_number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/group_info_description"
android:layout_marginBottom="2dp"
android:layout_marginStart="5dp"
android:layout_marginTop="10dp"
android:gravity="center"
android:scrollbars="vertical"
android:textColor="#android:color/black"
android:textSize="15sp" />
<es.tretornesp.clickerchat.NonScrollableListView
android:id="#+id/group_info_user_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/group_info_user_number"
android:divider="#drawable/list_divider"
android:dividerHeight="1px" />
<Button
android:id="#+id/delete_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/group_info_user_list"
android:background="#color/mainColor"
android:text="#string/borrar_grupo" />
<View
android:id="#+id/divisor"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#id/delete_group"
android:background="#color/grey" />
</RelativeLayout>
</ScrollView>
<Button
android:id="#+id/exit_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/mainColor"
android:text="#string/salir"
android:textColor="#android:color/white" />
</RelativeLayout>

Use Coordinator Layout as a parent layout. like this.
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false">
// your code
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal">
<TextView
android:id="#+id/txt_contact_laksha_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="demo"
/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Text does not fit the screen in LinearLayout

The TextViews used in the following layout do not get wrapped in the screen and go out on the left (or start) edge of the screen.
<?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"
android:layout_width="match_parent" android:layout_height="match_parent"
>
<LinearLayout
android:id="#+id/text_pane"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/iv_video_thumbnail"
android:layout_toStartOf="#+id/iv_video_thumbnail"
android:orientation="vertical">
<TextView
android:id="#+id/tv_video_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:layout_gravity="end"
android:padding="#dimen/text_padding"/>
<TextView
android:padding="#dimen/text_padding"
android:layout_gravity="end"
android:id="#+id/tv_video_descr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="" />
</LinearLayout>
<ImageView
android:id="#+id/iv_video_thumbnail"
android:layout_width="#dimen/thumbnail_width"
android:layout_height="#dimen/thumbnail_height"
android:layout_alignBottom="#+id/text_pane"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:contentDescription="#string/video_thumbnail_image"
app:srcCompat="#drawable/video" />
</RelativeLayout>
I do not know why the text goes out of screen on the left side. I have tried using margin and padding for the RelativeLayout and LinearLayout and the two TextViews, but none of them solved the problem.
Currently, the app displays content as follows:
As you see in the code, I have also applied the gravity attribute to the TextViews, but no success yet. Does anyone know how to solve this?

Try this!!
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_video_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:padding="10dp"
android:text="#android:string/dialog_alert_title"
app:layout_constraintEnd_toStartOf="#+id/iv_video_thumbnail"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_video_descr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:padding="10dp"
android:text="#android:string/fingerprint_icon_content_description"
app:layout_constraintEnd_toStartOf="#+id/iv_video_thumbnail"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_video_title" />
<ImageView
android:id="#+id/iv_video_thumbnail"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="1dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/tv_video_descr"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/your_img" />
</android.support.constraint.ConstraintLayout>

Try this...
<?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:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/text_pane"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_toLeftOf="#+id/iv_video_thumbnail"
android:layout_toStartOf="#+id/iv_video_thumbnail"
android:layout_weight=".2"
android:orientation="vertical">
<TextView
android:id="#+id/tv_video_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""
android:gravity="right"
android:layout_margin="3dp"
android:layout_weight=".1"
android:padding="10dp"/>
<TextView
android:padding="10dp"
android:id="#+id/tv_video_descr"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_weight=".3"
android:text="" />
</LinearLayout>
<ImageView
android:id="#+id/iv_video_thumbnail"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/text_pane"
android:layout_alignParentEnd="true"
android:layout_weight=".1"
android:scaleType="fitXY"
android:layout_alignParentRight="true"/>
</LinearLayout>
Output:

Use this layout instead.
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/text_pane"
android:layout_width="0dp"
android:padding="#dimen/text_padding"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:orientation="vertical">
<TextView
android:id="#+id/tv_video_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:text="Hi" />
<TextView
android:id="#+id/tv_video_descr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:text="Hi" />
</LinearLayout>
<ImageView
android:id="#+id/iv_video_thumbnail"
android:layout_width="0dp"
android:layout_height="#dimen/thumbnail_height"
android:layout_alignBottom="#+id/text_pane"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_weight="0.3"
app:srcCompat="#drawable/video" />
</LinearLayout>

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 />