Add shadows at the bottom of image

Question

How can I add a shadow over the image (right at the bottom) in order to have the title to be clearly visible. See the image below.

Answer 1

I wrote an application, which has the same effect. What I did is, I created a FrameLayout which has the ImageView and another View which has the same height of the ImageView. Then I add a transparent gradient background to the View .

Example:

Layout file:

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:src="@drawable/image"
        android:adjustViewBounds="true" />

    <View
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:background="@drawable/gradient" />

</FrameLayout>

drawable/gradient.xml

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

    <gradient
        android:angle="90"
        android:endColor="#00ffffff"
        android:startColor="#aa000000"
        android:centerColor="#00ffffff" />
</shape>

Answer 2

You can use a png image with the gradient color and alpha, put it just at the bottom of the banner image. And your name text is upon the image.

Answer 3

Create a Drawable file gradient.xml

<gradient
    android:angle="90"
    android:endColor="#00ffffff"
    android:startColor="#aa000000"
    android:centerColor="#00ffffff" />

Use ImageView as shown below

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:foreground="@drawable/gradient">

        <androidx.appcompat.widget.AppCompatImageView
            android:layout_width="match_parent"
            android:layout_height="240dp"
            android:src="@drawable/ic_launcher_foreground"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            android:id="@+id/imageView"/>
        </FrameLayout>