Develop Reference

Why does my XML element not have rounded corners?

I am trying to create a rectangle with rounded corners to be the background of two elements in my XML. I have created a TextView for this background called prod1_bg and set its cornerRadius to 10dp.
Why don't the prodX_bg rectangles have rounded corners even though I specified a cornerRadius of 10dp?
XML:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".SearchResultsScreen">
<ScrollView
android:layout_width="407dp"
android:layout_height="422dp"
android:layout_marginTop="10dp"
android:contentDescription="#string/search_results"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/searchbar">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/inner_constraint"
android:layout_width="match_parent"
android:layout_height="1100dp">
**<TextView
android:id="#+id/prod1_bg"
android:layout_width="350dp"
android:layout_height="100dp"
android:background="#4A8BC34A"
android:visibility="invisible"
app:cornerRadius="10dp"
app:layout_constraintBottom_toBottomOf="#+id/product_img_test"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/product_img_test" />
<TextView
android:id="#+id/prod2_bg"
android:layout_width="350dp"
android:layout_height="100dp"
android:background="#4A8BC34A"
android:visibility="invisible"
app:cornerRadius="10dp"
app:layout_constraintBottom_toBottomOf="#+id/product_img_test2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/product_img_test2" />**
<ImageButton
android:id="#+id/product_img_test"
android:layout_width="94dp"
android:layout_height="91dp"
android:layout_marginTop="20dp"
android:contentDescription="#string/product_desc_test"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.139"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/strongbow"
tools:ignore="ImageContrastCheck,DuplicateSpeakableTextCheck" />
<Button
android:id="#+id/product_btn_test"
android:layout_width="220dp"
android:layout_height="50dp"
android:background="#00FFFFFF"
android:textAllCaps="false"
android:textColor="#000000"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="#+id/product_img_test"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintStart_toEndOf="#+id/product_img_test"
app:layout_constraintTop_toTopOf="#+id/product_img_test"
tools:ignore="DuplicateSpeakableTextCheck,SpeakableTextPresentCheck" />
<Button
android:id="#+id/product_btn_test2"
android:layout_width="220dp"
android:layout_height="50dp"
android:background="#00FFFFFF"
android:textAllCaps="false"
android:textColor="#000000"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="#+id/product_img_test2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintStart_toEndOf="#+id/product_img_test"
app:layout_constraintTop_toTopOf="#+id/product_img_test2"
tools:ignore="SpeakableTextPresentCheck" />
<ImageButton
android:id="#+id/product_img_test2"
android:layout_width="94dp"
android:layout_height="91dp"
android:layout_marginTop="20dp"
android:contentDescription="#string/product_desc_test"
android:visibility="invisible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.141"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/product_img_test"
app:srcCompat="#drawable/strongbow"
tools:ignore="ImageContrastCheck,DuplicateSpeakableTextCheck" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</ScrollView>
<TextView
android:id="#+id/hor_line"
android:layout_width="0dp"
android:layout_height="4dp"
android:layout_marginBottom="100dp"
android:background="#C4C4C4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/ver_line"
android:layout_width="2dp"
android:layout_height="0dp"
android:background="#E3E6DA"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/hor_line" />
<com.google.android.material.imageview.ShapeableImageView
android:id="#+id/imvCircularWithStroke"
android:layout_width="86dp"
android:layout_height="86dp"
android:layout_marginBottom="56dp"
android:background="#44A6D0"
android:elevation="7dp"
android:padding="0dp"
app:layout_constraintBottom_toBottomOf="#+id/ver_line"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:shapeAppearanceOverlay="#style/Circular"
app:strokeColor="#D0EAE6"
app:strokeWidth="2dp"
tools:ignore="ImageContrastCheck" />
<ImageButton
android:id="#+id/barcode_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="76dp"
android:background="#0044A6D0"
android:contentDescription="#string/barcode_icon_desc"
android:elevation="7dp"
app:layout_constraintBottom_toBottomOf="#+id/ver_line"
app:layout_constraintEnd_toEndOf="#+id/hor_line"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="#+id/hor_line"
app:srcCompat="#drawable/barcode_icon"
tools:ignore="ImageContrastCheck"
app:tint="#FFFFFF" />
<ImageButton
android:id="#+id/search_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:background="#00FFFFFF"
android:contentDescription="#string/search_icon_desc"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.181"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/search_icon" />
<TextView
android:id="#+id/search_btn_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:text="#string/search_btn"
android:textColor="#000000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/search_btn"
app:layout_constraintStart_toStartOf="#+id/search_btn"
app:layout_constraintTop_toBottomOf="#+id/search_btn"
app:layout_constraintVertical_bias="0.0" />
<ImageButton
android:id="#+id/calendar_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:background="#00FFFFFF"
android:contentDescription="#string/calendar_icon_desc"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.742"
app:layout_constraintStart_toEndOf="#+id/search_btn"
app:srcCompat="#drawable/calendar_icon" />
<TextView
android:id="#+id/calendar_btn_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:text="#string/calendar_btn"
android:textColor="#000000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/calendar_btn"
app:layout_constraintStart_toStartOf="#+id/calendar_btn" />
</androidx.constraintlayout.widget.ConstraintLayout>

