如何在顶部、底部和透明中心对视图进行渐变？

Question

我想给这个视图提供渐变，比如顶部大约 10% 的图像视图，透明中心，底部有 70% 和 30% 的渐变。我怎样才能做到这一点

Answer 1

gradient.xml

    <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#00000000"
        android:centerColor="#00000000"
        android:endColor="@color/primaryTextColor"
        android:angle="270"
        android:centerY="0.7"
        android:dither="true"
        android:type="linear"
        />
</shape>

layout.xml:

    <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/bottomConstraint"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_gravity="bottom"
            android:background="@drawable/gradient">

            <androidx.appcompat.widget.AppCompatTextView
                android:id="@+id/tvTitle"
                style="@style/TextStyleNormal.Large.Bold.White"
                android:paddingHorizontal="@dimen/padding_large"
                android:paddingTop="@dimen/padding_medium"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintBottom_toBottomOf="@+id/bottomConstraint"
                app:layout_constraintTop_toTopOf="@+id/bottomConstraint"
                tools:text="System Solution to Online Education:
Look To Northeast communal." />
        </androidx.constraintlayout.widget.ConstraintLayout>

这将具有透明视图，但在底部渐变将是黑暗的。

Answer 2

你可以这样实现

gradient_top.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:startColor="#2B3135"
    android:centerColor="#2B3135"
    android:endColor="@android:color/transparent"
    android:angle="270"
    android:centerY="0.1"
    />
</shape>

gradient_bottom.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:startColor="#2B3135"
    android:centerColor="#2B3135"
    android:endColor="@android:color/transparent"
    android:angle="90"
    android:centerY="0.3"
    />
</shape>

layout.xml

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="200dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/ib"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_alignParentTop="true"
        android:background="@drawable/gradient_top"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:background="@drawable/gradient_bottom"/>

</RelativeLayout>

Answer 3

不要只使用 shape 和 gradient，而是使用 layer-list 和 2 gradients，每个

指定高度

API 21

android:bottom , android:top 属性表示层列表的填充，更改这些以更改要显示的渐变百分比

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item
    android:bottom="690dp"
    android:gravity="top">
    <shape android:shape="rectangle" >
        <gradient
            android:angle="270"
            android:type="linear"
            android:endColor="@android:color/transparent"
            android:startColor="#000000" />
    </shape>
</item>

<item
    android:top="610dp"
    android:gravity="bottom">
    <shape android:shape="rectangle" >
        <gradient
            android:angle="270"
            android:type="linear"
            android:endColor="#000000"
            android:startColor="@android:color/transparent" />
    </shape>
</item>

如果您的 minSDK 是 23+，那么为每个图层类型指定 height 会更容易

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item
    android:height="40dp"
    android:gravity="top">
    <shape android:shape="rectangle">
        <gradient
            android:angle="270"
            android:endColor="@android:color/transparent"
            android:startColor="#000000"
            android:type="linear" />
    </shape>
</item>

<item
    android:height="70dp"
    android:gravity="bottom">
    <shape android:shape="rectangle">
        <gradient
            android:angle="270"
            android:endColor="#000000"
            android:startColor="@android:color/transparent"
            android:type="linear" />
    </shape>
</item>

然后将其应用为 ViewPager

的 background

试试这个，希望这能解决您的问题

Answer 4

top_gradient:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="270"
        android:centerColor="@android:color/transparent"
        android:centerY="0.1"
        android:startColor="#000000" />
</shape>

bottom_gradient:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="90"
        android:centerColor="@android:color/transparent"
        android:centerY="0.3"
        android:startColor="#000000" />
</shape>

背景：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/bg" />
    <item android:drawable="@drawable/bg2" />
</layer-list>

如何在顶部、底部和透明中心对视图进行渐变？

How to give gradient on view in at top , bottom and transparent center?

java

xml

android

gradient