Gaya Tombol Desain Bahan Android


308

Saya bingung tentang gaya tombol untuk desain material. Saya ingin mendapatkan tombol penuh warna seperti di tautan terlampir., Seperti tombol "berhenti paksa" dan "hapus" yang terlihat di bagian penggunaan. Apakah ada gaya yang tersedia atau apakah saya perlu mendefinisikannya?

http://www.google.com/design/spec/components/buttons.html#buttons-usage

Saya tidak dapat menemukan gaya tombol default.

Contoh:

 <Button style="@style/PrimaryButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Calculate"
    android:id="@+id/button3"
    android:layout_below="@+id/editText5"
    android:layout_alignEnd="@+id/editText5"
    android:enabled="true" />

Jika saya mencoba mengubah warna latar tombol dengan menambahkan

    android:background="@color/primary"

semua gaya hilang, seperti animasi sentuhan, bayangan, sudut bulat, dll.


Saya ingin ini sangat membantu dalam tombol kustom angrytools.com/android/button
Kharak

Jawaban:


750

Saya akan menambahkan jawaban saya karena saya tidak menggunakan jawaban lain yang disediakan.

Dengan Perpustakaan Dukungan v7, semua gaya sebenarnya sudah ditentukan dan siap digunakan, untuk tombol standar, semua gaya ini tersedia:

style="@style/Widget.AppCompat.Button"
style="@style/Widget.AppCompat.Button.Colored"
style="@style/Widget.AppCompat.Button.Borderless"
style="@style/Widget.AppCompat.Button.Borderless.Colored"

Widget.AppCompat.Button: masukkan deskripsi gambar di sini

Widget.AppCompat.Button.Colored: masukkan deskripsi gambar di sini

Widget.AppCompat.Button.Borderless masukkan deskripsi gambar di sini

Widget.AppCompat.Button.Borderless.Colored: masukkan deskripsi gambar di sini


Untuk menjawab pertanyaan, gaya yang digunakan karenanya

<Button style="@style/Widget.AppCompat.Button.Colored"
.......
.......
.......
android:text="Button"/>

Bagaimana cara mengubah warnanya

Untuk seluruh aplikasi:

Warna semua kontrol UI (tidak hanya tombol, tetapi juga tombol aksi mengambang, kotak centang, dll.) Dikelola oleh atribut colorAccentseperti yang dijelaskan di sini . Anda dapat memodifikasi gaya ini dan menerapkan warna Anda sendiri dalam definisi tema Anda:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="colorAccent">@color/Orange</item>
</style>

Untuk tombol tertentu:

Jika Anda perlu mengubah gaya tombol tertentu, Anda dapat menentukan gaya baru, mewarisi salah satu gaya induk yang dijelaskan di atas. Dalam contoh di bawah ini saya baru saja mengubah warna latar dan font:

<style name="AppTheme.Button" parent="Widget.AppCompat.Button.Colored">
    <item name="colorButtonNormal">@color/Red</item>
    <item name="android:textColor">@color/White</item>
</style>

Maka Anda hanya perlu menerapkan gaya baru ini pada tombol dengan:

android:theme="@style/AppTheme.Button"

Untuk mengatur desain tombol default dalam tata letak, tambahkan baris ini ke tema styles.xml:

<item name="buttonStyle">@style/btn</item>

di mana @style/btntema tombol Anda. Ini menetapkan gaya tombol untuk semua tombol dalam tata letak dengan tema tertentu


6
Saya pikir ini adalah cara terbaik untuk melakukannya seperti sekarang.
xsorifc28

5
Apakah Anda mengujinya pada perangkat Kitkat?
maohieng

14
colorButtonNormalattr tidak bekerja untuk saya di Android 4.1.2. Sama sekali tidak dapat mengatur warna tombol ( android:backgroundmerusak gaya material tombol).
Konstantin Konopko

2
@YoannHercouet di versi Android mana Anda melakukan gambar ini? Pada tombol Andro 4.1.2 dan 4.4.2 saya dengan style = ".. AppCompat.Button" tidak dinaikkan.
Grzegorz Dev

5
@konopko Jika Anda seperti saya, Anda menggunakan style=""alih-alih Android:theme=""mengubah yang terakhir memperbaiki masalah itu untuk saya
John Snow

84

Solusi paling sederhana


Langkah 1: Gunakan perpustakaan dukungan terbaru

compile 'com.android.support:appcompat-v7:25.2.0'

Langkah 2: Gunakan AppCompatActivity sebagai kelas Aktivitas induk Anda

public class MainActivity extends AppCompatActivity

Langkah 3: Gunakan namespace aplikasi dalam file XML layout Anda

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

Langkah 4: Gunakan AppCompatButton, bukan Button

