Develop Reference

Constraint layout in Custom Dialog problem

I have such XML file for custom Dialog:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:paddingHorizontal="15dp"
android:paddingVertical="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:paddingBottom="15dp">
<TextView
style="#style/tv_big"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#id/cl_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="Filter"/>
<com.google.android.material.button.MaterialButton
android:id="#+id/bt_reset"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="#id/cl_header"
android:text="RESET FILTERS"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_distance"
app:layout_constraintTop_toBottomOf="#id/cl_header"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_distance_title"
style="#style/tv_medium"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance range"/>
<TextView
android:id="#+id/tv_distance_result"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="#id/tv_distance_title"
app:layout_constraintLeft_toRightOf="#id/tv_distance_title"
app:layout_constraintRight_toRightOf="parent"
android:background="#ddd"
android:padding="3dp"
android:textColor="#333"
android:text="0 km - 500km"/>
<com.google.android.material.slider.RangeSlider
android:id="#+id/slider_distance"
app:layout_constraintTop_toBottomOf="#id/tv_distance_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:labelBehavior="gone"
android:stepSize="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/cl_distance"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:id="#+id/tv_location_title"
style="#style/tv_medium"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Location"/>
<EditText
android:id="#+id/et_location"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:layout_constraintTop_toBottomOf="#id/tv_location_title"
android:hint="#string/filter_location_et_hint" />
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/cl_location"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<Button
android:id="#+id/bt_cancel"
android:backgroundTint="#ccc"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:text="CANCEL"/>
<Button
android:id="#+id/bt_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="save"
android:layout_marginHorizontal="20dp"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Android Studio renders it in this way:
And this is what I want to have in my Dialog.
BUT:
On physical device and on emulator it looks different than in Android Studio:
My question is: how to place "Filter" title on the left, and make the location EditText matching the parent (in the working app)?

What everybody else said is correct, keeping your layout flat is good for both performance and for these situations where you want to quickly figure out why isn't the layout being laid out the way you wanted it ;)
Try this :
<androidx.constraintlayout.widget.ConstraintLayout 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:paddingHorizontal="15dp"
android:paddingVertical="10dp">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="start"
android:text="Filter"
app:layout_constraintBottom_toBottomOf="#id/bt_reset"
app:layout_constraintEnd_toStartOf="#id/bt_reset"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/bt_reset" />
<com.google.android.material.button.MaterialButton
android:id="#+id/bt_reset"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RESET FILTERS"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_distance_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance range"
app:layout_constraintBottom_toBottomOf="#id/tv_distance_result"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/tv_distance_result" />
<TextView
android:id="#+id/tv_distance_result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:background="#ddd"
android:gravity="center"
android:paddingHorizontal="18dp"
android:paddingVertical="3dp"
android:text="0 km - 500km"
android:textColor="#333"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/bt_reset" />
<com.google.android.material.slider.RangeSlider
android:id="#+id/slider_distance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stepSize="1.0"
app:labelBehavior="gone"
app:layout_constraintTop_toBottomOf="#id/tv_distance_result" />
<TextView
android:id="#+id/tv_location_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Location"
app:layout_constraintTop_toBottomOf="#id/slider_distance" />
<EditText
android:id="#+id/et_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="test"
app:layout_constraintTop_toBottomOf="#id/tv_location_title" />
<Button
android:id="#+id/bt_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:backgroundTint="#ccc"
android:text="CANCEL"
android:textColor="#color/colorBlack"
app:layout_constraintEnd_toStartOf="#id/bt_save"
app:layout_constraintTop_toBottomOf="#id/et_location" />
<Button
android:id="#+id/bt_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:text="save"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/et_location" />
</androidx.constraintlayout.widget.ConstraintLayout>

