Style przycisków Android Material Design


308

Jestem zdezorientowany stylami guzików do projektowania materiałów. Chciałbym uzyskać kolorowe wypukłe przyciski, jak w załączonym linku., Takie jak przyciski „wymuś zatrzymanie” i „odinstaluj” widoczne w sekcji dotyczącej użytkowania. Czy są dostępne style lub czy muszę je zdefiniować?

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

Nie mogłem znaleźć domyślnych stylów przycisków.

Przykład:

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

Jeśli spróbuję zmienić kolor tła przycisku, dodając

    android:background="@color/primary"

wszystkie style znikają, takie jak animacja dotykowa, cień, zaokrąglony narożnik itp.


I to będzie najbardziej pomocne w dostosowanym przycisku angrytools.com/android/button
Kharak

Odpowiedzi:


750

Dodam swoją odpowiedź, ponieważ nie używam żadnej z pozostałych podanych odpowiedzi.

W bibliotece pomocy technicznej w wersji 7 wszystkie style są już zdefiniowane i gotowe do użycia. W przypadku standardowych przycisków wszystkie te style są dostępne:

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: wprowadź opis zdjęcia tutaj

Widget.AppCompat.Button.Colored: wprowadź opis zdjęcia tutaj

Widget.AppCompat.Button.Borderless wprowadź opis zdjęcia tutaj

Widget.AppCompat.Button.Borderless.Colored: wprowadź opis zdjęcia tutaj


Aby odpowiedzieć na pytanie, należy zastosować styl

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

Jak zmienić kolor

Dla całej aplikacji:

Kolor wszystkich kontrolek interfejsu użytkownika (nie tylko przycisków, ale także pływających przycisków akcji, pól wyboru itp.) Jest zarządzany przez atrybut, colorAccentjak wyjaśniono tutaj . Możesz zmodyfikować ten styl i zastosować własny kolor w definicji motywu:

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

Dla konkretnego przycisku:

Jeśli chcesz zmienić styl określonego przycisku, możesz zdefiniować nowy styl, dziedzicząc jeden ze stylów nadrzędnych opisanych powyżej. W poniższym przykładzie właśnie zmieniłem kolory tła i czcionek:

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

Następnie wystarczy zastosować ten nowy styl na przycisku za pomocą:

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

Aby ustawić domyślny projekt przycisku w układzie, dodaj tę linię do motywu styles.xml:

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

gdzie @style/btnjest twój motyw przycisku. Ustawia styl przycisku dla wszystkich przycisków w układzie z określonym motywem


6
Myślę, że jest to właściwie najlepszy sposób na zrobienie tego na razie.
xsorifc28

5
Czy przetestowałeś to na urządzeniu Kitkat?
maohieng

14
colorButtonNormalattr nie działa dla mnie w Androidzie 4.1.2. W ogóle nie można ustawić koloru przycisku ( android:backgroundpsuje styl przycisku).
Konstantin Konopko

2
@YoannHercouet, na której wersji Androida zrobiłeś te obrazy? Na moich Andro 4.1.2 i 4.4.2 przyciski ze stylem = „.. AppCompat.Button” nie są podnoszone.
Grzegorz Dev,

5
@konopko Jeśli jesteś podobny do mnie, użyłeś style=""zamiast tego Android:theme=""zmienić na ten ostatni naprawiłeś dla mnie ten problem
John Snow

84

Najprostsze rozwiązanie


Krok 1: Użyj najnowszej biblioteki wsparcia

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

Krok 2: Użyj AppCompatActivity jako nadrzędnej klasy aktywności

public class MainActivity extends AppCompatActivity

Krok 3: Użyj przestrzeni nazw aplikacji w pliku XML układu

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

Krok 4: Użyj AppCompatButton zamiast 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"/>

wprowadź opis zdjęcia tutaj


7
Nie trzeba określić android.support.v7.widget.AppCompatButton, ponieważ narzędzie build automatycznie używa że gdy podaszButton
Mk

2
włącza / wyłącza automatyczne działanie? czy musimy ponownie określić style?
Sundeep1501

To dla mnie usuwa listę stanów w pre-Lollipop, co powoduje, że przycisk nie ma żadnych efektów kliknięcia
Florian Walther

Wydaje się działać na Androidzie P, z tą różnicą, że textColorzastępuje kolor tekstu dla stanu wyłączonego .
l33t

