Как добавить Faded Border в ImageView, который находится внутри CollapsingToolbar?

Question

Я пытался добавить блеклую рамку в свой ImageView, которая присутствует в CollapsingToolbarLayout, но мне не удалось.

То, чего я достиг, представлено на изображении нижеТо, чего я хочу достичь, это

Код, который я пробовал, представляет собой простую сворачивающуюся панель инструментов

           <android.support.design.widget.CollapsingToolbarLayout
               android:id="@+id/collapsing_detail_buddhism"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
               app:title=""
               app:expandedTitleMarginStart="10dp"
               app:expandedTitleMarginBottom="20dp"
               app:expandedTitleMarginTop="20dp"
               app:expandedTitleTextAppearance="@style/Base.TextAppearance.AppCompat.Display1">

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

                   <ImageView
                       android:id="@+id/main_image"
                       android:layout_width="match_parent"
                       android:layout_height="220dp"
                       android:src="@drawable/buddha"
                       android:scaleType="centerCrop"
                       android:foreground="@drawable/drawable_bottom_effect"
                       />

               </RelativeLayout>

               <android.support.v7.widget.Toolbar
                   android:id="@+id/toolbar_detail_buddhism"
                   android:layout_width="match_parent"
                   android:layout_height="?android:attr/actionBarSize"
                   app:layout_collapseMode="pin"/>


           </android.support.design.widget.CollapsingToolbarLayout>

Код для рисования

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:angle="270"
                android:endColor="#000000"
                android:startColor="#00000000"
                android:type="linear" />
        </shape>
    </item>
</layer-list>

Answer 1

Чтобы добиться затухания ImageView, вы можете добавить библиотеку с именем FadingEdgeLayout в свой макет.

1. Добавьте FadingEdgeLayout к вашему проекту в build.gradle

implementation
'com.github.bosphere.android-fadingedgelayout:fadingedgelayout:1.0.0'

2. После этого добавьте FadingEdgeLayout в макет следующим образом:

<com.google.android.material.appbar.CollapsingToolbarLayout 
    android:id="@+id/collapsing_detail_buddhism"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
    app:title=""
    app:expandedTitleMarginStart="10dp"
    app:expandedTitleMarginBottom="20dp"
    app:expandedTitleMarginTop="20dp"
    app:expandedTitleTextAppearance="@style/Base.TextAppearance.AppCompat.Display1"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/colorPrimaryDark"
    >

    <com.bosphere.fadingedgelayout.FadingEdgeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:fel_edge="bottom"
        >

        <ImageView
            android:id="@+id/main_image"
            android:layout_width="match_parent"
            android:layout_height="220dp"
            android:src="@drawable/stories_background"
            android:scaleType="centerCrop"
            />

    </com.bosphere.fadingedgelayout.FadingEdgeLayout>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_detail_buddhism"
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        app:layout_collapseMode="pin"/>


</com.google.android.material.appbar.CollapsingToolbarLayout>

3. Если вы измените макет выше, к вашему ImageView.

4. Но имейте в виду, FadingEdgeLayout воспринимает цвет фона как цвет блеклого края, поэтому я добавил android:background="@color/colorPrimaryDark", чтобы вы заметили, какой цвет для его краев.

5. Вы также можете добавить больше ребер (снизу, слева, сверху, справа), контролировать размер замирания и т. Д. Перейдите по ссылке, указанной в верхней части ответа.