Develop Reference

Android Custom Circular ProgressBar drawable gets cut

I'm trying to make a Circular Timer by using a ProgressBar with a TextView in the middle of it. Everything looks good on phones with bigger screens, but on smaller screens the circle in the ProgressBar gets cut like this:
Image: [1]: https://i.stack.imgur.com/dteS6.png
I feel like I've tried everything but can't seem to get it to work.
So I would really appreciate if someone got a fix for this.
drawable/timer_circle_green:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:thickness="15dp"
android:useLevel="true">
<solid android:color="#53C085" />
</shape>
drawable/timer_circle_gray:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:thickness="15dp"
android:useLevel="false">
<solid android:color="#eff0f6" />
</shape>
main_activity.xml
<?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"
android:orientation="vertical"
app:layout_constraintVertical_weight="1"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintVertical_weight="0.2"
android:text="Timer"
android:textSize="45dp"
android:gravity="center"
android:textColor="#color/black"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/progressBarContainer"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginBottom="10dp"
/>
<RelativeLayout
android:id="#+id/progressBarContainer"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintVertical_weight="0.4"
app:layout_constraintTop_toBottomOf="#id/title"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#id/plusminuscontainer">
<ProgressBar
android:id="#+id/progressBarCircle"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/timer_circle_gray"
android:indeterminate="false"
android:max="360"
android:progress="360"
android:progressDrawable="#drawable/timer_circle_green"
android:rotation="-90"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"/>
<TextView
android:id="#+id/timertext"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignStart="#id/progressBarCircle"
android:layout_alignTop="#id/progressBarCircle"
android:layout_alignEnd="#id/progressBarCircle"
android:layout_alignBottom="#id/progressBarCircle"
android:layout_centerInParent="true"
android:alpha="0.8"
android:fontFamily="sans-serif-thin"
android:gravity="center"
android:text="15:00"
android:textColor="#color/black"
android:textSize="60sp"
android:textStyle="bold" />
</RelativeLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/plusminuscontainer"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintVertical_weight="0.4"
android:orientation="horizontal"
android:minHeight="90dp"
android:maxHeight="150dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:foregroundGravity="center"
app:layout_constraintTop_toBottomOf="#id/progressBarContainer"
app:layout_constraintBottom_toTopOf="#id/starttimerbutton"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<Button
android:id="#+id/decreasebtn"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="–"
android:textSize="60sp"
android:background="#drawable/grey_round_plus_minus_button"
android:textColor="#color/white"
android:fontFamily="sans-serif"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="#id/increasebtn"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
style="?android:attr/borderlessButtonStyle" />
<Button
android:id="#+id/increasebtn"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="+"
android:textSize="60sp"
android:background="#drawable/red_round_plus_minus_button"
android:textColor="#color/white"
android:fontFamily="sans-serif"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintStart_toEndOf="#id/decreasebtn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
style="?android:attr/borderlessButtonStyle"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<Button
android:id="#+id/starttimerbutton"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="25dp"
android:layout_marginEnd="25dp"
android:layout_marginBottom="25dp"
app:layout_constraintVertical_weight="0.4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/plusminuscontainer"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:textSize="18sp"
android:text="Start Timer"
android:textColor="#color/white"
android:background="#drawable/start_timer_button"
android:fontFamily="sans-serif"
android:layout_gravity="bottom"
android:textAllCaps="false" />
</androidx.constraintlayout.widget.ConstraintLayout>

Guideline does not shift based on change in Views dimensions inside barrier in ConstraintLayout

I have my root layout as ConstraintLayout in my activity. I have added one Guideline which is Percentage based and it is about 35 % from top. The Guideline divides the Layout in 2 section (35% top & 65% bottom). In top 25% section I have 2 TextViews. The textview text is dynamically changing. One Barrier is added in Layout which has my Guideline added in it. Top constraint of Image inside the below Section 65% is given to bottom of Barrier & bottom constraint of textview inside the 25% section is given to top of Barrier. When my Text inside above textview is increased, it is not shifting the Guideline & violating Barrier working. How it can be done ?
<?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:id="#+id/clIntroMainContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/intro_screen_background">
<androidx.constraintlayout.widget.Barrier
android:id="#+id/mybarrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="imageView,textView4,textView3,guideline2"
tools:layout_editor_absoluteY="731dp" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="fitXY"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/intro_background_cross" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.50"
app:srcCompat="#mipmap/ic_launcher" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:gravity="center"
android:text="#string/auto_expense_title"
android:textColor="#color/white"
android:textSize="#dimen/ExtraLargeText"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/imageView2"
app:layout_constraintStart_toStartOf="#+id/imageView2"
app:layout_constraintTop_toBottomOf="#+id/imageView2" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:gravity="center"
android:text="#string/auto_expense_info"
android:textColor="#color/white"
android:textSize="#dimen/MedText"
app:layout_constraintBottom_toTopOf="#+id/mybarrier"
app:layout_constraintEnd_toEndOf="#+id/textView3"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<ImageView
android:id="#+id/iv2"
android:layout_width="wrap_content"
android:layout_height="330dp"
android:layout_gravity="center"
android:adjustViewBounds="true"
app:layout_constraintBottom_toTopOf="#+id/mybarrier"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline2"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/phone_blue_black_final_intro" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.35" />
</androidx.constraintlayout.widget.ConstraintLayout>

