为ImageView添加渐变效果

Question

我想在图片底部添加一个渐变。就像这样:

我尝试了类似下面的方法，但只有渐变效果没有图片。

    <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>

- user1163234

Answer 1

你需要两个图层：一个 ImageView 和一个放置渐变的 View。将这两个 View 放在一个 FrameLayout 中：

<FrameLayout
    ... >

    <ImageView
        ...
        android:src="@drawable/trend_donald_sterling" />

    <View
        ...
        android:background="@drawable/trending_gradient_shape"/>


</FrameLayout>

- nhaarman

---

不要忘记为您的颜色添加 alpha 值。尝试使用 android:endColor="#00000000" android:startColor="ff000000" 开始，并根据需要进行调整。 - nhaarman

UI的工作量太大了。个人而言，我更喜欢使用单个ImageView的解决方案。虽然我没有做过计算，但似乎在性能方面更有效。 - Vaios

Answer 2

只需在您的gradient.xml中设置alpha值：

您的imageView：

android:background="@drawable/trend_donald_sterling"
android:src="@drawable/trending_gradient_shape"

你的渐变 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" />

<corners android:radius="0dp" />
</shape>

在颜色值中，#符号之后的前两个位置对应于alpha值，而剩下的则是实际的RGB格式的颜色值，每个颜色占两个位置。

- Kaustuv

Answer 3

尝试在您的ImageView中使用“foreground”属性

<ImageView
        ...
        android:src="@drawable/trend_donald_sterling"
        android:foreground="@drawable/trending_gradient_shape" />

它对我起作用了。

- swetabh suman

---

这对我的目的很有效，但是如果你只想让渐变到达一定高度，那么在ImageView上方放置一个视图更合理。 - sotrh

жіЁж„ҸпјҡеұһжҖ§android:foregroundеҜ№APIзә§еҲ«дҪҺдәҺ23пјҲеҪ“еүҚжңҖдҪҺдёә16пјүзҡ„еҪұе“Қж— ж•ҲгҖӮиҝҷжҳҜжҲ‘зҡ„IDEжҳҫзӨәзҡ„еҶ…е®№гҖӮ - Vadim Kotov

Answer 4

使用 android:foreground="..." 替代 android:background="..."

现在你不需要再将 ImageView 和 View 放进 FrameLayout 中了！

因此，您的最终代码将是：

ImageView

<ImageView
    ...
    android:foreground="@drawable/trend_donald_sterling"/>

可绘制对象

<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>

- Slick Slime

---

注意：属性android:foreground在低于23的API级别上没有效果（当前最小值为16）。这是IDE向我展示的。 - Vadim Kotov

正如您在我的答案中所看到的，我正在使用 android:background 而不是 android:foreground。关于API级别警告的问题，请参考另一个SO问题。 - Slick Slime

但是你已经写了：使用android:foreground="..."而不是android:background="..."，出于某种原因。 - Vadim Kotov

抱歉，那是我的错。在这种情况下，您可以将minSdkVersion更改为22或更高版本，或者遵循其他需要FrameLayout的问题。 - Slick Slime

Answer 5

这是我的做法，我使用相对布局作为父布局，使用以下代码：

这是我的做法，我使用相对布局作为父布局，使用以下代码

 <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>

希望你能理解，这里我附上我的渐变代码。将其放在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>

- Ashana.Jackol

Answer 6

这是一种简单的方法，可以创建类似的效果，但实际上并不会使图像消失。有时使用前景属性并不适合渐变效果，尤其是在使用motionlayout或者有嵌套的scrollview的情况下。创建一个全新的imageview，并将背景设置为渐变。

带有两个imageview的XML

<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" />

对于渐变效果，我使用黑色#000000来制作深色主题，使用白色#ffffff来制作浅色主题。很多答案中都没有添加中心颜色，但是如果您希望渐变效果从图像边缘开始，则这一点非常重要。

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>

- WolfpackJac3

Answer 7

**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>
</selector>
    
**2> Just add below line in Imageview.**

  android:foreground="@drawable/black_shadow"

对于低于API 23的Android版本，前台不可用，您可以使用一个被限制在ImageView上方的View，并将背景的View设置为此drawable。

- MEGHA DOBARIYA