Как сделать прямоугольник с верхней и нижней тенью в Android, используя список слоев?

Это то, что я хочу

Мне нужен желтый прямоугольник с тенями сверху и снизу, как показано на изображении, как я могу нарисовать это, используя список слоев, я понятия не имею, как это сделать, особенно тени, как добиться такой формы?


person Siddarth G    schedule 22.08.2016    source источник
comment
использовать RotateDrawable в качестве нижнего слоя   -  person pskink    schedule 22.08.2016


Ответы (1)


Использование layer-list кажется лучшим вариантом. Вам понадобятся два прямоугольника, основной желтый и еще один для тени. Затем вы можете немного повернуть теневой прямоугольник, чтобы получить желаемый эффект.

Например:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="20dp" android:left="20dp" android:bottom="20dp" android:right="20dp">
        <rotate
            android:fromDegrees="-5"
            android:toDegrees="-5"
            android:pivotX="50%"
            android:pivotY="50%">
            <shape android:shape="rectangle">
                <size android:width="300dp"
                    android:height="150dp"/>
                <solid android:color="#999999"/>
            </shape>
        </rotate>
    </item>

    <item android:top="20dp" android:left="20dp" android:bottom="20dp" android:right="20dp">
        <shape android:shape="rectangle">
            <size android:width="300dp"
                android:height="150dp"/>
            <solid android:color="#FFDD66"/>
        </shape>
    </item>
</layer-list>

Если вам нужно уменьшить тень, как вы сказали в комментарии, вы можете уменьшить прямоугольник. Вы можете сделать это, уменьшив его для начала (ширину и высоту) или используя теги <scale> ... </scale>. Вот связанный вопрос SO.

person r3flss ExlUtr    schedule 22.08.2016
comment
вау, это круто, но серый прямоугольник виден даже слева и справа, как это убрать? - person Siddarth G; 22.08.2016
comment
Вы можете заключить вращение в теги ≤scale> ... </scale>, чтобы сделать его немного меньше. Обновление ответа - person r3flss ExlUtr; 22.08.2016