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>

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

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

Custom background resource not working in android

I know it is a small thing but I don't know why it is not working.
when I am putting custom drawable image it is not working. I want to have a transparent background button with corners (stroke).
below is the image.
<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="match_parent"
android:background="#drawable/welcome"
tools:context=".MainActivity">
<ImageView
android:id="#+id/app_logo"
android:layout_width="300dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="60dp"
android:src="#drawable/applogo"/>
<TextView
android:id="#+id/app_slogan"
android:layout_width="220dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="80dp"
android:layout_marginTop="140dp"
android:text="Find, Discover, Choose and buy anything online"
android:textAlignment="center"
android:textSize="22sp"
android:textStyle="bold|italic"
android:textColor="#color/design_default_color_primary"
/>
<Button
android:id="#+id/main_login_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="10dp"
android:layout_marginStart="15dp"
android:layout_marginEnd="15dp"
android:background="#drawable/buttons"
android:padding="20dp"
android:textAllCaps="false"
android:textSize="18sp"
android:text="Already have a account ? Login"
android:textColor="#android:color/white"
/>
<Button
android:id="#+id/main_join_now_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_above="#id/main_login_btn"
android:layout_marginStart="15dp"
android:layout_marginEnd="15dp"
android:background="#drawable/input_design"
android:padding="20dp"
android:textAllCaps="false"
android:textSize="18sp"
android:text="Already have a account ? Login"
android:textColor="#android:color/white"
/>
</RelativeLayout>
// Drawable resource file.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:color="#fff"
android:width="3dp"
/>
<corners
android:radius="15dp"
/>
login button should have a background of input_design.xml but I don't know why it is not working.
help me out
thank you in advance.

To achieve a transparent background on your button perhaps use Widget.MaterialComponents.Button.OutlinedButton.
You will need this line in your build.gradle (if not there already):
implementation 'com.google.android.material:material:1.2.1'
Your button would then simply look like this:
<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"
android:background="#color/teal_700"
tools:context=".FirstFragment">
<Button
android:id="#+id/button"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="32dp"
android:text="I am a Button!"
android:textColor="#color/white"
app:cornerRadius="15dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:rippleColor="#color/white"
app:strokeColor="#color/white"
app:strokeWidth="3dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
Notice:
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:textColor="#color/white"
app:cornerRadius="15dp"
app:rippleColor="#color/white"
app:strokeColor="#color/white"
app:strokeWidth="3dp"
and that will produce:

Constraint Layout with transparency and elevation

I have 10 TextViews inside 1 Constraint Layout. What i would like to achieve is to have the Constraint Layout have some elevation to make it seem like all 10 textviews are basically above my background. But i would like to keep the background of my layout to take the background of the phone so have the Constraint layout have a transparent background. Any way i can achieve this?
I saw various posts here about this but they actually want the layout colored in and not transparent and that is where this one differs from theirs.
I have tried way to do it with shapes using a rectangle but the shadow of the elevation will only appear if i make the rectangle visible.... and not transparent.
<android.support.constraint.ConstraintLayout
android:id="#+id/topBorder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
android:layout_marginLeft="8dp"
app:layout_constraintTop_toBottomOf="#id/tvTitle">
<TextView
android:id="#+id/tvIon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="5dp"
android:text="#string/Ion"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/tvIonResult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="5dp"
android:text="#string/ResultPlaceHolder"
android:textColor="#android:color/black"
android:textSize="18sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvSn1_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:text="#string/sn1_1"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvIon" />
<TextView
android:id="#+id/tvSn1_Result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="#string/ResultPlaceHolder"
android:textColor="#android:color/black"
android:textSize="18sp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="#+id/tvIonResult" />
<TextView
android:id="#+id/tvSn1_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:text="#string/sn1_3"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvSn1_1" />
<TextView
android:id="#+id/tvSn1_3_Result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="10dp"
android:text="#string/ResultPlaceHolder"
android:textColor="#android:color/black"
android:textSize="18sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvSn1_Result" />
<TextView
android:id="#+id/tvSn2_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="10dp"
android:text="#string/sn2_1"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvSn1_3" />
<TextView
android:id="#+id/tvSn2_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="#string/sn2_3"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="#+id/tvSn2_1" />
<TextView
android:id="#+id/tvSn2_3_Result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="#string/ResultPlaceHolder"
android:textColor="#android:color/black"
android:textSize="18sp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="#+id/tvSn2_1_Result" />
<TextView
android:id="#+id/tvSn2_1_Result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginTop="10dp"
android:text="#string/ResultPlaceHolder"
android:textSize="18sp"
android:textColor="#android:color/black"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvSn1_3_Result" />
</android.support.constraint.ConstraintLayout>
This is my xml for what i tried
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<solid android:color="#00ffffff"/>
<stroke android:color="#00000000"/>
</shape>
</item>
</layer-list>

if you want to create a transparent activity on android
Add the following style in your res/values/styles.xml
file Here’s a complete file:
<style name="AppTheme.Transparent" paren="Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
</style>
then In the AndroidManifest.xml:
<activity
android:name=".WhateverNameOfTheActivityIs"
android:theme="#style/AppTheme.Transparent">
</activity>
If you do not want your layout to be completely transparent
then in your layout add this to ConstraintLayout
android:background="#80000000"

If you add this line to the Constraint Layout xml it will become transparent: android:background="#android:color/transparent". This will make the background see through and show what ever is bellow or overlapping.