set transperent background for constraint layout in android-CodePudding

The

But when i make the parent view transperent , default background is showing like this:

a transperent view is showing behind the main view.

my xml starts like :

<?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="wrap_content" android:layout_margin="@dimen/_8sdp" android:background="@color/red" android:clipChildren="false" android:clipToPadding="false"> <androidx.constraintlayout.widget.ConstraintLayout android:id="@ id/cl2" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/_50sdp" android:background="@drawable/rounded_corner_shadow" android:clipChildren="false" android:clipToPadding="false" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"> <FrameLayout android:id="@ id/progressLayout_frame" android:layout_width="@dimen/_90sdp" android:layout_height="@dimen/_90sdp" android:layout_gravity="center_horizontal" android:layout_marginTop="10dp" android:clickable="true" android:visibility="visible" app:layout_constraintBottom_toTopOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"> <View android:id="@ id/bgCircle" android:layout_width="@dimen/_70sdp" android:layout_height="@dimen/_70sdp" android:layout_gravity="center" android:alpha="0.7" android:background="@color/white" android:visibility="visible" /> <RelativeLayout android:id="@ id/progressLayout" android:layout_width="@dimen/_80sdp" android:layout_height="@dimen/_80sdp" android:layout_gravity="center" android:background="@android:color/transparent" android:clickable="true" > <ProgressBar android:id="@ id/progressbar" style="?android:attr/progressBarStyleHorizontal" android:layout_width="@dimen/_80sdp" android:layout_height="@dimen/_80sdp" android:layout_centerHorizontal="true" android:background="@drawable/circle_shape" android:progressDrawable="@drawable/circular_progress_bar" /> <TextView android:id="@ id/tvTimeCount" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_marginTop="60dp" android:text="00:00" android:textColor="#FFFFFF" android:textSize="29sp" app:customTypeFace="roboto_light" />

how can I hide the view behind . why does this layout come ? any suggestions would be helpful . thanks in advance

CodePudding user response：

I don't know how do you display this window in your app , but I suppose that you display it as custom dialog , so the problem is that you need to add a transparent theme for your dialog to get the same design or your dialog will fill the transparent spaces with this black color or white depends on your app theme , so to solve this problem you need to add this style in your theme.xml file or style.xml

<style name="AlertDialogCustom" parent="@android:style/Theme.Dialog"> <item name="android:windowBackground">@android:color/transparent</item> </style>

and then you create a new custom dialog in your activity like this

//Here i will create new dialog with a custom style which I added in Theme.xml final AlertDialog dialog2 = new AlertDialog.Builder(MainActivity.this,R.style.AlertDialogCustom).create(); LayoutInflater inflater = getLayoutInflater(); //Here I added my xml file , you can replace test with your own xml file View convertView = (View) inflater.inflate(R.layout.test, null); dialog2.setView(convertView); dialog2.setCancelable(false); //Here we tell the dialog to display , you can call show() when click a button dialog2.show();

and here it's my simple design to get a transparent background

<?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="350dp" android:layout_margin="8dp" android:background="@android:color/transparent" android:clipChildren="false" android:clipToPadding="false"> <androidx.constraintlayout.widget.ConstraintLayout android:id="@ id/cl2" android:layout_width="350dp" android:layout_height="350dp" android:layout_marginTop="50dp" android:background="#FFFFFF" android:clipChildren="false" android:clipToPadding="false" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"> <FrameLayout android:id="@ id/progressLayout_frame" android:layout_width="90dp" android:layout_height="90dp" android:layout_gravity="center_horizontal" android:layout_marginTop="10dp" android:clickable="true" android:visibility="visible" app:layout_constraintBottom_toTopOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"> <View android:id="@ id/bgCircle" android:layout_width="70dp" android:layout_height="70dp" android:layout_gravity="center" android:background="@drawable/pers_icon" android:visibility="visible" /> <RelativeLayout android:id="@ id/progressLayout" android:layout_width="80dp" android:layout_height="80dp" android:layout_gravity="center" android:background="@android:color/transparent" android:clickable="true"> </RelativeLayout> </FrameLayout> <Button android:id="@ id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" tools:layout_editor_absoluteX="218dp" tools:layout_editor_absoluteY="129dp" /> </androidx.constraintlayout.widget.ConstraintLayout> </androidx.constraintlayout.widget.ConstraintLayout>

