Jak zapewnić cień Button

Odpowiedzi:

132

Użyj tego podejścia, aby uzyskać pożądany wygląd.
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>

A w twoim układzie XML:

<Button
   android:background="@drawable/button_selector"
   ...
   ..
/>
Festus Tamakloe
źródło
Wygląda fajnie, ale kiedy wypróbowałem ten intellij, nie podobało się. Kiedy spojrzałem na doktora, bo itemto mówi, że android:drawablejest wymagane .
JohnnyLambada
1
brakuje tagu zamykającego </selector>
myforums
5
Nie jest to dokładnie to, czego chciał pytający, ponieważ to rozwiązanie jest odwrotne: gradientowe tło przycisku i jednolity kolor cienia. I wydaje się, że bardzo różni się to od zewnętrznego cienia
1
Czy mogę to zrobić tak, aby selektor textColor był wstawiony do powyższego selektora - więc nie muszę ustawiać obu textColor tła za każdym razem, gdy definiuję przycisk, ale wystarczy ustawić tło ...?
JohnyTex,
<selector>i <item>nie są potrzebne. Obraz jest przywrócony, jak powiedział @ user4702646.
CoolMind
54

Dla Androida w wersji 5.0 i nowszych

wypróbuj Elevation, aby uzyskać inne widoki.

android:elevation="10dp"

Przyciski,

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

poniżej wersji 5.0,

Dla wszystkich widoków

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

Mój wynik:

wprowadź opis obrazu tutaj

Ranjith Kumar
źródło
Chciałbym użyć tego podejścia, ale moje przyciski są tworzone dynamicznie (tj. W kodzie) w kontrolce siatki, a nie deklaratywnie (w rzeczywistości używam bezpłatnej wersji Xamarin, więc Mono lib). Nie wydaje się być prostą metodą ustawiania dowolnego atrybutu.
jrichview
@jrichview zobacz tę odpowiedź, a także skomentuj stackoverflow.com/a/24459128/3879847
Ranjith Kumar
Hej, jak mogę użyć tego jako do rysowania, jeśli ustawię kształt mojego przycisku z rysowaniem?
Egor Randomize
19

Oto mój przycisk z cieniem cw_button_shadow.xml w drawable folderze

<?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>

Jak używać. w Button xml możesz zmienić rozmiar swojego wzrostu i wagi

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

wprowadź opis obrazu tutaj

Sam
źródło
13

Jeśli celujesz w urządzenia sprzed wersji Lollipop, możesz użyć Shadow-Layout , ponieważ jest to łatwe i możesz go używać w różnych rodzajach układów.


Dodaj układ cieni do pliku Gradle :

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


U góry układ XML, w którym masz przycisk, dodaj na górze :

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

udostępni atrybuty niestandardowe.


Następnie umieszczasz wokół siebie układ cienia Button :

<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>

Następnie możesz dostosować app:ustawienia, aby pasowały do ​​wymaganego cienia.

Mam nadzieję, że to pomoże.

torrao
źródło
Słaba biblioteka, przestarzałe i nieobsługiwane. Poza tym wydaje się, że pozwala tylko na ciemne / czarne cienie, a nie na jasne.
forsberg
10

Wypróbowałem kod z góry i stworzyłem własny cień, który jest trochę bliższy temu, co próbuję osiągnąć. Może pomoże też innym.

<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
źródło
1
Prosimy o załączenie zrzutu ekranu.
CoolMind
3

Spróbuj tego, jeśli to działa dla Ciebie

wprowadź opis obrazu tutaj

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
źródło
1

Przykładowy obraz łatki 9 z cieniem

Po wielu badaniach znalazłem łatwą metodę.

Utwórz obraz z 9 łatkami i zastosuj go jako przycisk lub tło dowolnego innego widoku.

Za pomocą tej strony możesz stworzyć obraz 9 łatek z cieniem .

Umieść obraz poprawki 9 w katalogu do rysowania i zastosuj go jako tło dla przycisku.

mButton.setBackground(ContextCompat.getDrawable(mContext, R.drawable.your_9_patch_image);
shijo
źródło
0

Możesz spróbować tego:

<?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>

Julfikar
źródło