How to add white overlay transparency in Android views?

Question

I have a layout with couple of views as shown below:

<?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"
style="@style/backgroundColor"
android:layout_width="match_parent"
android:id="@+id/root"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.terseel.partner.Views.signin.activity.ActivityLoginEmail">

  <LinearLayout
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintBottom_toTopOf="@+id/btn_delivered_ll"
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:orientation="vertical">
     <include
         android:id="@+id/toolbar"
         layout="@layout/login_top" />

      <TextView
          android:id="@+id/loginNow"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginStart="@dimen/m20"
          android:layout_marginTop="@dimen/m20"
          android:layout_marginBottom="@dimen/m5"
          android:fontFamily="@font/semibold"
          android:text="@string/phone_number_label"
          android:textColor="@color/hint_color"
          app:layout_constraintTop_toBottomOf="@+id/toolbar" />

      <com.google.android.material.textfield.TextInputLayout
          android:id="@+id/layoutTextInput"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          app:boxStrokeWidth="0dp"
          app:hintEnabled="false"
          style="@style/bg_DayNight_borders"
          android:background="@android:color/transparent"
          app:boxStrokeColor="@color/background_color"
          app:endIconMode="clear_text"
          app:boxBackgroundMode="none"
          app:passwordToggleTint="@color/colorPrimary" >

          <EditText
              android:id="@+id/edt_email"
              style="@style/bg_DayNight_borders"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:hint="@string/hint_phone"
              android:fontFamily="@font/regular"
              android:importantForAutofill="no"
              android:inputType="phone"
              android:layout_marginBottom="@dimen/m10"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintStart_toStartOf="parent"
              app:layout_constraintTop_toBottomOf="@id/loginNow"/>

      </com.google.android.material.textfield.TextInputLayout>

     <TextView
         android:id="@+id/email_phone"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:fontFamily="@font/regular"
         android:text="@string/use_email"
         android:gravity="center"
         android:layout_gravity="center"
         android:textColor="@color/theme_color" />

      <View
          android:layout_width="match_parent"
          android:layout_height="0dp"
          android:layout_weight="1"/>
     <TextView
         android:id="@+id/tv_not_partner"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:background="?attr/selectableItemBackground"
         android:fontFamily="@font/medium_italic"
         android:gravity="center"
         android:layout_margin="@dimen/_10sdp"
         android:layout_gravity="bottom"
         android:text="@string/signup"
         android:textColor="@color/theme_color"
         />


  </LinearLayout>


<LinearLayout
   android:id="@+id/btn_delivered_ll"
   style="@style/bg_DayNight_borders"
   android:layout_width="0dp"
   android:layout_height="@dimen/_60sdp"
   android:gravity="center_vertical"
   android:paddingStart="@dimen/_12sdp"
   android:paddingEnd="@dimen/_12sdp"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintStart_toStartOf="parent">
<include layout="@layout/layout_loading_button" />

</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

If you notice I have multiple views on this activity. For example, Toolbar view, edittext view, and a simple view at the bottom.

I was reading the material dark theme documentation and it says that you should add white overlay transparency to elevate your view. For reference, here: https://m2.material.io/design/color/dark-theme.html#properties.

Now I would like to know if my background color is #121212 and my view color is also #121212 how do I add white overlay transparency (of any %) to my view? What is the property in android java to add the white overlay transparency?

Please help

Answer 1

With hex colors you can specify the opacity of the color with the first two digits. E.g., to define a solid white color, you can use:

<color name="white">#FFFFFF</color>

And to define a white color with 50% opacity, you can use:

<!-- 80 is for alpha, the others pairs of F's are for R, G, B -->
<color name="white_fifty_percent">#80FFFFFF</color> 

So, instead of setting the background of your TextInputLayout to @android:color/transparent, set it to #XXFFFFFF, where XX is the transparency you want to set. For example, to set the background to be white at 15% opacity, you'd set it to #26FFFFFF.

<com.google.android.material.textfield.TextInputLayout
          android:id="@+id/layoutTextInput"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          app:boxStrokeWidth="0dp"
          app:hintEnabled="false"
          style="@style/bg_DayNight_borders"
          android:background="#26FFFFFF"
          app:boxStrokeColor="@color/background_color"
          app:endIconMode="clear_text"
          app:boxBackgroundMode="none"
          app:passwordToggleTint="@color/colorPrimary" >

Here's a table showing the hex values for opacity percentages.