Как я могу установить тень представления только по сторонам для просмотра с высотой

У меня есть RecyclerView с различными типами просмотров. Каждый вид имеет собственный фон с верхними, нижними или без закругленных углов. Каждый из них использует одинаковое возвышение. Это один из фонов в XML

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/card_background_pressed"
    tools:targetApi="lollipop">
    <item>
        <shape>
            <size
                android:width="1dp"
                android:height="1dp" />
            <solid android:color="@color/card_background_normal" />
        </shape>
    </item>
</ripple>

Когда представления выкладываются рядом друг с другом без каких-либо ограничений, похоже, что они имеют одинаковый фон. Это мой способ создания динамического фона карты. Другими словами, я могу создать одноразовую карту из нескольких элементов в RecyclerView

Проблема

Как вы можете видеть ниже, когда два вида выложены рядом друг с другом, их тени перекрываются друг с другом в углах, даже когда радиус фонового угла равен 0.

Так кто-нибудь знает, как это исправить? Я забочусь только об API 21+, поэтому вам нужно беспокоиться о поддержке старых версий. Спасибо заранее!

введите описание изображения здесь

Ответ 1

Я не пробовал с RippleDrawable, но я думаю, что идея такая же. Итак, давайте начнем с простого случая:

Android предоставляет класс под названием ViewOutlineProvider. Вы можете использовать этот класс для создания собственной тени. Для вашей проблемы вы можете установить смещение для тени нижнего вида, чтобы область перекрытия была нарисована тенью верхнего вида.

Какой-то код:

Сначала я пытаюсь создать вашу проблему с этим макетом:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">


        <LinearLayout
            android:layout_width="300dp"
            android:layout_height="400dp"
            android:layout_centerInParent="true"
            android:orientation="vertical">

            <TextView
                android:id="@+id/top"
                android:layout_width="100dp"
                android:layout_height="50dp"
                android:layout_marginLeft="50dp"
                android:layout_marginTop="50dp"
                android:background="@android:color/holo_blue_dark"
                android:elevation="25dp"
                android:gravity="center"
                android:text="Top" />

            <TextView
                android:id="@+id/bottom"
                android:layout_width="100dp"
                android:layout_height="50dp"
                android:layout_below="@id/top"
                android:layout_marginLeft="50dp"
                android:layout_marginTop="2dp"
                android:background="@android:color/holo_orange_light"
                android:elevation="25dp"
                android:gravity="center"
                android:text="Bottom" />
        </LinearLayout>
    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

немного сложно распознать перекрывающиеся тени:

введите описание изображения здесь

Теперь я добавляю произвольное у смещение по этому коду:

public class MainActivity extends AppCompatActivity {

    TextView mTopTv,mBottomTv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        mTopTv = (TextView)findViewById(R.id.top);
        mBottomTv = (TextView)findViewById(R.id.bottom);
        mBottomTv.setOutlineProvider(new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                outline.setRect(0, 50, view.getWidth(), view.getHeight());
            }
        });
    }

}

и результат:

введите описание изображения здесь

По сравнению с двумя изображениями ясно, что перекрывающаяся область устранена.