Как добавить тень к кнопке

86

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

Как вы можете видеть на изображении, мне нужна тень за Button. Я создал Buttonс закругленными углами. Но проблема в том, что я не могу создать за этим тень Button. Как я могу этого добиться?

android  material-design  shadow 
— Чинтан Ратод
источник
1
— Ясита Вадуге

Ответы:

132

Используйте этот подход, чтобы получить желаемый вид.
button_selector.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <layer-list>
        <item android:right="5dp" android:top="5dp">
            <shape>
                <corners android:radius="3dp" />
                <solid android:color="#D6D6D6" />
            </shape>
        </item>
        <item android:bottom="2dp" android:left="2dp">
            <shape>
                <gradient android:angle="270" 
                    android:endColor="#E2E2E2" android:startColor="#BABABA" />
                <stroke android:width="1dp" android:color="#BABABA" />
                <corners android:radius="4dp" />
                <padding android:bottom="10dp" android:left="10dp" 
                    android:right="10dp" android:top="10dp" />
            </shape>
        </item>
    </layer-list>
</item>

</selector>

И в вашем макете xml:

<Button
   android:background="@drawable/button_selector"
   ...
   ..
/>
— Фестус Тамаклоэ
источник
Выглядит круто, но когда я попробовал, этот intellij мне не понравился. Когда я смотрел на документ для itemон говорит android:drawableэто требуется .
— JohnnyLambada
1
закрывающий тег </selector> отсутствует
— myforums
5
Это не совсем то, чего хотел спрашивающий, поскольку это решение дает обратное: фон кнопки градиента и сплошной цвет тени. И это кажется очень отличным от внешней тени
1
Могу ли я сделать так, чтобы селектор textColor запекался в указанном выше селекторе - поэтому мне не нужно устанавливать оба фона textColor каждый раз, когда я определяю кнопку, а нужно только установить фон ...?
— JohnyTex
<selector>и <item>не нужны. Изображение возвращено, как сказал @ user4702646.
— CoolMind
54

Для Android версии 5.0 и выше

попробуйте Elevation для других видов ..

android:elevation="10dp"

Для кнопок,

android:stateListAnimator="@anim/button_state_list_animator"

button_state_list_animator.xml - https://android.googlesource.com/platform/frameworks/base/+/master/core/res/res/anim/button_state_list_anim_material.xml

версия ниже 5.0,

Для всех просмотров,

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

Мой вывод:

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

— Ранджит Кумар
источник
Я хотел бы использовать этот подход, но мои кнопки создаются динамически (то есть в коде) в элементе управления сеткой, а не декларативно (на самом деле я использую бесплатную версию Xamarin, поэтому Mono lib). Кажется, что это не простой метод установки любого атрибута.
— jrichview
@jrichview см. этот ответ, а также комментарии stackoverflow.com/a/24459128/3879847
— Ранджит Кумар
Эй, как я могу использовать это как рисование, если я установил форму моей кнопки с возможностью рисования?
— Егор Рандомизирует
19

Вот моя кнопка с тенью cw_button_shadow.xml внутри drawable папки

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <layer-list>
            <!-- SHADOW -->
            <item>
                <shape>
                    <solid android:color="@color/red_400"/>
                    <!-- alttan gölge -->
                    <corners android:radius="19dp"/>
                </shape>
            </item>
            <!-- BUTTON alttan gölge
              android:right="5px" to make it round-->
            <item
                android:bottom="5px"
                >
                <shape>
                    <padding android:bottom="5dp"/>
                    <gradient
                        android:startColor="#1c4985"
                        android:endColor="#163969"
                        android:angle="270" />
                    <corners
                        android:radius="19dp"/>
                    <padding
                        android:left="10dp"
                        android:top="10dp"
                        android:right="5dp"
                        android:bottom="10dp"/>
                </shape>
            </item>
        </layer-list>
    </item>

    <item android:state_pressed="true">
        <layer-list>
            <!-- SHADOW -->
            <item>
                <shape>
                    <solid android:color="#102746"/>
                    <corners android:radius="19dp"/>

                </shape>
            </item>
            <!-- BUTTON -->
            <item android:bottom="5px">
                <shape>
                    <padding android:bottom="5dp"/>
                    <gradient
                        android:startColor="#1c4985"
                        android:endColor="#163969"
                        android:angle="270" />
                    <corners
                        android:radius="19dp"/>
                    <padding
                        android:left="10dp"
                        android:top="10dp"
                        android:right="5dp"
                        android:bottom="10dp"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

