Android View Shadow

104

Я поискал, но не нашел подходящего способа сделать это. Я хочу, чтобы на моих представлениях были следующие эффекты тени: введите описание изображения здесь

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

Честно говоря, я не знаю, сделана ли эта вторая с применением эффекта тени. Любые идеи?

android shadow dropshadow долгожитель
источник
1
Вы имеете в виду это? stackoverflow.com/questions/4406524/… (проверьте ответ с наивысшим голосом, а не отмеченный ответ)
Люк Во,
1
@DatVM, спасибо, похоже, это поможет, но я подумал, может быть, в android sdk есть встроенные инструменты. Например, добавление падающих теней для линейных макетов путем добавления нескольких строк кода: P
longwalker
Аналогичный вопрос - stackoverflow.com/q/52954743/9640177 - добавление тени к векторному
рисованию

Ответы:

158

Я знаю , что этот вопрос уже был дан ответ , но я хочу , чтобы вы знали , что я нашел drawableна Android Studioтом , что очень похоже на фотографии у вас есть в этом вопросе: Посмотрите на это:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

Выглядит это так:

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

Надеюсь, это будет полезно

редактировать

Опция выше предназначена для более старых версий, Android Studioпоэтому вы можете ее не найти. Для более новых версий:

android:background="@android:drawable/dialog_holo_light_frame"

Более того, если вы хотите иметь свою собственную форму, я предлагаю использовать программу для рисования, например, Photoshopи нарисовать ее.

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

Не забудьте сохранить его в виде .9.pngфайла (например: my_background.9.png)

Прочтите документацию: Draw 9-patch

Редактировать 2

Еще лучшее и менее трудоемкое решение - использовать CardViewи установить, app:cardPreventCornerOverlap="false"чтобы представления не перекрывали границы:

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="2dp"
    app:cardElevation="2dp"
    app:cardPreventCornerOverlap="false"
    app:contentPadding="0dp">

    <!-- your layout stuff here -->

</android.support.v7.widget.CardView>

Также убедитесь, что вы включили последнюю версию в build.gradleтекущую версию.

compile 'com.android.support:cardview-v7:26.0.0'
Рик
источник
Спасибо, вообще-то очень похоже. Я также нашел "макет карты Google" для Android, и они довольно крутые!
longwalker
6
Потрясающие. Это просто к сведению будущим зрителям /<sdk-path>/extras/android/support.
theblang
2
А как насчет использованияcardView
Алекс Ченгалан
100

Я использую Android Studio 0.8.6 и не могу найти:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

поэтому я нашел это вместо этого:

android:background="@android:drawable/dialog_holo_light_frame"

и это выглядит так:

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

Репо
источник
1
но мы не можем добавить с ним радиус угла ?!
Fay007 01
40

установка фона @android:drawable/dialog_holo_light_frameдает тень, но вы не можете изменить цвет фона или стиль границы, поэтому лучше использовать тень от нее, но при этом иметь возможность поместить фон через список слоев

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--the shadow comes from here-->
    <item
        android:bottom="0dp"
        android:drawable="@android:drawable/dialog_holo_light_frame"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">

    </item>

    <item
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">
        <!--whatever you want in the background, here i preferred solid white -->
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />

        </shape>
    </item>
</layer-list>

сохраните его в папке с возможностью переноса, скажем, shadow.xml

чтобы назначить его представлению, в файле макета xml установите его фон 

android:background="@drawable/shadow"
Мохамед Селим
источник
Вы проверяли, работает ли? Второй <item> ничего не делает. Я не могу изменить его на прозрачные или закругленные углы.
zeeshan
2
Среди всего, что я пробовал, это единственное, что работает, спасибо.
Шьям Сандер
1
фантастическое решение
user1974368
35

Создайте card_background.xml в папке res / drawable со следующим кодом:

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

<item>
    <shape android:shape="rectangle">
        <solid android:color="#BDBDBD"/>
        <corners android:radius="5dp"/>
    </shape>
</item>

<item
    android:left="0dp"
    android:right="0dp"
    android:top="0dp"
    android:bottom="2dp">
    <shape android:shape="rectangle">
        <solid android:color="#ffffff"/>
        <corners android:radius="5dp"/>
    </shape>
</item>
</layer-list>

Затем добавьте следующий код к элементу, для которого требуется макет карточки.

android:background="@drawable/card_background"

следующая строка определяет цвет тени для карты 

<solid android:color="#BDBDBD"/>
Вивек Варма
источник
10
На самом деле это не тень - потому что она не исчезает. Это больше похоже на границу с двух сторон.
ban-
это не тень
ShadeToD
24

CardView дает вам настоящую тень в Android 5+ и имеет библиотеку поддержки. Просто оберните им свой вид, и все готово.

<android.support.v7.widget.CardView>
     <MyLayout>
</android.support.v7.widget.CardView>

