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.

I think what you are looking for is a gradient mask at the bottom — capt.swag, Aug 12 '15 at 08:30
http://stackoverflow.com/questions/3693234/custom-imageview-with-drop-shadow — IntelliJ Amiya, Aug 12 '15 at 08:34

capt.swag · Accepted Answer · 2015-08-12T10:12:32.347

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>

score 1 · Answer 2 · answered Aug 12 '15 at 08:36

1

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.

answered Aug 12 '15 at 08:36

summer1991

387
2
6

The gradient effects on each banner is familiar. – summer1991 Aug 12 '15 at 08:37

score 0 · Answer 3 · answered Feb 16 '21 at 15:10

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>

Add shadows at the bottom of image

3 Answers3

Linked