I changed inner ConstraintLayouts into LinearLayouts and used weights. I also used this trick to fill space between e.g. "Filter" title and "reset filters" button.
There was also an issue with ll_location LinearLayout - it didn't match the parent.
I replaced:
<LinearLayout
android:id="#+id/ll_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_distance_ext"
android:orientation="vertical">
<!-- content -->
</LinearLayout>
into:
<LinearLayout
android:id="#+id/ll_location"
android:layout_width="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_distance_ext"
android:orientation="vertical">
<!-- content -->
</LinearLayout>
And then it worked.
The reason why I don't want to use flat layout (why I use nested layouts) is that IMHO the flat layout makes the code more difficult to maintain.
When you have Views splited into groups you can easily replace them, no matter how many View there are in a group.
My solution:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:paddingHorizontal="15dp"
android:paddingVertical="10dp">
<LinearLayout
android:id="#+id/ll_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:paddingBottom="15dp">
<TextView
style="#style/tv_big"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="Filter"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<com.google.android.material.button.MaterialButton
android:id="#+id/bt_reset"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:text="reset filters"/>
</LinearLayout>
<LinearLayout
android:id="#+id/ll_distance_ext"
app:layout_constraintTop_toBottomOf="#id/ll_header"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_distance_title"
style="#style/tv_medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance range"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<TextView
android:id="#+id/tv_distance_result"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:textAlignment="center"
android:background="#ddd"
android:padding="3dp"
android:textColor="#333"
android:text="0 km - 500km"/>
</LinearLayout>
<com.google.android.material.slider.RangeSlider
android:id="#+id/slider_distance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:labelBehavior="gone"
android:stepSize="1.0" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_location"
android:layout_width="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_distance_ext"
android:orientation="vertical">
<TextView
android:id="#+id/tv_location_title"
style="#style/tv_medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Location"/>
<EditText
android:id="#+id/et_location"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:hint="#string/filter_location_et_hint" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_location"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<Button
android:id="#+id/bt_cancel"
android:backgroundTint="#ccc"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:text="cancel"/>
<Button
android:id="#+id/bt_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="save"
android:layout_marginHorizontal="20dp"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Cardview in Contraint Layout resizing not as supposed

I'm having trouble with this layout because is not working as I supposed. The textview inside the CardView is afecting the other views and the size of the card.
But when I see the xml, the other elements are not constrained to the size of the textview (or maybe I'm just stuck and I can't see it).
This is my xml. At design time, it works fine, but in runtime, the card width resizes. Any ideas?:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
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/apk/res-auto"
android:id="#+id/card_view"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="#C6C6C6"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="5dp"
card_view:cardUseCompatPadding="true">
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<ImageView
android:id="#+id/company_logo"
android:layout_width="68dp"
android:layout_height="68dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:src="#drawable/aguas_cartagena"
android:contentDescription="#string/company_logo"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/company_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginStart="8dp"
android:layout_toEndOf="#+id/company_logo"
android:text="XXX"
android:textSize="24sp"
app:layout_constraintStart_toEndOf="#+id/company_logo"
app:layout_constraintTop_toTopOf="#+id/company_logo" />
<TextView
android:id="#+id/pay_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/company_name"
android:layout_marginTop="8dp"
android:layout_toEndOf="#+id/company_logo"
android:text="Fecha pago: 14-Abr-2020"
app:layout_constraintStart_toStartOf="#+id/company_name"
app:layout_constraintTop_toBottomOf="#+id/company_name" />
<ImageView
android:id="#+id/icon_status"
android:layout_width="32dp"
android:layout_height="32dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/company_name"
app:srcCompat="#android:drawable/presence_online" />
<TextView
android:id="#+id/pay_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="$ 999.999.999"
app:layout_constraintEnd_toEndOf="#+id/icon_status"
app:layout_constraintTop_toBottomOf="#+id/company_name" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
EDIT:
For who has the same problem, I've found a solution in this post (second accepted answer):
Use RelativeLayout as the immediate parent to CardView.

Use thias xml code
<androidx.cardview.widget.CardView
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/apk/res-auto"
android:id="#+id/card_view"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="#C6C6C6"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="5dp"
card_view:cardUseCompatPadding="true">
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<ImageView
android:id="#+id/company_logo"
android:layout_width="68dp"
android:layout_height="68dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:src="#drawable/ic_phone"
android:contentDescription="company_logo"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<TextView
android:id="#+id/company_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginStart="8dp"
android:text="XXX"
android:textSize="24sp"
app:layout_constraintStart_toEndOf="#+id/company_logo"
app:layout_constraintTop_toTopOf="#+id/company_logo"
app:layout_constraintRight_toRightOf="parent"/>
<TextView
android:id="#+id/pay_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_toEndOf="#+id/company_logo"
android:text="Fecha pago: 14-Abr-2020"
app:layout_constraintStart_toStartOf="#+id/company_name"
app:layout_constraintTop_toBottomOf="#+id/company_name" />
<ImageView
android:id="#+id/icon_status"
android:layout_width="32dp"
android:layout_height="32dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#android:drawable/presence_online" />
<TextView
android:id="#+id/pay_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="$ 999.999.999"
app:layout_constraintEnd_toEndOf="#+id/icon_status"
app:layout_constraintTop_toBottomOf="#+id/company_name" />
</androidx.constraintlayout.widget.ConstraintLayout>

