Loading Dialog will not go transparent

Question

I have surprisingly been stuck on this one for a little while.

User Story: The user should see a Loading Dialog that can be reused through the application with a transparent background so you only see the progress spinner and the text under the progress spinner.

Currently, I have a DialogFragment that inflates this XML to present itself:

<?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:background="@android:color/transparent">

<ProgressBar
    android:id="@+id/progressBar"
    style="?android:attr/progressBarStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:alpha="1"
    android:background="@android:color/transparent"
    android:indeterminateDrawable="@drawable/loading_spinner"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.498"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.499" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:alpha="1"
    android:background="@android:color/transparent"
    android:text="Loading..."
    android:textColor="#FFFFFF"
    android:textSize="16sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/progressBar" />
</androidx.constraintlayout.widget.ConstraintLayout>

I am trying to set the transparency in the background and have had these results:

• alpha set changes children elements to transparent as well
• above XML setting does nothing and shows a white background
• Setting it programmatically(See below) also does nothing and displays it white.

LoadingDialog():

   class LoadingDialog(): DialogFragment() {
   private var _binding: FragmentLoadingDialogBinding? = null
   private val binding get() = _binding!!

   override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    this.dialog?.window?.setBackgroundDrawableResource(android.R.color.transparent)
   }

   override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState:Bundle?
   ): View? {
      _binding = FragmentLoadingDialogBinding.inflate(inflater, container, false)
      return binding.root
   }

   //Always do this in Dialog to maintain memory management
   override fun onDestroy() {
       super.onDestroy()
       _binding = null
     }
   }

How can I get the above LoadingDialog to present the Loading Progress Spinner and the Text without the white background?

Answer 1

I think you should call onCreate() method before setting the background to transparent after which you should set the view for your dialog. Try this

val dialogBinding = // inflate dialog here using dataBinding for example
val customDialog = AlertDialog.Builder(this, 0).create() // works with other dialogs as well

   customDialog.apply {
      window?.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
      setView(dialogBinding?.root)
    }.show()

I hope this helps you solve your problem. For more information about Dialogs in Android, please refer to my article on section.io

Answer 2

something else, consider removing the transparent background on your root viewGroup as shown below

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
 ...
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:background="@android:color/transparent">

edit to

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
 ...
 android:layout_width="match_parent"
 android:layout_height="wrap_content">