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

How to put circle above rectangle in XML

I want to make this layout (circle above rectangle)
this is where i stuck

I solved this
<?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"
android:background="#color/white"
tools:context=".activity.fragments.profile_page">
<View
android:id="#+id/view_header"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#color/purple_500"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:letterSpacing="1"
android:paddingVertical="10dp"
android:text="#string/app_name"
android:textAlignment="center"
android:textColor="#color/white"
android:textSize="30sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/imageView"
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#drawable/profile_circular_image_background"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/purple_200"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
</androidx.constraintlayout.widget.ConstraintLayout>

I used constraint Layout for making this layout.
see this layout image
First, create a drawable resource file into your drawable.
go to, Drawable -> Right Click -> New -> Drawble Resource File -> Give Any name
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval"
xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:color="#color/white" android:width="2dp"/>
<solid android:color="#color/black" />
</shape>
Second, Create your Layout in your Activity/Fragment
<?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"
android:background="#color/black"
tools:context=".FragmentA">making
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/teal_200"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Jonathan Wick"
android:textColor="#color/white"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="#id/imageView"
app:layout_constraintEnd_toEndOf="#id/imageView"
app:layout_constraintStart_toStartOf="#id/imageView"
app:layout_constraintTop_toTopOf="#id/imageView" />
<ImageView
android:id="#+id/circle"
android:layout_width="140dp"
android:layout_height="140dp"
android:layout_marginTop="10dp"
android:background="#drawable/circle"
app:layout_constraintBottom_toTopOf="#id/tvDashBoard"
app:layout_constraintEnd_toEndOf="#id/imageView"
app:layout_constraintStart_toStartOf="#id/imageView"
app:layout_constraintTop_toBottomOf="#id/tvName" />
<TextView
android:id="#+id/tvDashBoard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginTop="30dp"
android:drawableStart="#drawable/ic_dashboard"
android:drawablePadding="10dp"
android:text="Dashboard"
android:textColor="#color/white"
android:textSize="20sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/circle" />
</androidx.constraintlayout.widget.ConstraintLayout>

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 to make transparent Color background for camera preview exuding one View?

I want to make a scanner-like view for my camera preview I have created a view with a rectangle view in the center of the camera preview now I want to add a transparent color background to the camera preview but want to make a rectangle clear view. I have tried with set alpha and background color but it is not working in my view.
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/preview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/switchcamera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="camera_change"
android:onClick="onClick"
android:src="#drawable/frontcamera_foreground"
app:layout_constraintEnd_toEndOf="#+id/preview"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/text_animator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:text="1"
android:textColor="#color/white"
android:textSize="70sp"
android:textStyle="bold"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintGuide_percent="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/viewRectangle"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#drawable/border"
android:visibility="gone"
android:alpha="1"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
here FrameLayout is for the preview of the camera using custom SurfaceView
View is my RectangleView.

Try following:
Ignore com.otaliastudios.cameraview.CameraView it's just a camera library I have imported.
<?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=".MainActivity">
<com.otaliastudios.cameraview.CameraView
android:id="#+id/camera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:keepScreenOn="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/viewRectangle"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#drawable/border"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Now the important part is how border.xml drawable is constructed:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#android:color/transparent"/>
<stroke android:color="#a00" android:width="1dp"/>
</shape>
Notice that solid part is set to transparent and only stroke is given a solid color.This was you can achieve it.

Add Lines around an Image

Here guys,
I would like to add 4 lines of View in my Android screen. I was able to add 2 Lines, one on the top and one on the left but I don't know how to add one on the right and one on the bottom.
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"
android:background="#color/colorPrimary"
app:layout_constraintHeight_percent="0.25"
app:layout_constraintWidth_percent="0.25"
tools:context=".MainActivity">
<ImageView
android:id="#+id/imvBalle"
android:layout_width="24dp"
android:layout_height="20dp"
android:layout_gravity="center"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
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.482"
app:srcCompat="#drawable/balle" />
<View
android:id="#+id/lineTop"
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="#android:color/darker_gray" />
<View
android:id="#+id/lineLeft"
android:layout_width="10dp"
android:layout_height="match_parent"
android:background="#android:color/darker_gray" />
</android.support.constraint.ConstraintLayout>

Use layout_constraintEnd_toEndOf and layout_constraintBottom_toBottomOf constraints:
<View
android:id="#+id/lineRight"
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="#android:color/darker_gray"
app:layout_constraintEnd_toEndOf="parent" />
<View
android:id="#+id/lineBottom"
android:layout_width="10dp"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
app:layout_constraintBottom_toBottomOf="parent" />

You can add background around your view by creating a border shape.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#000000"
android:dashWidth="5dp"></stroke>
</shape>
</item>
</selector>