Use this Layout it Will never overlap well tested:-
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
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/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/card_view"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="#C6C6C6"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="5dp"
card_view:cardUseCompatPadding="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<ImageView
android:id="#+id/company_logo"
android:layout_width="68dp"
android:layout_height="68dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:src="#drawable/ic_phone"
android:contentDescription="company_logo"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<TextView
android:id="#+id/company_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginStart="8dp"
android:text="XXX"
android:textSize="24sp"
app:layout_constraintEnd_toStartOf="#+id/icon_status"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="#+id/company_logo"
app:layout_constraintTop_toTopOf="#+id/company_logo" />
<TextView
android:id="#+id/pay_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_toEndOf="#+id/company_logo"
android:text="Fecha pago: 14-Abr-2020"
app:layout_constraintEnd_toStartOf="#+id/pay_value"
app:layout_constraintStart_toStartOf="#+id/company_name"
app:layout_constraintTop_toBottomOf="#+id/company_name" />
<ImageView
android:id="#+id/icon_status"
android:layout_width="32dp"
android:layout_height="32dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#android:drawable/presence_online" />
<TextView
android:id="#+id/pay_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="$ 999.999.999"
app:layout_constraintEnd_toEndOf="#+id/icon_status"
app:layout_constraintTop_toBottomOf="#+id/company_name" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

For who has the same problem, I've found a solution in this post (second accepted answer):
Use RelativeLayout as the immediate parent to CardView
The solution was to enclose the Cardview layout inside a RelativeLayout:
<RelativeLayout
android:layout_width="match_parent" ... >
<CardView
android:layout_width="match_parent" ... >
</CardView>
</RelativeLayout>

Layout Problems - Not able to create layout properly in android

I am creating a layout in android but the problem is layout is not created as same in design.
I want to create layout like below image i.e.
but the problem is my design distort in some devices like
enter image description here
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/lay1"
android:layout_margin="#dimen/dp20"
>
<ImageView android:id="#+id/kk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/move_stock_bar"
android:background="#android:color/transparent"
android:scaleType="centerCrop"
/>
<ImageButton android:id="#+id/ibPlus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentRight="true"
android:background="#android:color/transparent"
android:src="#drawable/btn_edit"
android:layout_toRightOf="#id/kk"
android:layout_marginLeft="-100dp"
android:layout_marginTop="#dimen/dp10"
/>
<ImageButton android:id="#+id/ibMinus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentRight="true"
android:background="#android:color/transparent"
android:src="#drawable/btn_edit"
android:layout_toRightOf="#id/kk"
android:layout_below="#id/ibPlus"
android:layout_marginLeft="-100dp"
android:layout_marginTop="-40dp"
/>
</RelativeLayout>

#mishti I have just used this concept to make the design appear to like what you gave. Try this with ImageView using the weight. It displays the same to all screens if we use weight.
<LinearLayout
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="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="10">
<Button
android:layout_width="0dp"
android:layout_height="120dp"
android:layout_weight="6"
android:text="Image View"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="4"
android:layout_gravity="start"
android:gravity="start">
<ImageView
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/edit_icon"
android:background="#FF0"
android:layout_gravity="start"
/>
<ImageView
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/edit_icon"
android:background="#FF0"
android:layout_gravity="start"
/>
</LinearLayout>
</LinearLayout>

