как установить тень на вид в андроиде?

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

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout  
    android:layout_height="wrap_content"  
    android:layout_width="wrap_content"  
    <Button....  
    ...  
</LinearLayout>  

Теперь, когда он отображается, я хочу, чтобы вокруг него была тень.


person aqs    schedule 10.12.2010    source источник
comment
Аналогичный вопрос здесь stackoverflow.com/q/52954743/9640177 - как выделить векторный рисунок   -  person mayank1513    schedule 02.12.2018


Ответы (7)


Есть простой трюк, использующий два вида, формирующих тень.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:padding="10dp"
    android:background="#CC55CC">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TableLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:stretchColumns="0">
            <TableRow>
                <LinearLayout
                    android:id="@+id/content"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                    <TextView  
                        android:layout_width="fill_parent" 
                        android:layout_height="wrap_content"
                        android:background="#FFFFFF" 
                        android:text="@string/hello" />
                </LinearLayout>
                <View
                    android:layout_width="5dp"
                    android:layout_height="fill_parent"
                    android:layout_marginTop="5dp"
                    android:background="#55000000"/>
            </TableRow>
        </TableLayout>
        <View
            android:layout_width="fill_parent"
            android:layout_height="5dp"
            android:layout_marginLeft="5dp"
            android:background="#55000000"/>
    </LinearLayout>
</FrameLayout>

Надеюсь, это поможет.

person Fede    schedule 19.02.2011
comment
Для цвета лучше использовать градиент. - person Amokrane Chentir; 10.11.2011
comment
использование 9patch drawable backgroung намного проще, а макет намного чище, чем - person Lubos Horacek; 31.05.2013
comment
спасибо @praveenb, однако я думаю, что рисуемый фон 9patch - лучшее решение - person Fede; 07.06.2013
comment
Это неправильный способ сделать в XML. Это увеличивает глубину макета и может привести к замедлению рендеринга пользовательского интерфейса в телефонах низкого или даже высокого класса. Правильный способ всегда использовать образ 9patch. Рекомендуется сделать более чистый и ориентированный на производительность пользовательский интерфейс не только ради этого. - person sud007; 20.01.2015

Лучший способ создать тень — использовать изображение 9patch в качестве фона представления (или ViewGroup, которое оборачивает представление).

Первый шаг — создать изображение png с тенью вокруг него. Я использовал фотошоп для создания такого изображения. Это действительно просто.

  • Создайте новое изображение с помощью Photoshop.
  • Добавьте слой и создайте черный квадрат 4x4.
  • Создайте тень на слое, выбрав слой в проводнике слоев и нажав кнопку с названием fx и выбрав тень.
  • Экспортируйте изображение в формате png.

Следующим шагом будет создание 9-патч-рисунков из этого образа.

  • Открыть draw9patch с android-sdk/tools
  • Откройте изображение в draw9patch
  • Создайте 4 черные линии на четырех сторонах квадрата, как показано ниже, а затем сохраните изображение как shadow.9.png.

Теперь вы можете добавить эту тень в качестве фона видов, к которым вы хотите добавить тень. Добавьте shadow.9.png к res/drawables. Теперь добавьте его в качестве фона:

<LinearLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:background="@drawable/shadow"
  android:paddingBottom="5px"
  android:paddingLeft="6px"
  android:paddingRight="5px"
  android:paddingTop="5px"
>

Недавно я написал сообщение в блоге. это подробно объясняет это и включает изображение 9patch, которое я использую для создания тени.

person Sapan Diwakar    schedule 07.01.2013
comment
Это гораздо лучшее решение, чем принятый ответ. Кроме того, ссылка на блог мертва. - person Isaac Zais; 13.08.2014
comment
@ranjith В терминале запустите команду draw9patch из каталога SDK sdk/tools, чтобы запустить инструмент Draw 9-patch. - person Sapan Diwakar; 23.06.2015
comment
есть инструмент, с помощью которого мы можем создать 9 изображений патчей онлайн inloop.github.io/shadow4android - person Rukmal Dias; 01.11.2017

Предполагая, что вы будете использовать линейный макет (я рассматривал вертикальный линейный макет) .. и иметь представление чуть ниже вашего линейного макета. Теперь для этого представления укажите начальный цвет и конечный цвет. Я также хотел получить эту вещь, ее работает на меня.. Если вам нужен еще лучший эффект, просто поработайте с начальным и конечным цветом.

активность_основная

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/vertical"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="@drawable/layout_back_bgn"
        android:orientation="vertical" >
    </LinearLayout>

    <View
        android:layout_below="@+id/vertical"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="@drawable/shadow"
        >
    </View>


</LinearLayout>

layout_back_bgn.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >

<solid android:color="#FF4500" />

</shape>

shadow.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"  android:shape="rectangle">    
    <gradient
        android:startColor="#4D4D4D"
        android:endColor="#E6E6E6"
        android:angle="270"
        >
    </gradient>
</shape>

Я попытался опубликовать изображение, которое у меня есть после использования приведенного выше кода, но stackoverflow не позволяет мне, потому что у меня нет репутации. Извините за это.

person DJphy    schedule 17.12.2014
comment
fwiw я думаю, что ваша репутация очень хорошо. Спасибо за ответ. - person sudocoder; 08.11.2017

Вы можете использовать высоту, доступную с уровня API 21.

Высота вида, представленная свойством Z, определяет внешний вид его тени: виды с более высокими значениями Z отбрасывают более крупные и мягкие тени. Виды с более высокими значениями Z перекрывают виды с более низкими значениями Z; однако значение Z представления не влияет на размер представления. Чтобы установить высоту вида:

в определении макета используйте

android:elevation

атрибут. Чтобы установить высоту представления в коде активности, используйте

View.setElevation()

метод.

Источник

person Shlomi Fresko    schedule 23.03.2016
comment
Это решение работает, только если вы ориентируетесь на API 21 (Lollipop) и выше. - person Corentin Bruneau; 10.06.2016

Вот моя дрянная версия решения... Это модификация решения, найденного здесь

Мне не понравилось, как выглядят углы, поэтому я их все затушевал...

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--Layer 0-->
<!--Layer 1-->
<!--Layer 2-->
<!--Layer 3-->
<!--Layer 4 (content background)-->

<!-- dropshadow -->
<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#10CCCCCC"
            android:angle="180"/>
        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#20CCCCCC"
            android:angle="180"/>
        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#30CCCCCC"
            android:angle="180"/>

        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#40CCCCCC"
            android:angle="180"/>
        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#50CCCCCC"
            android:angle="180"/>
        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<!-- content background -->
<item>
    <shape>
        <solid android:color="@color/PostIt_yellow" />
    </shape>
</item>

person Johnny Wu    schedule 22.10.2013
comment
Безумно плохо смотрится на экране! И добавление такого количества слоев может вызвать проблемы с рендерингом. - person sud007; 20.01.2015

Создайте файл 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"/>
person Imran Vora    schedule 23.06.2021

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

</LinearLayout>
            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@color/dropShadow" />

Использовать чуть ниже LinearLayout

Другой метод

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

создайте «rounded_corner_bg.xml» в папке /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="@color/primaryColor" />

        <corners android:radius="4dp" />
    </shape>
</item>

<item
    android:bottom="2dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp">
    <shape android:shape="rectangle">
        <solid android:color="#F7F7F7" />

        <corners android:radius="4dp" />
    </shape>
</item>

</layer-list>

Чтобы использовать этот макет android:background="@drawable/rounded_corner_bg"

person katwal-Dipak    schedule 02.08.2015