Arjun Hegde Arjun Hegde - 5 months ago 61
Android Question

Android gradient background

I need to implement something like this, with black gradient effect at the bottom
Image

I used the below code
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginBottom="5dp"
android:background="@drawable/my_custom_drawable"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/dead"
android:scaleType="fitXY"
android:id="@+id/place_image"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#AA000000">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Medeu"
android:id="@+id/place_id"
android:layout_marginLeft="20dp"
android:layout_marginTop="2dp"
android:textSize="18sp"
android:textColor="#ffffff"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Almaty region"
android:textColor="#ffffff"
android:layout_marginLeft="20dp"
android:layout_below="@+id/place_id"
android:textSize="12sp"
android:id="@+id/place_id_sub"

/>
</RelativeLayout>
</RelativeLayout>


and my_custom_drawable.xml



<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#00000000"
android:endColor="#80000000"
android:angle="270"
android:dither="true"
/>
</shape>


I end up getting like this

Image 2

Why am I not getting the effect as first image, I referred several top answers from other questions

Answer

The problem is your ImageView is covering your RelativeLayout, which you set the background of, so it is not visible.

Adding a View with the desired background above your ImageView instead of setting the background of the RelativeLayout should work:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_marginBottom="5dp">

    <ImageView
        android:id="@+id/place_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:src="@drawable/dead" />

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/my_custom_drawable" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true">

        <TextView
            android:id="@+id/place_id"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="2dp"
            android:text="Medeu"
            android:textColor="#ffffff"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/place_id_sub"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/place_id"
            android:layout_marginLeft="20dp"
            android:text="Almaty region"
            android:textColor="#ffffff"
            android:textSize="12sp" />
    </RelativeLayout>
</RelativeLayout>