Как добавить градиент вверху, внизу и в прозрачном центре?

Question

Изображение как это

Я хочу придать этому виду градиент, например, около 10% изображения вверху, прозрачный центр с градиентом 70% и 30% внизу. Как я могу этого добиться

Answer 1

Вместо использования 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>

Затем просто примените это как background вашего ViewPager

Попробуйте это, надеюсь, это решит вашу проблему

Answer 2

верхний_градиент:

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

нижний_градиент:

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

Answer 3

Вы можете добиться этого следующим образом

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 4

градиент. 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>

макет. 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>

Вид будет прозрачным, но внизу градиент будет темным.