Add gradient to imageview
AndroidAndroid ImageviewAndroid DrawableAndroid Problem Overview
I want to add a gradient on the bottom of my image . Something like this :
I tried something like this but I only get the gradient no image..
<ImageView
android:id="@+id/trendingImageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/trend_donald_sterling"
android:src="@drawable/trending_gradient_shape"
/>
trending_gradient_shape:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="90"
android:endColor="@android:color/darker_gray"
android:startColor="@android:color/darker_gray" />
<corners android:radius="0dp" />
</shape>
Android Solutions
Solution 1 - Android
You need two layers: An ImageView
, and a View
on top of that with your gradient as android:background
. Put these two View
s in a FrameLayout
:
<FrameLayout
... >
<ImageView
...
android:src="@drawable/trend_donald_sterling" />
<View
...
android:background="@drawable/trending_gradient_shape"/>
</FrameLayout>
Solution 2 - Android
Simply set the alpha value in your gardient.xml:
Your imageView:
android:background="@drawable/trend_donald_sterling"
android:src="@drawable/trending_gradient_shape"
Your gradient xml file:
<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" />
<corners android:radius="0dp" />
</shape>
In the color value, the first two places after # correspond to the alpha value, while the rest are the actual color value in R G B format, two for each.
Solution 3 - Android
try using the "foreground" attribute in your imageview
<ImageView
...
android:src="@drawable/trend_donald_sterling"
android:foreground="@drawable/trending_gradient_shape" />
it worked for me.
Solution 4 - Android
Use android:foreground="..."
instead of android:background="..."
Now you won't need to put ImageView and View inside a FrameLayout!
So your final code will be:
ImageView
<ImageView
...
android:foreground="@drawable/trend_donald_sterling"/>
Drawable
<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" />
<corners android:radius="0dp" />
</shape>
Solution 5 - Android
this is how im gonna do, i used relative layout as my parent layout, use the following code
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/img_sample"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/gradiant"/>
<LinearLayout
android:layout_marginLeft="10dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.55"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.25"
android:text="Events"
android:gravity="bottom"
android:textStyle="bold"
android:textSize="18sp"
android:textColor="#ffffff"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.25"
android:text="Some description about the events goes here"
android:textSize="14sp"
android:textColor="#ffffff"/>
</LinearLayout>
</RelativeLayout>
hope you can figure out, here i attach my gradiant code below.use it inside the drawable folder....
<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" />
<corners android:radius="0dp" />
</shape>
Solution 6 - Android
This is an easy way that creates a similar effect yet doesn't actually have the image disappear. Sometimes using the foreground attribute is not the best for the gradient, especially if using a motionlayout or you have nested scrollviews. Create an entirely new imageview and set the background to the gradient.
XML With Both Imageviews
<ImageView
android:id="@+id/main_imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
android:src="@drawable/peakpx__1_"
ads:layout_constraintHeight_percent=".55"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/main_imageView_gradient"
android:layout_width="0dp"
android:layout_height="0dp"
ads:layout_constraintHeight_percent=".55"
android:background="@drawable/gradient_theme_background"
app:layout_constraintEnd_toEndOf="@id/main_imageView"
app:layout_constraintBottom_toBottomOf="@id/main_imageView"
app:layout_constraintStart_toStartOf="@id/main_imageView" />
Then for the gradient, I use black #000000 for darker themes, and white #ffffff for lighter ones. A lot of answers I see on this are not adding the center color. This is important if you want to have the gradient start closer to the edge of the image.
gradient_background
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="270"
android:type="linear"
android:endColor="#ff000000"
android:centerColor="#00000000"
android:startColor="#00000000"/>
</shape>
Solution 7 - Android
**1> Create file black_shadow.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:startColor="#00000000"
android:centerColor="#9c000000"
android:endColor="#000000"
android:type="linear" />
</shape>
</item>bla
</selector>
**2> Just add below line in Imageview.**
android:foreground="@drawable/black_shadow"