Android Studio Question posted in
The official documentation can be found here.

How to make a fade black background in Android Studio

I would like to put a fade black covering my image, just like this one, with a text, a fade background and then my image. I just want to know how to implement this fade. Thank you!

Example image

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Just create a drawable file, I'll name it gradient_background (you can set any name)

    <shape xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient 
       android:angle="90" 
       android:startColor="#000000"
       android:centerColor="#00000000" 
       android:endColor="#00000000"/>

</shape>

    then inside your target xml, create a View like this one, look that inside it, we're setting the background as your drawable file. In this case is gradient_background

    <View
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="@drawable/gradient_background"
    app:layout_constraintBottom_toBottomOf="post_image"
    app:layout_constraintEnd_toEndOf="@+id/post_image"
    app:layout_constraintStart_toStartOf="post_image"
    app:layout_constraintTop_toTopOf="@+id/post_image" />

    So it should look like this:

    final :)


  2. 0

    First, Make bottom_transparent_gradient.xml

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <shape>
        <gradient android:angle="270"
            android:endColor="#64000000"
            android:startColor="@android:color/transparent" />
    </shape>
  </item>
</selector>

    Then, add that drawable as your view background in which you want to show the fade background effect.

    <RelativeLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="@drawable/bottom_transparent_gradient"/>

    And that’s it! You can see the result you wanted. 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search