Now this is the final result , you can make your own design

CodePudding user response：

To remove default background of the dialog...

Step 1:

Create a custom_dialog.xml

<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="wrap_content" android:layout_marginHorizontal="@dimen/_20sdp" android:paddingHorizontal="@dimen/_25sdp" android:paddingVertical="@dimen/_25sdp" > <androidx.constraintlayout.widget.Guideline android:id="@ id/left_vertical_gl" android:layout_width="match_parent" android:layout_height="0dp" android:orientation="vertical" app:layout_constraintGuide_percent="0.02" /> <androidx.constraintlayout.widget.Guideline android:id="@ id/right_vertical_gl" android:layout_width="match_parent" android:layout_height="1dp" android:orientation="vertical" app:layout_constraintGuide_percent="0.98" /> <androidx.constraintlayout.widget.Guideline android:id="@ id/center_horizontal_gl" android:layout_width="match_parent" android:layout_height="1dp" android:orientation="horizontal" app:layout_constraintGuide_percent="0.48" /> <androidx.constraintlayout.widget.Guideline android:id="@ id/top_horizontal_gl" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintGuide_percent="0.044" /> <androidx.constraintlayout.widget.Guideline android:id="@ id/end_horizontal_gl" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:layout_constraintGuide_percent="0.90" /> <TextView android:id="@ id/textView9" android:layout_width="wrap_content" android:layout_height="wrap_content" android:fontFamily="@font/segui_black" android:text="Are You Sure?" android:textColor="#484A67" android:textSize="@dimen/_24ssp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@ id/top_horizontal_gl" /> <TextView android:id="@ id/textView10" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/_2sdp" android:layout_marginBottom="12dp" android:fontFamily="@font/segoe" android:gravity="center" android:text="Are you sure you want to sign out?" android:textColor="#484A67" android:textSize="@dimen/_11ssp" app:layout_constraintEnd_toStartOf="@ id/right_vertical_gl" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@ id/textView9" /> <TextView android:id="@ id/yesTv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/_20sdp" android:fontFamily="@font/segui_semi_bold" android:padding="@dimen/_5sdp" android:text="Yes" android:textColor="#AD7BFF" app:layout_constraintEnd_toStartOf="@ id/right_vertical_gl" app:layout_constraintTop_toBottomOf="@ id/textView10" /> <TextView android:id="@ id/noTv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="@dimen/_30sdp" android:fontFamily="@font/segoe" android:padding="@dimen/_5sdp" android:text="No" android:textColor="#6D6E85" app:layout_constraintBottom_toBottomOf="@ id/yesTv" app:layout_constraintEnd_toStartOf="@ id/yesTv" app:layout_constraintTop_toTopOf="@ id/yesTv" tools:layout_editor_absoluteX="143dp" /> </androidx.constraintlayout.widget.ConstraintLayout>

Step 2:

Go to your dialog activity

Add the below line to your dialog code

popUpDialog.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))

Complete code of the dialog

private lateinit var popUpDialog: Dialog private fun buyLifeLineDialog() { popUpDialog.setContentView(R.layout.dialog_buy_lifelines) popUpDialog.window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT)) val yesTv = popUpDialog.findViewById<TextView>(R.id.yesTv); val noTv = popUpDialog.findViewById<TextView>(R.id.noTv); popUpDialog.show() yesTv.setOnClickListener { if (isCheatLl) { mViewModel.buyCheatLifeline(index,lifeLinesPackagesModel) } else{ mViewModel.buyRespawnLifeline(index,lifeLinesPackagesModel) } popUpDialog.dismiss() } noTv.setOnClickListener { popUpDialog.dismiss() } }