@ Sundeep1501 Przynajmniej nie zmienił koloru na szary Widget.MaterialComponents.Button.OutlinedButton.
Dr.jacky

66

Jeśli dobrze cię rozumiem, chcesz zrobić coś takiego:
wprowadź opis zdjęcia tutaj

W takim przypadku powinno wystarczyć użycie:

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

Lub dla interfejsu API mniejszego niż 21:

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

Oprócz korzystania z samouczka dotyczącego motywów materiałowych .

Animowany wariant jest tutaj .


1
@androiddeveloper przekazał próbkę do GitHub, najważniejsze jest tutaj - github.com/AlexKorovyansky/BlueRaisedButton/blob/master/app/src/… ,
AlexKorovyansky

Myślę, że musisz używać biblioteki kompatybilnych dla starszych wersji.
AlexKorovyansky,

2
Nie robi tego, ale możesz go ustawić na wypadek, gdyby interfejs API miał 21 lat i więcej. Znalazłem sposób, ale nie wiem, jak to najlepiej zrobić.
programista Androida

4
czy dzięki temu podejściu mogę mieć wiele kolorów? wydaje się, że pozwala tylko na jeden na raz.
gerfmarquez,

2
@gerfmarquez Musisz mieć różne style dla różnych przycisków
KISHORE_ZE,

39

Oto, jak dostałem to, czego chciałem.

Najpierw zrobiłem przycisk (w 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>

Tętnienie i tło przycisku, jako rysunek 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>

To dodało efekt marszczenia, którego szukałem.


3
Promień narożnika powinien wynosić 2dp, aby dopasować zasoby szkieletu. Dodatkowo translacjaZ nie powinna być ustawiona w XML i nie ma potrzeby zastępowania domyślnej rzędnej, minimalnej szerokości, minimalnej wysokości lub marginesu.
alanv

Domyślny margines staje się 0, gdy zostanie zastosowany styl niestandardowy, z jakiegoś powodu właściwości nie są dziedziczone.
xsorifc28,

3
Ach, nie zauważyłem, że brakuje ci stylu rodzica. Powinieneś dodać Parent = "Widget.Material.Button" lub po prostu całkowicie pominąć tworzenie niestandardowego stylu i po prostu ustawić tło na samym przycisku.
alanv

O! Nie wiedziałem, że istnieje, nie natknąłem się na to w żadnej dokumentacji. Spróbuję tego.
xsorifc28,

Chociaż nie jestem pewien, jak powinienem to zrobić bez niestandardowego stylu. Czy możesz mi pokazać przykład?
xsorifc28,

33

Dzięki stabilnej wersji Android Material Components w listopadzie 2018 r. Google przeniósł komponenty materiałowe z przestrzeni nazw android.support.designdo com.google.android.material.
Biblioteka Material Component zastępuje bibliotekę Design Design Library na Androida.

Dodaj zależność do build.gradle:

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

Następnie dodaj MaterialButtondo swojego układu:

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

Możesz sprawdzić pełną dokumentację tutaj i API tutaj .

Aby zmienić kolor tła , masz 2 opcje.

  1. Korzystanie z backgroundTintatrybutu

Coś jak:

<style name="MyButtonStyle"
 parent="Widget.MaterialComponents.Button">
    <item name="backgroundTint">@color/button_selector</item>
    //..
</style>
  1. Moim zdaniem będzie to najlepsza opcja. Jeśli chcesz zastąpić niektóre atrybuty motywu z domyślnego stylu, możesz użyć nowego materialThemeOverlayatrybutu.

Coś jak:

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

Opcja nr 2 wymaga 'com.google.android.material:material:1.1.0'.

wprowadź opis zdjęcia tutajwprowadź opis zdjęcia tutaj

OLD Support Library:

Nowa biblioteka pomocy 28.0.0 zawiera teraz bibliotekę projektów MaterialButton.

Możesz dodać ten przycisk do naszego pliku układu za pomocą:

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

Domyślnie ta klasa będzie używać koloru akcentu motywu dla koloru tła wypełnionego przyciskami oraz białego dla koloru tekstu przycisków.

Możesz dostosować przycisk za pomocą tych atrybutów:

  • app:rippleColor: Kolor używany dla efektu tętnienia przycisku
  • app:backgroundTint: Służy do nakładania odcienia na tło przycisku. Jeśli chcesz zmienić kolor tła przycisku, użyj tego atrybutu zamiast tła.

  • app:strokeColor: Kolor używany do obrysu przycisku

  • app:strokeWidth: Szerokość używana do obrysu przycisku
  • app:cornerRadius: Służy do definiowania promienia używanego w rogach przycisku

android.support.design.button.MaterialButton nie wydaje się kompilować
IgorGanapolsky

3
@IgorGanapolsky Masz rację. Właśnie zaktualizowałem odpowiedź w wersji stabilnej.
Gabriele Mariotti

20

Oto przykład, który pomoże w konsekwentnym stosowaniu stylu przycisku w Twojej aplikacji.

Oto przykładowy motyw, którego użyłem z określonymi stylami ..

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

W ten sposób zdefiniowałem kształt i efekty przycisków w folderze 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>

Narożniki 2dp mają zachować spójność z motywem Materiał.


6
Kompatybilny wstecznie?
Skynet,

Niestety spóźniam się z odpowiedzią, jednak nie jest on kompatybilny wstecz, ponieważ tematy zostały wprowadzone dość późno.
samkya,

18

Oprócz android.support.design.button.MaterialButton(o którym wspomina Gabriele Mariotti ),

Istnieje również inny Buttonwidget o nazwie, com.google.android.material.button.MaterialButtonktóry ma różne style i obejmuje 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"

Wypełniony, podwyższony Button(domyślnie) :wprowadź opis zdjęcia tutaj

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

Wypełniony, nieuwzględnionyButton :wprowadź opis zdjęcia tutaj

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

TekstButton : wprowadź opis zdjęcia tutaj

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

IkonaButton : wprowadź opis zdjęcia tutaj

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

Tekst Buttonz ikoną :wprowadź opis zdjęcia tutaj


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

Wygodna klasa do tworzenia nowego przycisku materiału.

Ta klasa dostarcza zaktualizowane style materiałów dla przycisku w konstruktorze. Widżet wyświetli prawidłowe domyślne style materiałów bez użycia flagi stylu.


1
Czy wiesz jak możesz zmienić jego kolor?
Daniel Gomez Rico

1
app:backgroundTinti app:backgroundTintModez dokumentacji .
ʍѳђ ઽ ૯ ท

jak przypisują kolor stanu wyłączonego
Zaid Mirza

6

Próbowałem wielu odpowiedzi i bibliotek stron trzecich, ale żadne nie utrzymywało granicy i podniosło efekt na pre-Lollipop, jednocześnie mając efekt falowania na Lollipop bez wad. Oto moje końcowe rozwiązanie łączące kilka odpowiedzi (obramowanie / podniesienie nie jest dobrze renderowane na gifach z powodu głębi kolorów w skali szarości):

Lizak

wprowadź opis zdjęcia tutaj

Pre-Lollipop

wprowadź opis zdjęcia tutaj

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>

Aktywność jest utworzona

    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;
        }
    });