<android.support.v7.widget.AppCompatButton
    android:id="@+id/buttonAwesome"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Awesome Button"
    android:textColor="@color/whatever_text_color_you_want"
    app:backgroundTint="@color/whatever_background_color_you_want"/>

masukkan deskripsi gambar di sini


7
Anda tidak perlu menentukan android.support.v7.widget.AppCompatButtonkarena alat bangun secara otomatis menggunakannya saat Anda menentukanButton
Tandai

2
akan mengaktifkan / menonaktifkan bekerja secara otomatis? atau kita perlu menentukan gaya lagi untuk itu?
Sundeep1501

Ini menghapus daftar status pada pre-lollipop untuk saya, menghasilkan tombol tanpa efek klik
Florian Walther

Tampaknya berfungsi di Android P, kecuali yang textColormenimpa warna teks untuk keadaan dinonaktifkan .
l33t

@ Sundeep1501 Tidak berubah menjadi abu-abu untuk Widget.MaterialComponents.Button.OutlinedButton, setidaknya.
Dr.jacky

66

Jika saya mengerti Anda dengan benar, Anda ingin melakukan sesuatu seperti ini:
masukkan deskripsi gambar di sini

Dalam hal demikian, itu harus cukup untuk digunakan:

<item name="android:colorButtonNormal">#2196f3</item>

Atau untuk API kurang dari 21:

<item name="colorButtonNormal">#2196f3</item>

Selain Menggunakan Tutorial Tema Bahan .

Varian animasi ada di sini .


1
@androiddeveloper mendorong sampel ke GitHub, intinya ada di sini - github.com/AlexKorovyansky/BlueRaisedButton/blob/master/app/src/… ,
AlexKorovyansky

Saya pikir Anda harus menggunakan perpustakaan compat untuk versi yang lebih lama.
AlexKorovyansky

2
Tidak, tetapi Anda dapat mengaturnya seandainya API 21 dan di atas. Saya telah menemukan cara, tetapi saya tidak tahu apa cara terbaik untuk melakukannya.
pengembang android

4
dapatkah saya memiliki banyak warna dengan pendekatan ini? tampaknya itu hanya memungkinkan satu per satu.
gerfmarquez

2
@gerfmarquez Anda perlu memiliki gaya yang berbeda untuk tombol yang berbeda
KISHORE_ZE

39

Inilah cara saya mendapatkan apa yang saya inginkan.

Pertama, buat tombol styles.xml:

<style name="Button">
    <item name="android:textColor">@color/white</item>
    <item name="android:padding">0dp</item>
    <item name="android:minWidth">88dp</item>
    <item name="android:minHeight">36dp</item>
    <item name="android:layout_margin">3dp</item>
    <item name="android:elevation">1dp</item>
    <item name="android:translationZ">1dp</item>
    <item name="android:background">@drawable/primary_round</item>
</style>

Riak dan latar belakang untuk tombol, sebagai drawable primary_round.xml:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/primary_600">
  <item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <corners android:radius="1dp" />
        <solid android:color="@color/primary" />
    </shape>
  </item>
</ripple>

Ini menambahkan efek riak yang saya cari.


3
Radius sudut harus 2dp agar sesuai dengan aset kerangka kerja. Selain itu, translationZ tidak boleh diatur dalam XML dan tidak perlu menimpa ketinggian default, minWidth, minHeight, atau margin.
alanv

Margin default menjadi 0 saat gaya khusus diterapkan, untuk beberapa alasan properti tidak diwariskan.
xsorifc28

3
Ah, saya tidak melihat bahwa Anda kehilangan gaya orang tua. Anda harus menambahkan parent = "Widget.Material.Button" atau hanya melewatkan membuat gaya kustom sepenuhnya dan hanya mengatur latar belakang pada tombol itu sendiri.
alanv

Oh! Saya tidak tahu itu ada, belum pernah menemukannya di dokumentasi apa pun. Saya akan mencobanya.
xsorifc28

Meskipun, saya tidak yakin bagaimana saya harus melakukannya tanpa gaya khusus. Bisakah Anda memberi saya contoh?
xsorifc28

33

Dengan rilis stabil Komponen Bahan Android pada November 2018, Google telah memindahkan komponen material dari namespace android.support.designke com.google.android.material.
Pustaka Komponen Bahan adalah pengganti untuk Perpustakaan Dukungan Desain Android.

Tambahkan ketergantungan ke Anda build.gradle:

dependencies { implementation com.google.android.material:material:1.0.0 }

Kemudian tambahkan MaterialButtonke tata letak Anda:

<com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.OutlinedButton" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/app_name"
        app:strokeColor="@color/colorAccent"
        app:strokeWidth="6dp"
        app:layout_constraintStart_toStartOf="parent"
        app:shapeAppearance="@style/MyShapeAppearance"
   />

Anda dapat memeriksa dokumentasi lengkap di sini dan API di sini .

Untuk mengubah warna latar belakang Anda memiliki 2 opsi.

  1. Menggunakan backgroundTintatribut.

Sesuatu seperti:

<style name="MyButtonStyle"
 parent="Widget.MaterialComponents.Button">
    <item name="backgroundTint">@color/button_selector</item>
    //..
</style>
  1. Ini akan menjadi pilihan terbaik menurut saya. Jika Anda ingin mengganti beberapa atribut tema dari gaya default maka Anda dapat menggunakan materialThemeOverlayatribut baru .

Sesuatu seperti:

<style name="MyButtonStyle"
 parent="Widget.MaterialComponents.Button">
   <item name=“materialThemeOverlay”>@style/GreenButtonThemeOverlay</item>
</style>

<style name="GreenButtonThemeOverlay">
  <!-- For filled buttons, your theme's colorPrimary provides the default background color of the component --> 
  <item name="colorPrimary">@color/green</item>
</style>

Opsi # 2 membutuhkan 'com.google.android.material:material:1.1.0'.

masukkan deskripsi gambar di sinimasukkan deskripsi gambar di sini

Perpustakaan Dukungan LAMA:

Dengan Perpustakaan Dukungan 28.0.0 baru , Perpustakaan Desain sekarang berisiMaterialButton .

Anda dapat menambahkan tombol ini ke file tata letak kami dengan:

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="YOUR TEXT"
    android:textSize="18sp"
    app:icon="@drawable/ic_android_white_24dp" />

Secara default, kelas ini akan menggunakan warna aksen tema Anda untuk tombol yang mengisi warna latar belakang bersama dengan putih untuk warna teks tombol.

Anda dapat menyesuaikan tombol dengan atribut ini:

  • app:rippleColor: Warna yang akan digunakan untuk efek riak tombol
  • app:backgroundTint: Digunakan untuk menerapkan warna ke latar belakang tombol. Jika Anda ingin mengubah warna latar tombol, gunakan atribut ini alih-alih latar belakang.

  • app:strokeColor: Warna yang akan digunakan untuk stroke tombol

  • app:strokeWidth: Lebar yang akan digunakan untuk stroke tombol
  • app:cornerRadius: Digunakan untuk menentukan jari-jari yang digunakan untuk sudut tombol

android.support.design.button.MaterialButton tampaknya tidak dapat dikompilasi
IgorGanapolsky

3
@IgorGanapolsky Anda benar. Baru saja memperbarui jawabannya dengan rilis stabil.
Gabriele Mariotti

20

Berikut adalah contoh yang akan membantu dalam menerapkan gaya tombol secara konsisten di seluruh aplikasi Anda.

Berikut adalah contoh Tema yang saya gunakan dengan gaya tertentu ..

<style name="MyTheme" parent="@style/Theme.AppCompat.Light">
   <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/accent</item>
    <item name="android:buttonStyle">@style/ButtonAppTheme</item>
</style>
<style name="ButtonAppTheme" parent="android:Widget.Material.Button">
<item name="android:background">@drawable/material_button</item>
</style>

Ini adalah bagaimana saya mendefinisikan bentuk tombol & efek di dalam folder res / drawable-v21 ...

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
  <item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
      <corners android:radius="2dp" /> 
      <solid android:color="@color/primary" />
    </shape>
  </item>
</ripple>

Sudut 2dp harus tetap konsisten dengan tema Material.


6
Kompatibel dengan belakang?
Skynet

Maaf saya terlambat merespons, namun tidak kompatibel karena tema diperkenalkan agak terlambat.
samkya

18

Di samping android.support.design.button.MaterialButton( yang disebutkan oleh Gabriele Mariotti ),

Ada juga Buttonwidget lain yang disebut com.google.android.material.button.MaterialButtonyang memiliki gaya berbeda dan memanjang dari AppCompatButton:

style="@style/Widget.MaterialComponents.Button"
style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
style="@style/Widget.MaterialComponents.Button.TextButton"
style="@style/Widget.MaterialComponents.Button.Icon"
style="@style/Widget.MaterialComponents.Button.TextButton.Icon"

Diisi, ditinggikan Button(default) :masukkan deskripsi gambar di sini

style="@style/Widget.MaterialComponents.Button"

Diisi, tidak terelevasiButton :masukkan deskripsi gambar di sini

style="@style/Widget.MaterialComponents.Button.UnelevatedButton"

TeksButton : masukkan deskripsi gambar di sini

style="@style/Widget.MaterialComponents.Button.TextButton"

IkonButton : masukkan deskripsi gambar di sini

style="@style/Widget.MaterialComponents.Button.Icon"
app:icon="@drawable/icon_24px" // Icons can be added from this

Teks Buttondengan ikon ::masukkan deskripsi gambar di sini


Baca: https://material.io/develop/android/components/material-button/

Kelas kenyamanan untuk membuat tombol Material baru.

Kelas ini memasok gaya Material yang diperbarui untuk tombol di konstruktor. Widget akan menampilkan style Material default yang benar tanpa menggunakan flag style.


1
Apakah Anda tahu bagaimana Anda bisa mengubah warnanya?
Daniel Gomez Rico

1
app:backgroundTint& app:backgroundTintModedari dokumentasi .
ʍѳђ ઽ ૯ ท

bagaimana mereka menetapkan warna negara yang dinonaktifkan
Zaid Mirza

6

Saya mencoba banyak jawaban & lib pihak ketiga, tetapi tidak ada yang menjaga perbatasan dan meningkatkan efek pada pre-lollipop sambil memiliki efek riak pada lollipop tanpa kekurangan. Berikut ini adalah solusi terakhir saya yang menggabungkan beberapa jawaban (batas / terangkat tidak diberikan dengan baik pada gif karena kedalaman warna abu-abu):

Lollipop

masukkan deskripsi gambar di sini

Pra-lolipop

masukkan deskripsi gambar di sini

build.gradle

compile 'com.android.support:cardview-v7:23.1.1'

layout.xml

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card"
    card_view:cardElevation="2dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardMaxElevation="8dp"
    android:layout_margin="6dp"
    >
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="0dp"
        android:background="@drawable/btn_bg"
        android:text="My button"/>
</android.support.v7.widget.CardView>

drawable-v21 / btn_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:drawable="?attr/colorPrimary"/>
</ripple>

drawable / btn_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorPrimaryDark" android:state_pressed="true"/>
    <item android:drawable="@color/colorPrimaryDark" android:state_focused="true"/>
    <item android:drawable="@color/colorPrimary"/>
</selector>

Aktifitas onCreate

    final CardView cardView = (CardView) findViewById(R.id.card);
    final Button button = (Button) findViewById(R.id.button);
    button.setOnTouchListener(new View.OnTouchListener() {
        ObjectAnimator o1 = ObjectAnimator.ofFloat(cardView, "cardElevation", 2, 8)
                .setDuration
                        (80);
        ObjectAnimator o2 = ObjectAnimator.ofFloat(cardView, "cardElevation", 8, 2)
                .setDuration
                        (80);

        @Override
        public boolean onTouch(View v, MotionEvent event) {

            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    o1.start();
                    break;
                case MotionEvent.ACTION_CANCEL:
                case MotionEvent.ACTION_UP:
                    o2.start();
                    break;
            }
            return false;
        }
    });

Sedang mencari contoh lengkap, terkejut ini tidak memilih yang lebih tinggi - terima kasih.
XMAN

4

1) Anda dapat membuat tombol sudut bulat dengan mendefinisikan xml drawable dan Anda dapat menambah atau mengurangi radius untuk menambah atau mengurangi kebulatan sudut tombol. Atur xml ini sebagai latar tombol.

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="4dp"
    android:insetTop="6dp"
    android:insetRight="4dp"
    android:insetBottom="6dp">
    <ripple android:color="?attr/colorControlHighlight">
        <item>
            <shape android:shape="rectangle"
                android:tint="#0091ea">
                <corners android:radius="10dp" />
                <solid android:color="#1a237e" />
                <padding android:bottom="6dp" />
            </shape>
        </item>
    </ripple>
</inset>

tombol sudut bundar

2) Untuk mengubah animasi transisi bayangan dan transisi bayangan antara status tombol, Anda perlu menentukan pemilih dan menerapkannya ke tombol menggunakan properti android: stateListAnimator. Untuk referensi penyesuaian tombol lengkap: http://www.zoftino.com/android-button


1

Saya baru saja membuat perpustakaan android, yang memungkinkan Anda dengan mudah memodifikasi warna tombol dan warna riak

https://github.com/xgc1986/RippleButton

<com.xgc1986.ripplebutton.widget.RippleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/btn"
    android:text="Android button modified in layout"
    android:textColor="@android:color/white"
    app:buttonColor="@android:color/black"
    app:rippleColor="@android:color/white"/>

Anda tidak perlu membuat gaya untuk setiap tombol yang Anda inginkan dengan warna yang berbeda, memungkinkan Anda untuk menyesuaikan warna secara acak


1
Perpustakaan menghasilkan kesalahan rippleColor has already been defined
:,

0

Anda dapat memberikan penerbangan ke tampilan dengan menambahkan sumbu z ke sana dan dapat memiliki bayangan default untuk itu. fitur ini disediakan dalam pratinjau L dan akan tersedia setelah rilis. Untuk saat ini Anda cukup menambahkan gambar yang memberi tampilan tombol latar belakang ini


Saya melihat. Saya harus melakukannya secara manual. Bagaimana cara menambahkan sentuhan radial? Hanya efek transisi untuk tombol?
xsorifc28

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.