Use ConstraintLayout for complex layout, it provides you more flexiblity. I did the same layout as in the image attached with question. I am using Guidelines, so i can use this same layout on different screen size and it will work fine.
I am using "app:srcCompat" attribute for setting the image because i am using Vector image here.
<?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"
android:layout_width="match_parent"
android:layout_height="140dp"
android:background="#color/color_black">
<android.support.constraint.Guideline
android:id="#+id/guideline_horizontal_top"
android:layout_width="match_parent"
android:layout_height="1dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".01" />
<android.support.constraint.Guideline
android:id="#+id/guideline_horizontal_bottom"
android:layout_width="match_parent"
android:layout_height="1dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".99" />
<android.support.constraint.Guideline
android:id="#+id/guideline_vertical_start"
android:layout_width="1dp"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent=".2" />
<android.support.constraint.Guideline
android:id="#+id/guideline_vertical_mid"
android:layout_width="1dp"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent=".8" />
<android.support.constraint.ConstraintLayout
android:id="#+id/main_text_container"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/color_red"
app:layout_constraintBottom_toTopOf="#+id/guideline_horizontal_bottom"
app:layout_constraintEnd_toStartOf="#+id/guideline_vertical_mid"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/guideline_horizontal_top">
<android.support.constraint.Guideline
android:id="#+id/guideline_vertical"
android:layout_width="1dp"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent=".2" />
<ImageView
android:id="#+id/logo_iv"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline_vertical"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_image_placeholder" />
<TextView
android:id="#+id/title_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:gravity="center"
android:text="MOVE STOCK"
android:textColor="#color/color_white"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline_vertical"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/button_container"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/guideline_horizontal_bottom"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/guideline_vertical_mid"
app:layout_constraintTop_toBottomOf="#+id/guideline_horizontal_top">
<ImageButton
android:id="#+id/button1"
android:layout_width="54dp"
android:layout_height="54dp"
android:background="#color/color_white"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_image_placeholder" />
<ImageButton
android:id="#+id/button2"
android:layout_width="54dp"
android:layout_height="54dp"
android:background="#color/color_white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button1"
app:srcCompat="#drawable/ic_image_placeholder" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

Change RecyclerView CardView background to transparent

Problem Short Version:
I want to make my CardView and RecyclerView background transparent, so
the fragment/activity background should become visible.
Explained:
I have an activity A with background image and fragment B is replaced on its Framelayout , in Fragment B i have recyclerView which with CardView now problem is i want to make every background transparent so only CardView will be visible with actual background of activity
RecyclerView look like this(These white background should be transparent) :
Code
Activity(A)
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/fl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:backgroundTint="#android:color/transparent"/>
Fragment(B) RecyclerView
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:backgroundTint="#android:color/transparent"
android:background="#android:color/transparent">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv"
tools:listitem="#layout/layout_video_item"
android:backgroundTint="#android:color/transparent"
android:background="#android:color/transparent"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<TextView
android:id="#+id/tv_not_found"
android:text="No Media Found Yet"
android:layout_gravity="center"
android:gravity="center"
android:visibility="gone"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.CoordinatorLayout>
CardView / Item 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="wrap_content"
android:layout_marginEnd="3dp"
android:layout_marginStart="3dp"
android:layout_marginTop="3dp"
android:background="#android:color/transparent">
<android.support.v7.widget.CardView
style="#style/CardView.Light"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardUseCompatPadding="true"
android:background="#android:color/transparent"
android:backgroundTint="#android:color/transparent"
app:cardCornerRadius="5dp"
android:padding="0dp"
app:cardElevation="0dp"
tools:ignore="ContentDescription">
<android.support.constraint.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#color/colorAccent">
<ImageView
android:id="#+id/media_image"
android:layout_width="100dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#android:color/darker_gray" />
<ImageButton
android:id="#+id/ib_delete"
android:layout_width="30dp"
android:layout_height="40dp"
android:background="#00FFFFFF"
android:padding="12dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#drawable/ic_delete_white_24dp" />
<ImageButton
android:id="#+id/share_button"
android:layout_width="30dp"
android:layout_height="40dp"
android:background="#00FFFFFF"
android:padding="12dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/ib_delete"
app:srcCompat="#drawable/ic_share_white_24dp" />
<TextView
android:id="#+id/tv_video_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:ellipsize="marquee"
android:singleLine="true"
android:text="Title Test"
android:textAppearance="#style/TextAppearance.AppCompat.Large.Inverse"
android:textColor="#color/colorPrimaryText"
app:layout_constraintEnd_toStartOf="#+id/tv_ribbon"
app:layout_constraintStart_toEndOf="#+id/media_image"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_ribbon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_red_light"
android:ellipsize="marquee"
android:fontFamily="monospace"
android:padding="3dp"
android:singleLine="true"
android:text="New"
android:textColor="#color/colorIcons"
android:textSize="14sp"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_path"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="5dp"
android:ellipsize="marquee"
android:singleLine="true"
android:text="subtitle test"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/media_image"
app:layout_constraintTop_toBottomOf="#+id/tv_video_name" />
<ImageView
android:id="#+id/iv_is_audio"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="5dp"
android:layout_marginTop="8dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/media_image"
app:layout_constraintTop_toBottomOf="#+id/tv_duration"
app:srcCompat="#drawable/ic_settings_voice_black_24dp" />
<ImageView
android:id="#+id/iv_is_video"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginStart="5dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="#+id/iv_is_audio"
app:layout_constraintStart_toEndOf="#+id/iv_is_audio"
app:layout_constraintTop_toTopOf="#+id/iv_is_audio"
app:srcCompat="#drawable/ic_theaters" />
<ImageView
android:id="#+id/iv_is_gif"
android:layout_width="35dp"
android:layout_height="30dp"
android:layout_marginStart="5dp"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="#+id/iv_is_video"
app:layout_constraintStart_toEndOf="#+id/iv_is_video"
app:layout_constraintTop_toTopOf="#+id/iv_is_video"
app:srcCompat="#drawable/ic_gif" />
<TextView
android:id="#+id/tv_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginTop="8dp"
android:text="0:00"
app:layout_constraintStart_toEndOf="#+id/media_image"
app:layout_constraintTop_toBottomOf="#+id/tv_path" />
<TextView
android:id="#+id/tv_size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="0 MB"
app:layout_constraintBottom_toBottomOf="#+id/tv_duration"
app:layout_constraintStart_toEndOf="#+id/tv_duration"
app:layout_constraintTop_toTopOf="#+id/tv_duration" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
Reason for asking question:
I know there are lots of SO question out there to get this same task done but my requirements are little different and reason for asking this question is nothing is working for me.
Expectation