Требуется следующая зависимость.

dependencies {
    ...
    compile 'com.android.support:cardview-v7:21.0.+'
}
Илья Газман
источник
1
Это единственно правильный ответ, поскольку только CardViewв режиме совместимости есть разные уровни тени для разных высот.
Джаретт Миллард,
Я рекомендую MaterialCardView, поскольку он более понятен и имеет больше возможностей.
Х. Фарид
12

Это может быть поздно, но для тех, кто все еще ищет ответ на этот вопрос, я нашел проект на git hub, и это единственный, который действительно соответствует моим потребностям. Android-материалы

Просто добавьте эту строку в свою зависимость build.gradle

compile 'com.h6ah4i.android.materialshadowninepatch:materialshadowninepatch:0.6.3'

ура. большой палец вверх для создателя! счастливые коды

ralphgabb
источник
Привет, @ralphgabb, это все еще работает для вас, или у вас есть лучшее решение для устройств до леденцов?
Swapnil
@Swapnil не уверен, поддерживает ли это AndroidX, но я больше не поддерживаю устройства до Marshmallow.
ralphgabb
5

Я знаю, что это тупо взломано,
но если вы хотите поддерживать под v21, вот мои достижения.

rectangle_with_10dp_radius_white_bg_and_shadow.xml

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

    <!-- Shadow layers -->
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_1" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_2" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_3" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_4" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_5" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_6" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_7" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_8" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_9" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_10" />
        </shape>
    </item>

    <!-- Background layer -->
    <item>
        <shape>
            <solid android:color="@android:color/white" />
            <corners android:radius="10dp" />
        </shape>
    </item>

</layer-list>

rectangle_with_10dp_radius_white_bg_and_shadow.xml (версия 21)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/white" />
    <corners android:radius="10dp" />
</shape>

view_incoming.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/rectangle_with_10dp_radius_white_bg_and_shadow"
    android:elevation="7dp"
    android:gravity="center"
    android:minWidth="240dp"
    android:minHeight="240dp"
    android:orientation="horizontal"
    android:padding="16dp"
    tools:targetApi="lollipop">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="Hello World !" />

</LinearLayout>

Вот результат:

Под v21 (это то, что вы сделали с xml) введите описание изображения здесь

Выше v21 (рендеринг реальной высоты) введите описание изображения здесь

  • Единственное существенное отличие состоит в том, что он будет занимать внутреннее пространство из представления, поэтому фактическая область содержимого может быть меньше, чем > = устройства с леденцами .
Wonsuc
источник
4

Если вам нужно правильно нанести тени, вам нужно сделать следующее.

Рассмотрим это представление, определенное с возможностью рисования фона:

<TextView
    android:id="@+id/myview"
    ...
    android:elevation="2dp"
    android:background="@drawable/myrect" />

Фон для рисования определяется как прямоугольник с закругленными углами:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

Это рекомендуемый способ применения теней. Проверьте это https://developer.android.com/training/material/shadows-clipping.html#Shadows.

Шангит Сиван
источник
2

Используйте свойство высоты для эффекта тени:

<YourView
    ...
    android:elevation="3dp"/>
Офек Ашери
источник
Для использования Elevation на устройстве должен быть запущен Lollipop.
Шейн Роватт
2

Создайте фон, который можно рисовать, как это, чтобы показать закругленную тень.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#00CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#10CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#20d5d5d5" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="6dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#30cbcbcb" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#50bababa" />
        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <solid android:color="@color/gray_100" />
            <corners android:radius="4dp" />
        </shape>
    </item>
</layer-list>
gaurav iqlance
источник
Пожалуйста, добавьте описание также для предоставленного вами кода.
Mangaldeep Pannu
Очень красивое решение только для xml
Бруно Бьери
2

Этот вопрос может быть старым, но для тех, кто в будущем хочет получить простой способ достижения сложных теневых эффектов, ознакомьтесь с моей библиотекой здесь https://github.com/BluRe-CN/ComplexView

Используя библиотеку, вы можете изменять цвета теней, настраивать края и многое другое. Вот пример того, что вы ищете.

<com.blure.complexview.ComplexView
        android:layout_width="400dp"
        android:layout_height="600dp"
        app:radius="10dp"
        app:shadow="true"
        app:shadowSpread="2">

        <com.blure.complexview.ComplexView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:color="#fdfcfc"
            app:radius="10dp" />
    </com.blure.complexview.ComplexView>

Чтобы изменить цвет тени, используйте app: shadowColor = "ваш цветовой код".

BluRe.CN
источник
1

используйте эту форму в качестве фона: 

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

    <item android:drawable="@android:drawable/dialog_holo_light_frame"/>

    <item>
        <shape android:shape="rectangle">
            <corners android:radius="1dp" />
            <solid android:color="@color/gray_200" />
        </shape>
    </item>

</layer-list>
Г-н Хоссейни
источник