Develop Reference

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>

Shape's stroke doesn't appear

I defined a Drawable with a stroke but the stroke does not appear on the UI.
<ImageView
android:id="#+id/otherSecurityLaneImageView"
android:layout_width="130dp"
android:layout_height="52dp"
android:layout_marginStart="10dp"
android:padding="10dp"
android:background="#drawable/ll_rounded_corners_6dp"
android:backgroundTint="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/poi_icon_security_lane_clear" />
Here's how #drawable/ll_rounded_corners_6dp is defined:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:width="20dp" android:color="#color/ll_red" />
<corners android:radius="6dp" />
</shape>
I expected to see a fat red border around the ImageView in the Android Studio design view but none appears.

You can use various combinations:
app:backgroundTint="#android:color/holo_green_light"
app:backgroundTintMode="multiply"
ll_rounded_corners_6dp.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:width="20dp" android:color="#android:color/holo_red_dark" />
<corners android:radius="6dp" />
<solid android:color="#android:color/holo_blue_dark" />
</shape>
activity_main.xml:
<?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="#android:color/darker_gray"
tools:context=".MainActivity">
<ImageView
android:id="#+id/ImageView1"
android:layout_width="150dp"
android:layout_height="60dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/ll_rounded_corners_6dp"
android:padding="10dp"
android:src="#mipmap/ic_launcher_round"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/ImageView2"
android:layout_width="150dp"
android:layout_height="60dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/ll_rounded_corners_6dp"
android:padding="10dp"
android:src="#mipmap/ic_launcher_round"
app:backgroundTint="#android:color/holo_green_light"
app:backgroundTintMode="multiply"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/ImageView1" />
<ImageView
android:id="#+id/ImageView3"
android:layout_width="150dp"
android:layout_height="60dp"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/ll_rounded_corners_6dp"
android:padding="10dp"
android:src="#mipmap/ic_launcher_round"
app:backgroundTint="#android:color/holo_blue_light"
app:backgroundTintMode="screen"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/ImageView2" />
</android.support.constraint.ConstraintLayout>

I tried your code. Your drawable code is fine.
But to show stroke, There are need some changes in layoit xml code,
Just remove android:backgroundTint="#color/white" because of background tint color stroke does not appear, the main cause of it is that backgroundTint set the color into background of ImageView.
If you need to use backgroundTint you can use same color as stroke color.
Please try below code:
<ImageView
android:id="#+id/otherSecurityLaneImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:padding="10dp"
android:background="#drawable/ll_rounded_corners_6dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:src="#mipmap/ic_launcher" />
I hope its working for you.

After trial and error I got the stroke to appear by removing the android:backgroundTint parameter from the ImageView. I could not find documentation about it. I also tried different android:tintModes but none of them helped.