IIRC, in order to use the cornerRadius attribute directly in layout file, the minimum API level for your app must be 31+ (which means it will only support devices with Android 12 and above).
You can also use some View/Layout that already support a rounded corners like CardView (will need to update Gradle dependencies).
Or you can just simply create a drawable XML file with rectangle shape (and having corners' radiuses). Then set that drawable as your TextView's background.
Sample drawable named rounded_corners_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="5dp" /> <!-- corner radius -->
<solid android:color="#ffffff" /> <!-- inner background colour -->
<stroke android:color="#000000" /> <!-- border colour -->
</shape>
There are other attributes as well such as <gradient>, <padding>, ...
Then, in your <TextView>:
<TextView
android:id="#+id/text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corners_background" />

What is this android ui element called?

Currently, I am trying to create a UI for my app and came across a design of the Amazon Android app. I was very interested in the following:
My question now is: What does this UI element consist of? I would have thought of two CardViews within one Cardview. This is my current approach:
<com.google.android.material.card.MaterialCardView
android:id="#+id/cvAddress"
android:layout_width="0dp"
android:layout_height="100dp"
app:strokeColor="#color/color_user_address_border"
app:strokeWidth="1dp"
app:cardCornerRadius="8dp"
app:layout_constraintEnd_toStartOf="#+id/margin_right"
app:layout_constraintStart_toStartOf="#+id/margin_left"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="50dp"
app:strokeWidth="0dp"
app:cardCornerRadius="0dp" />
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="50dp"
app:strokeWidth="0dp"
app:cardCornerRadius="0dp" />
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
It's pretty close, but my border is much thicker and looks kinda ugly.
Edit: Finished XML Layout
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cvAddress"
android:layout_width="0dp"
android:layout_height="152dp"
android:layout_marginTop="8dp"
android:background="#drawable/rounded_background_address"
app:layout_constraintEnd_toStartOf="#+id/margin_right"
app:layout_constraintStart_toStartOf="#+id/margin_left"
app:layout_constraintTop_toBottomOf="#+id/tvUserDataAddressHeadline">
<TextView
android:id="#+id/tvAddAddress"
android:layout_width="0dp"
android:layout_height="50dp"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Add new Address"
android:textColor="#color/color_text_dark"
android:textSize="16sp"
app:drawableEndCompat="#drawable/ic_arrow_big"
app:drawableTint="#color/color_text_dark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/color_divider"
app:layout_constraintBottom_toBottomOf="#+id/tvAddAddress"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvAddAddress" />
<TextView
android:id="#+id/tvShippingAddress"
android:layout_width="0dp"
android:layout_height="50dp"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Shipping Addresses"
android:textColor="#color/color_text_dark"
android:textSize="16sp"
app:drawableEndCompat="#drawable/ic_arrow_big"
app:drawableTint="#color/color_text_dark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvAddAddress" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/color_divider"
app:layout_constraintBottom_toBottomOf="#+id/tvShippingAddress"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvShippingAddress" />
<TextView
android:id="#+id/tvBillingAddress"
android:layout_width="0dp"
android:layout_height="50dp"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
android:gravity="center_vertical"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Billing Addresses"
android:textColor="#color/color_text_dark"
android:textSize="16sp"
app:drawableEndCompat="#drawable/ic_arrow_big"
app:drawableTint="#color/color_text_dark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvShippingAddress" />
</androidx.constraintlayout.widget.ConstraintLayout>
Pictures
Clicking first item
Clicking second item
Clicking third item

Your border is "much thicker" because you have two cardviews there I think.
I would not make the internal items a Cardview. You can have the rounded external border with a CardView or with any ViewGroup and a background with a rounded corner.
The items inside are/could/should be normal TextViews with a "drawable end" set to the disclosure triangle/arrow/caret (you name it).
You can make each item a ConstraintLayout and have two separate widgets as well (a TextView and an Image View) for much granular control.
UPDATE
Based on your final design, I made some changes.
Here's how it looks in the editor:
The key to not use the uneeded CardView is to give the replacing layout (a ConstraintLayout) a background with rounded corners.
To do so, create a Drawable (in the res/drawable folder), I called mine for this example "rounded_background.xml".
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="1dp" android:color="#android:color/darker_gray" />
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp" />
</shape>
Tweak at will.
I then, modified your Layout to be a bit "flatter".
Because you want each individual item to be clickable and have its own "ripple boundaries" You can wrap the Text/Images in their own ConstraintLayout.
So Version 1, looks like this:
<?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="wrap_content"
android:layout_margin="8dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#drawable/rounded_background">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayoutGroupAndRippleEffectOne"
android:layout_width="0dp"
android:layout_height="50dp"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="Meine Bestellungen"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_marginEnd="16dp"
android:contentDescription="#null"
android:src="#android:drawable/ic_input_add"
app:layout_constraintBottom_toBottomOf="#+id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView"
app:tint="#android:color/darker_gray" />
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:id="#+id/vBorderOne"
android:layout_width="0dp"
android:layout_height="1dp"
android:background="#android:color/darker_gray"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/constraintLayoutGroupAndRippleEffectOne" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayoutGroupAndRippleEffectTwo"
android:layout_width="0dp"
android:layout_height="50dp"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/vBorderOne">
<TextView
android:id="#+id/textViewTwo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="Spar-Abo-Artikel"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_marginEnd="16dp"
android:contentDescription="#null"
android:src="#android:drawable/ic_input_add"
app:layout_constraintBottom_toBottomOf="#+id/textViewTwo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/textViewTwo"
app:tint="#android:color/darker_gray" />
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:id="#+id/vBorderTwo"
android:layout_width="0dp"
android:layout_height="1dp"
android:background="#android:color/darker_gray"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/constraintLayoutGroupAndRippleEffectTwo" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayoutGroupAndRippleEffectThree"
android:layout_width="0dp"
android:layout_height="50dp"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/vBorderTwo">
<TextView
android:id="#+id/textViewThree"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="Adressen"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_marginEnd="16dp"
android:contentDescription="#null"
android:src="#android:drawable/ic_input_add"
app:layout_constraintBottom_toBottomOf="#+id/textViewThree"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/textViewThree"
app:tint="#android:color/darker_gray" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
(NOTE: I replaced all your local stuff with colors/icons from "android").
The hierarchy here is:
CL
CL1
TV + IV
DIVIDER
CL2
TV + IV
DIVIDER
CL3
TV + IV
CL
If you didn't need to modify the ImageView (or provide special click to the actual image view that is different from the actual text view... you could flatten this even further into something like
CL
TV1
DIVIDER
TV2
DIVIDER
TV3
CL
It would be more like:
<?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="wrap_content"
android:layout_margin="8dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#drawable/rounded_background">
<TextView
android:id="#+id/textViewOne"
android:foreground="?attr/selectableItemBackground"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Meine Bestellungen"
android:textSize="16sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:drawableTint="#android:color/darker_gray"
app:drawableEndCompat="#android:drawable/ic_input_add" />
<View
android:id="#+id/vBorderOne"
android:layout_width="0dp"
android:layout_height="1dp"
android:background="#android:color/darker_gray"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/textViewOne" />
<TextView
android:id="#+id/textViewTwo"
android:foreground="?attr/selectableItemBackground"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Spar-Abo-Artikel"
android:textSize="16sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/vBorderOne"
app:drawableTint="#android:color/darker_gray"
app:drawableEndCompat="#android:drawable/ic_input_add" />
<View
android:id="#+id/vBorderTwo"
android:layout_width="0dp"
android:layout_height="1dp"
android:background="#android:color/darker_gray"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/textViewTwo" />
<TextView
android:id="#+id/textViewThree"
android:foreground="?attr/selectableItemBackground"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="Adressen"
android:textSize="16sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/vBorderTwo"
app:drawableTint="#android:color/darker_gray"
app:drawableEndCompat="#android:drawable/ic_input_add" />
</androidx.constraintlayout.widget.ConstraintLayout>
Which looks like:
I didn't play with margins/paddings/etc. but you get the idea.
This is "better" in the sense that you only have a bunch of flat views.
Honestly, the TextView image (drawableEnd/Start/Top/Bottom) is a lot less customizable than a regular ImageView but if all you need is a icon, it can work for you.
I hope that helps.

Change custom dialog shape color with dark or light mode

I am using custom rounded backgrounds for dialogs in my Android Studio app but am running into a problem. I have specified the color of the shape to be white but would like to have it change to black for dark mode (as the text automatically changes and is unreadable with the white background). I cannot figure out how to do this.
Here is the rounded background xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/white" />
<corners android:radius="25dp" />
</shape>
Here is how I create my dialog:
var myDialog: Dialog
myDialog = Dialog(this.requireContext())
myDialog.setContentView(R.layout.popup_deposit);
myDialog.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
myDialog.show()
R.layout.popup_deposit:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:background="#drawable/rounded"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/textDepAmount"
android:layout_width="228dp"
android:layout_height="68dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:ems="100"
android:hint="0"
android:importantForAutofill="no"
android:inputType="number"
app:layout_constraintEnd_toStartOf="#+id/buttonDepAll"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<Button
android:id="#+id/buttonDepAll"
android:layout_width="68dp"
android:layout_height="68dp"
android:layout_marginEnd="10dp"
android:text="#string/all"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textDepAmount"
app:layout_constraintTop_toTopOf="#+id/textDepAmount" />
<TextView
android:id="#+id/textView4"
android:layout_width="244dp"
android:layout_height="49dp"
android:text="#string/how_much_money_would_you_like_to_deposit"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/buttonBack"
app:layout_constraintTop_toTopOf="#+id/buttonBack" />
<Button
android:id="#+id/buttonConfirmDeposit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="2dp"
android:enabled="false"
android:text="#string/deposit"
app:cornerRadius="25dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textDepAmount" />
<ImageButton
android:id="#+id/buttonBack"
android:layout_width="54dp"
android:layout_height="50dp"
android:layout_marginTop="16dp"
android:contentDescription="#string/back"
app:layout_constraintEnd_toStartOf="#+id/textView4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_arrow_back_black_24dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
Does anybody know how to do this? Any answers would be appreciated

ConstraintLayout: How to center a text between two buttons of varying sizes

I'm making a dialog with a header that contains a "Cancel" button, a title and finally a "Save" button. See image. The title is constrained between the buttons. However, when one of the buttons are longer than the other the title moves to one side as it is told to stay in the middle between the buttons.
How can I make the title view be centered below the drag handle and at the same time let it expand all the way to the buttons without overlapping them?
Thanks!

I just implement the same functionality on three buttons that align horizontal and don't overlap each other.
Please create views in the same way below implementation.
<Button
android:id="#+id/btnExit"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/dp_1"
android:background="#drawable/bluebtn_gradient_rectangle"
android:text="#string/exit"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnMemoryPreview"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvFill" />
<Button
android:id="#+id/btnMemoryPreview"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/dp_1"
android:background="#drawable/bluebtn_gradient_rectangle"
android:text="#string/user_memory_preview"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/UserMemoryWrite"
app:layout_constraintStart_toEndOf="#+id/btnExit"
app:layout_constraintTop_toBottomOf="#+id/tvFill" />
<Button
android:id="#+id/UserMemoryWrite"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/dp_1"
android:background="#drawable/bluebtn_gradient_rectangle"
android:text="#string/rfid_write"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/btnMemoryPreview"
app:layout_constraintTop_toBottomOf="#+id/tvFill" />

this is the only hack where you can set title without overlapping in centre of the screen
make one temp button same as long button in invisible mode
<?xml version="1.0" encoding="utf-8"?>
<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">
<Button
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="long cancel"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="long cancel"
android:visibility="invisible"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="save"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/black"
android:gravity="center"
android:padding="#dimen/_10sdp"
android:text="title"
android:textColor="#color/white"
app:layout_constraintLeft_toRightOf="#id/btn1"
app:layout_constraintRight_toLeftOf="#id/btn3"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
EDIT
this is another way, but this will be a mess when you have a very large title
<?xml version="1.0" encoding="utf-8"?>
<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">
<Button
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="long cancel"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/txt"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="save"
app:layout_constraintLeft_toRightOf="#id/txt"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/black"
android:gravity="center"
android:padding="#dimen/_10sdp"
android:text="title dfgfd gdg dfgdfg dfgdfg fdgfdfgd fgddf dfgdgdfgdfg dfg dfgfdg df"
android:textColor="#color/white"
app:layout_constraintLeft_toRightOf="#id/guideline"
app:layout_constraintRight_toRightOf="#id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
</androidx.constraintlayout.widget.ConstraintLayout>
Edit
if you know max length of long cancel button you can set app:layout_constraintWidth_percent to TextView based on that button width
<TextView
android:id="#+id/txt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/black"
android:gravity="center"
android:padding="#dimen/_10sdp"
android:text="title dfgfd gdg dfgdfg dfgdfg fdgfdfgd fgddf dfgdgdfgdfg dfg dfgfdg df"
android:textColor="#color/white"
app:layout_constraintLeft_toRightOf="#id/guideline"
app:layout_constraintRight_toLeftOf="#id/guideline"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.4" />

Ok, so inspired by some of your answers I started looking at guidelines. The idea was to use two guidelines, one on each side of the view, and set the distance from the parent to the guideline as the width of the biggest button plus any margin. Final code looks like this:
val biggestWidth = if (cancelButton.width > saveButton.width) {
cancelButton.width + cancelButton.marginStart
} else {
saveButton.width + saveButton.marginEnd
}
guidelineRight.setGuidelineEnd(biggestWidth)
guidelineLeft.setGuidelineBegin(biggestWidth)
The title is centered between the two guidelines.
Note that this width calculation must happen after the view has been laid out. Use view.doOnLayout { } and call your calculation from there.

Your drag handle seems to be at the center of the layout. So you can relate the title to left and right of the parent instead buttons. But still overlapping could be possible if title and cancel button text is lengthy.

You can center the title with respect to the drag handle but then cannot expand the TextView between cancel and save button. I think both cannot be done simultaneoulsy.
You can use the below code to center the title w.r.t the drag handle
<?xml version="1.0" encoding="utf-8"?>
<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">
<View
android:id="#+id/view"
android:layout_width="#dimen/dp_80"
android:layout_height="#dimen/dp_8"
android:layout_marginTop="#dimen/dp_8"
android:background="#color/divider"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/dp_8"
android:text="title"
android:textSize="#dimen/sp_24"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="#id/view"
app:layout_constraintStart_toStartOf="#id/view"
app:layout_constraintTop_toBottomOf="#id/view" />
<Button
android:id="#+id/cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="cancel"
android:textSize="#dimen/sp_16"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/title"
app:layout_constraintTop_toBottomOf="#id/view" />
<Button
android:id="#+id/save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="save"
android:textSize="#dimen/sp_16"
app:layout_constraintStart_toEndOf="#id/title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/view" />
</androidx.constraintlayout.widget.ConstraintLayout>

TextView
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
Cancel button
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/your_text_view_id"
Save button
app:layout_constraintStart_toEndOf="#id/your_text_view_id"
app:layout_constraintEnd_toEndOf="parent"
That way your buttons can expand freely without overlapping the text at the centre.

Remove Constrainsts button to textView and set TextView Constraints to left and right of layout.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/button"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="ButtonButtonButtonButtonButtonButtonButtonButton"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="wTextViewTextViewTextViewTextViewTextViewTextViewTextVwTextViewTextView
TextViewTextViewTextViewTextViewTextVwTextViewTextViewTextViewTextViewTextViewTextView
TextVwTextViewTextViewTextViewTextViewTextViewTextViewTextVTextViewTextViewTextViewTextView
TextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextView
TextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Without fixed button size
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_weight="1"
android:text="ButtonButtonButtonButtonButtonButtonButtonButton"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="wTextViewTextViewTextViewTextViewTextViewTextViewTextVwTextViewTextView
TextViewTextViewTextViewTextViewTextVwTextViewTextViewTextViewTextViewTextViewTextView
TextVwTextViewTextViewTextViewTextViewTextViewTextViewTextVTextViewTextViewTextViewTextView
TextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextView
TextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextViewTextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_weight="1"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

How to add textview to the left side of the button in android

I'm developing the Quiz application in android and I have to display options A, B, C, D inside the button on the left side.
So I know one way, which can be setting the image by drawableLeft property of the button. But putting the four images is not so good.
So I want to know that if there is any other way of doing this may be setting textview inside the button or some other way?
Here is my xml code:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activities.QuizDashboardActivity">
<ScrollView
android:id="#+id/scrollView4"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="fitXY"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_banner" />
<TextView
android:id="#+id/tv_question_no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="1"
android:gravity="center"
android:textAlignment="center"
android:background="#drawable/custom_textview"
android:textColor="#android:color/white"
android:textSize="#dimen/question_no"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_appname" />
<TextView
android:id="#+id/tv_appname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="90dp"
android:fontFamily="#font/sansita_one"
android:text="#string/app_name"
android:textColor="#android:color/white"
android:textSize="#dimen/app_title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_question"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="100dp"
android:layout_marginEnd="16dp"
android:text="#string/q1"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textSize="#dimen/question"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_question_no" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="16dp"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_question">
<Button
android:id="#+id/A"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/button_margin"
android:layout_marginBottom="#dimen/button_margin"
android:background="#drawable/custom_button"
android:text="#string/q1_a"
android:textColor="#android:color/black" />
<Button
android:id="#+id/B"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/button_margin"
android:background="#drawable/custom_button"
android:text="#string/q1_b"
android:textColor="#android:color/black" />
<Button
android:id="#+id/C"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/button_margin"
android:background="#drawable/custom_button"
android:text="#string/q1_c"
android:textColor="#android:color/black" />
<Button
android:id="#+id/D"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/button_margin"
android:background="#drawable/custom_button"
android:text="#string/q1_d"
android:textColor="#android:color/black" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>
Here is the output:

Yes you can add textview at left of the button by giving it an elevation. Set constraints of textview : top to the top of button, start to the start of button and bottom to the bottom of button. And then add elevation, so that textview will be displayed above the button.

Just use LinearLayout instead of a button,set gravity to left, set the option first (A,B,C,D) and then the text view with an answer instead.
No difference visible since you are using custom background for the buttons.
Don't forget to add an OnClickListener() to the new LinearLayout button.