Set CardView Background to app:cardBackgroundColor="#00ffffff"

Constraint layout with wrap_content clips it's content

Recently I've bumped into a strange ConstraintLayout behavior. What I tried to do was a simple layout with ImageView, Button and a TextView. Here's the code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#null"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:text="TEST TEXT"
android:paddingTop="20dp"
app:layout_constraintStart_toStartOf="#id/image"
app:layout_constraintTop_toBottomOf="#+id/button" />
<android.support.v4.widget.Space
android:id="#+id/marginSpacer"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="10dp"
app:layout_constraintBottom_toBottomOf="#id/image" />
<Button
android:id="#id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:background="#drawable/button_bg"
android:text="BUTTON"
app:layout_constraintTop_toBottomOf="#id/marginSpacer" />
</android.support.constraint.ConstraintLayout>
The ImageView content is loaded using Glide like this:
Glide.with(this).load("https://homepages.cae.wisc.edu/~ece533/images/monarch.png").into(imageView);
Here is how I wanted it to look like:
And here's what I actually got:
My intent was to make the text align relative to the button, not the image, how do I make this happen? Why did the ConstraintLayout clip itself to the ImageView? On the other hand, if I align the text relative to the image everything works great and nothing is clipped.
The full source is available here:
https://github.com/satorikomeiji/ConstraintLayoutBug

Use this for your Button:
#+id/button
instead of
android:id="#id/button"
You'll be able to design urself.
I would suggest you to add loading image:
.placeholder(R.drawable.ic_error_black_48px)
My Layout:
<?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/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteY="81dp">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#null" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="8dp"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:paddingTop="20dp"
android:text="TEST TEXT"
app:layout_constraintStart_toStartOf="#+id/ButtonLayout"
app:layout_constraintTop_toBottomOf="#+id/ButtonLayout" />
<android.support.constraint.ConstraintLayout
android:id="#+id/ButtonLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/image"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image">
<View
android:id="#+id/dummyView"
android:layout_width="match_parent"
android:layout_height="15dp" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:background="#drawable/button_bg"
android:text="BUTTON"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dummyView" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
Preview:

You need to align something to the bottom of the parent
Align TEST TEXT TextView bottom to the bottom of parent like this:
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:text="TEST TEXT"
android:paddingTop="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#id/image"
app:layout_constraintTop_toBottomOf="#+id/button" />
And add plus sign in button id
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:background="#drawable/button_bg"
android:text="BUTTON"
app:layout_constraintTop_toBottomOf="#id/marginSpacer" />

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/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteY="81dp">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher_background"
android:adjustViewBounds="true"
android:contentDescription="#null" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="8dp"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:paddingTop="20dp"
android:text="TEST TEXT"
app:layout_constraintStart_toStartOf="#+id/ButtonLayout"
app:layout_constraintTop_toBottomOf="#+id/ButtonLayout" />
<android.support.constraint.ConstraintLayout
android:id="#+id/ButtonLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/image"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image">
<View
android:id="#+id/dummyView"
android:layout_width="match_parent"
android:layout_height="15dp" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:text="BUTTON"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dummyView" />
</android.support.constraint.ConstraintLayout>