Search code examples
javaandroidxmlandroid-linearlayoutalpha-transparency

In an Android app, how do I make a linear view with transparent text so that the parent view is visible?


Any ideas on how to make a view containing some text transparent so that it overlaps on top another view?

Here's an example image of what im referring to

I'm trying to create a feature to display the bio of a user in the chat page just like that of Whatsapp messenger.


Solution

  • Use next Code

      <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:textSize="16sp"
           android:textColor="#fff"
           android:text="Your text "
           android:paddingTop="8dp"
           android:paddingBottom="8dp"
           android:textAlignment="center"
           android:background="#60000000"
    />
    

    You can add the above XML in any view you are using for example next view

                    <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="100dp">
                    
                    <androidx.constraintlayout.widget.ConstraintLayout
                        android:layout_width="match_parent"
                        android:background="#343"
                        android:layout_height="match_parent">
                     <!--                        more views here -->
                    </androidx.constraintlayout.widget.ConstraintLayout>
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textSize="16sp"
                        android:textColor="#fff"
                        android:text="Your text "
                        android:paddingTop="8dp"
                        android:paddingBottom="8dp"
                        android:textAlignment="center"
                        android:background="#60000000"
                        />
                </FrameLayout>