Bagaimana memberikan bayangan ke Button

Jawaban:

134

Gunakan pendekatan ini untuk mendapatkan tampilan yang Anda inginkan.
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>

Dan dalam tata letak xml Anda:

<Button
   android:background="@drawable/button_selector"
   ...
   ..
/>
Festus Tamakloe
sumber
Ini terlihat keren, tetapi ketika saya mencoba ini intellij tidak menyukainya. Ketika saya melihat doc untuk itemitu mengatakan android:drawableyang diperlukan .
JohnnyLambada
1
penutup </selector> tidak ada
myforums
6
Ini tidak persis seperti yang diinginkan penanya karena solusi ini membuat sebaliknya: latar belakang tombol gradien dan warna bayangan solid. Dan ini tampak sangat berbeda dari bayangan luar
1
Dapatkah saya membuatnya sehingga pemilih textColor dimasukkan ke dalam selektor di atas -jadi saya tidak perlu menyetel kedua textColor latar belakang setiap kali saya menentukan tombol, tetapi hanya perlu menyetel latar belakang ...?
JohnyTex
<selector>dan <item>tidak dibutuhkan. Gambar dikembalikan, seperti yang dikatakan @ user4702646.
CoolMind
57

Untuk Android versi 5.0 & lebih tinggi

coba Ketinggian untuk pemandangan lain ..

android:elevation="10dp"

Untuk Tombol,

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

di bawah versi 5.0,

Untuk semua tampilan,

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

Keluaran saya:

masukkan deskripsi gambar di sini

Ranjith Kumar
sumber
Saya ingin menggunakan pendekatan ini, tetapi tombol saya dibuat secara dinamis (yaitu dalam kode) dalam kontrol grid, bukan secara deklaratif (sebenarnya, saya menggunakan versi gratis Xamarin, jadi Mono lib). Tampaknya tidak menjadi metode langsung untuk menyetel sembarang atribut.
jrichview
@jrichview lihat jawaban ini & juga komentar stackoverflow.com/a/24459128/3879847
Ranjith Kumar
Hei, bagaimana saya bisa menggunakan ini sebagai drawable, jika saya menyetel bentuk tombol saya dengan drawable?
Egor Acak
21

Ini tombol saya dengan bayangan cw_button_shadow.xml di dalam drawable folder

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

Cara Penggunaan. di Button xml, Anda dapat mengubah ukuran tinggi dan berat badan Anda

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

masukkan deskripsi gambar di sini

Sam
sumber
13

Jika Anda menargetkan perangkat pra-Lollipop, Anda dapat menggunakan Shadow-Layout , karena mudah dan Anda dapat menggunakannya dalam berbagai jenis tata letak.


Tambahkan shadow-layout ke file Gradle Anda :

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


Di bagian atas tata letak xml tempat Anda memiliki tombol, tambahkan ke atas :

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

itu akan menyediakan atribut khusus.


Kemudian Anda meletakkan tata letak bayangan di sekitar Anda. Tombol :

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

Anda kemudian dapat mengubah app:pengaturan agar sesuai dengan bayangan yang Anda butuhkan.

Semoga membantu.

torrao
sumber
Lib yang buruk, dengan deprecations, plus tidak lagi didukung. Selain itu, sepertinya ini hanya memungkinkan untuk bayangan gelap / hitam, bukan yang terang.
forsberg
10

Saya telah mencoba kode dari atas dan membuat bayangan saya sendiri yang sedikit lebih dekat dengan apa yang saya coba capai. Mungkin itu akan membantu orang lain juga.

<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
sumber
1
Harap lampirkan tangkapan layar.
CoolMind
3

Coba ini jika ini berhasil untuk Anda

masukkan deskripsi gambar di sini

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

Contoh 9 gambar patch dengan shadow

Setelah banyak penelitian saya menemukan metode yang mudah.

Buat gambar 9 patch dan terapkan sebagai tombol atau latar belakang tampilan lainnya.

Anda dapat membuat gambar 9 patch dengan bayangan menggunakan situs web ini .

Letakkan gambar 9 patch di direktori drawable Anda dan terapkan sebagai latar belakang tombol.

mButton.setBackground(ContextCompat.getDrawable(mContext, R.drawable.your_9_patch_image);
shijo
sumber
0

Anda dapat mencoba ini:

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