As I understand the question you want to change top part based on "textView4"'s text size changed, If text is small then above part will not stay 25% in my answer. Let me know if your requirement is different, I will update it.
<?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:id="#+id/clIntroMainContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/color_grey">
<androidx.constraintlayout.widget.Barrier
android:id="#+id/mybarrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="imageView,textView4,textView3,guideline2"
tools:layout_editor_absoluteY="731dp" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="fitXY"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#color/browser_actions_text_color" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.50"
app:srcCompat="#drawable/ic_pen" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:gravity="center"
android:text="auto_expense_title"
android:textColor="#color/white"
android:textSize="#dimen/_12ssp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/imageView2"
app:layout_constraintStart_toStartOf="#+id/imageView2"
app:layout_constraintTop_toBottomOf="#+id/imageView2" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:gravity="center"
android:text="auto_expense_info auto_expense_info auto_expense_info auto_expense_info"
android:textColor="#color/white"
android:textSize="#dimen/_15ssp"
app:layout_constraintBottom_toTopOf="#+id/mybarrier"
app:layout_constraintEnd_toEndOf="#+id/textView3"
app:layout_constraintStart_toStartOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<ImageView
android:id="#+id/iv2"
android:layout_width="wrap_content"
android:layout_height="330dp"
android:layout_gravity="center"
android:adjustViewBounds="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mybarrier"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/empty_star" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.35" />
</androidx.constraintlayout.widget.ConstraintLayout>

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

how do i adjust the spaces and the overall look of the file so it looks more like the picture?

i am trying to make my login page more like the picture : https://ibb.co/DKmTnHH it currently looks like this : https://ibb.co/0MV0rgj
i can't seem to figure out how much margin do i put between the views just from the picture ? how do you figure it out , how do i make my edittext rounded from the side and all the small details ?
<?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"
>
<ImageView
android:id="#+id/logo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/logo"
android:scaleType="fitXY"/><!--set scale type fit xy-->
<EditText
android:id="#+id/username"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_above="#id/password"
android:hint="اسم المستخدم" />
<EditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_above="#id/signin"
android:ems="10"
android:hint="كلمة السر" />
<ImageButton
android:id="#+id/signin"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_centerInParent="true"
android:layout_above="#id/forgetpassword"
android:src="#drawable/Login-button" />
<ImageButton
android:layout_width="match_parent"
android:layout_height="60dp"
android:id="#+id/forgetpassword"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_above="#id/noaccount"
android:src="#drawable/Forget-pass"/>
<ImageButton
android:id="#+id/noaccount"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_above="#id/footer"
android:layout_centerInParent="true"
android:src="#drawable/Dont-have-acc" />
<ImageView
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="60dp"
android:src="#drawable/footer-image"
android:layout_alignParentBottom="true"
android:scaleType="fitXY"/><!--set scale type fit xy-->
</RelativeLayout>

You can use ConstraintLayout with Chains and Guidelines to get a responsive screen without the having to use fixed size margins (makes your screen to a non-responsive one).
Here is an example:
<?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">
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintEnd_toStartOf="#+id/guideline32"
app:layout_constraintStart_toStartOf="#+id/guideline33"
app:layout_constraintTop_toTopOf="#+id/guideline31" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/button3"
app:layout_constraintEnd_toEndOf="#+id/button"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toTopOf="#+id/textView11"
app:layout_constraintEnd_toEndOf="#+id/button"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button2" />
<TextView
android:id="#+id/textView11"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toTopOf="#+id/textView12"
app:layout_constraintEnd_toEndOf="#+id/button"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button3" />
<TextView
android:id="#+id/textView12"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/button"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/textView11" />
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/guideline31"
app:layout_constraintEnd_toStartOf="#+id/guideline32"
app:layout_constraintStart_toStartOf="#+id/guideline33"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/avatars[10]" />
<android.support.constraint.Guideline
android:id="#+id/guideline31"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="200dp"
app:layout_constraintGuide_percent="0.3" />
<android.support.constraint.Guideline
android:id="#+id/guideline32"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="352dp"
app:layout_constraintGuide_percent="0.9" />
<android.support.constraint.Guideline
android:id="#+id/guideline33"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="20dp"
app:layout_constraintGuide_percent="0.1" />
</android.support.constraint.ConstraintLayout>
It will look like this:
For your round button look, you can use custom shape, create a new drawable file:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="-90"
android:centerColor="#F2F2F2"
android:endColor="#ADA996"
android:startColor="#DBDBDB" />
<stroke
android:width="2dp"
android:color="#000000" />
<corners android:radius="8dp" />
<padding
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp" />
And now just apply this to your view:
android:background="#drawable/frame"
And there you have it, custom looking View: