Hope all of you are doing well!
I was making a custom dialog box and created a xml file named find_teacher_dialog.xml but it is not coming up exactly as I want.
Below is my xml code block which I tried:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/customDialogLL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="8dp"
android:background="@drawable/dialog_bg"
android:elevation="8dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="@+id/dialogImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="16dp"
android:contentDescription="@string/coming_soon_image"
android:src="@drawable/coming_soon" />
<Button
android:id="@+id/okayBtn"
android:layout_width="150dp"
android:layout_height="55dp"
android:layout_gravity="center"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:background="@drawable/transparent_button_bg"
android:elevation="5dp"
android:fontFamily="sans-serif-condensed-medium"
android:text="@string/okay"
android:textColor="@color/black"
android:textSize="24sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
The resultant screenshot is below:
Help me with the resolution!
Thank you in advance!
I tried creating a custom dialog box with transparent background and a border but the result is showing the extra white space around the border.
##UPDATE##
Tried the answer by @heX and was able to remove the extra white spaces but still the corner are visible as white.
Below is the updated code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/customDialogLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/dialog_bg"
android:elevation="8dp">
<ImageView
android:id="@+id/dialogImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="16dp"
android:contentDescription="@string/coming_soon_image"
android:src="@drawable/coming_soon"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/okayBtn"
android:layout_width="150dp"
android:layout_height="55dp"
android:layout_gravity="center"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
android:background="@drawable/transparent_button_bg"
android:elevation="5dp"
android:fontFamily="sans-serif-condensed-medium"
android:text="@string/okay"
android:textColor="@color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@id/dialogImage"
app:layout_constraintStart_toStartOf="@id/dialogImage"
app:layout_constraintTop_toBottomOf="@id/dialogImage" />
</androidx.constraintlayout.widget.ConstraintLayout>
The problem you have is that you are adding a margin on the same ViewGroup that has the background. The top level ConstraintLayout
is the ViewGroup that should have the background, and then the contents can have margin/padding.
Now, I see that you have rounded corners so you have going to have to create a background like this one if you haven't already:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="12dp"/>
<stroke android:color="@android:color/black" android:width="4dp"/>
<solid android:color="@android:color/transparent"/>
</shape>