Add gradient to imageview
Solution 1
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
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
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
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
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>
user1163234
Updated on July 09, 2022Comments
-
user1163234 almost 2 years
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>
-
nhaarman almost 10 yearsDon't forget to add an alpha value to your colors. Try starting with
android:endColor="#00000000" android:startColor="ff000000"
, and play around with it to suit your needs. -
sotrh about 7 yearsThis worked for my purposes, but if you only want the gradient to go up to a certain height having a view on top of the ImageView makes more sense.
-
Vadim Kotov over 5 yearsNote: Attribute
android:foreground
has no effect on API levels lower than 23 (current min is 16). This is what IDE shows me. -
Vadim Kotov over 5 yearsNote: Attribute android:foreground has no effect on API levels lower than 23 (current min is 16). This is what IDE shows me.
-
Slick Slime over 5 yearsAs you will see in my Answer I am using
android:background
notandroid:foreground
. For your question about API level warning please refer to another SO question. -
Vadim Kotov over 5 yearsBut you've written:
Use android:foreground="..." instead of android:background="..."
for some reason. -
Slick Slime over 5 yearsOops that's my bad. In that case you either change your
minSdkVersion
to above 22 or follow other questions that requiresFrameLayout
-
Vaios about 5 yearsToo much work to do for the UI. Personally, I prefer the solution with the single ImageView. I have not done the maths but seems more effective in performance