Как использовать. в Button xml вы можете изменить свой рост и вес

<Button
                android:text="+ add friends"
                android:layout_width="120dp"
                android:layout_height="40dp"
               android:background="@drawable/cw_button_shadow" />

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

— Сэм
источник
13

Если вы ориентируетесь на устройства, предшествующие Lollipop, вы можете использовать Shadow-Layout , поскольку это легко и вы можете использовать его в различных макетах.


Добавьте теневой макет в свой файл Gradle :

dependencies {
    compile 'com.github.dmytrodanylyk.shadow-layout:library:1.0.1'
}


Вверху макета xml, где у вас есть кнопка, добавьте вверху :

xmlns:app="http://schemas.android.com/apk/res-auto"

он сделает доступными настраиваемые атрибуты.


Затем вы помещаете теневой макет вокруг кнопки :

<com.dd.ShadowLayout
        android:layout_marginTop="16dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:sl_shadowRadius="4dp"
        app:sl_shadowColor="#AA000000"
        app:sl_dx="0dp"
        app:sl_dy="0dp"
        app:sl_cornerRadius="56dp"> 

       <YourButton
          .... />

</com.dd.ShadowLayout>

Затем вы можете настроить app:параметры, чтобы они соответствовали вашей тени.

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

— Торрао
источник
Плохая библиотека, устарела и больше не поддерживается. Кроме того, похоже, что он допускает только темные / черные тени, а не светлые.
— Forsberg
10

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list>
            <item android:left="5dp" android:top="5dp">
                <shape>
                    <corners android:radius="3dp" />
                    <gradient
                        android:angle="315"
                        android:endColor="@android:color/transparent"
                        android:startColor="@android:color/black"
                        android:type="radial"
                        android:centerX="0.55"
                        android:centerY="0"
                        android:gradientRadius="300"/>
                    <padding android:bottom="1dp" android:left="0dp" android:right="3dp" android:top="0dp" />
                </shape>
            </item>
            <item android:bottom="2dp" android:left="3dp">
                <shape>
                    <corners android:radius="1dp" />
                    <solid android:color="@color/colorPrimary" />


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

</selector>
— RexSplode
источник
1
Приложите, пожалуйста, скриншот.
— CoolMind
3

Попробуйте, если это работает для вас

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

android:background="@drawable/drop_shadow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="3dp"
        android:paddingTop="3dp"
        android:paddingRight="4dp"
        android:paddingBottom="5dp"
— DjHacktorReborn
источник
1

Образец 9 патч-изображения с тенью

После долгих исследований я нашел простой метод.

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

Вы можете создать изображение из 9 патчей с тенью, используя этот сайт .

Поместите изображение с 9 патчем в свой каталог с возможностью рисования и примените его в качестве фона для кнопки.

mButton.setBackground(ContextCompat.getDrawable(mContext, R.drawable.your_9_patch_image);
— Shijo
источник
0

Вы можете попробовать это:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
        <item android:left="1dp" android:top="3dp">
            <shape>
                <solid android:color="#a5040d" />
                <corners android:radius="3dip"/>
            </shape>
        </item>
    </layer-list>
  </item>
<item>
    <layer-list>
        <item android:left="0dp" android:top="0dp">
            <shape>
                    <solid android:color="#99080d" />
                <corners android:radius="3dip"/>
            </shape>
        </item>
        <item android:bottom="3dp" android:right="2dp">
            <shape>
                <solid android:color="#a5040d" />
                <corners android:radius="3dip"/>
            </shape>
        </item>
    </layer-list>
</item>

— Джульфикар
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.