Szukałem kompletnego przykładu, zdziwiony, że nie jest to głosowane wyżej - dzięki.
XMAN,

4

1) Możesz utworzyć przycisk z zaokrąglonym rogiem, definiując xml do rysowania i możesz zwiększyć lub zmniejszyć promień, aby zwiększyć lub zmniejszyć zaokrąglenie narożnika przycisku. Ustaw ten plik XML do rysowania jako tło przycisku.

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

przycisk zaokrąglonego rogu

2) Aby zmienić domyślną animację przejścia cienia i cienia między stanami przycisków, musisz zdefiniować selektor i zastosować go do przycisku za pomocą właściwości android: stateListAnimator. Pełne informacje na temat dostosowywania przycisków: http://www.zoftino.com/android-button


1

Właśnie utworzyłem bibliotekę Androida, która pozwala łatwo modyfikować kolor przycisku i kolor tętnienia

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

Nie trzeba tworzyć stylu dla każdego przycisku, który ma mieć inny kolor, co pozwala na losowe dostosowanie kolorów


1
Biblioteka generuje błąd: rippleColor has already been definedniektórzy użytkownicy wspomnieli o tym już w „problemach”
SagiLow

0

możesz nadać widok lotnictwu, dodając do niego oś Z i może mieć do niej domyślny cień. ta funkcja została udostępniona w podglądzie L i będzie dostępna po jej wydaniu. Na razie możesz po prostu dodać obraz, który nadaje temu wyglądowi tło przycisku


Widzę. W takim razie muszę to zrobić ręcznie. Jak powinienem dodać efekt dotyku radialnego? Tylko efekt przejścia dla przycisku?
xsorifc28,

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.