Sono confuso sugli stili dei pulsanti per il design dei materiali. Vorrei ottenere pulsanti colorati in rilievo come nel link allegato., Come i pulsanti "force stop" e "uninstall" visualizzati nella sezione utilizzo. Ci sono stili disponibili o devo definirli?

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

Non sono riuscito a trovare gli stili dei pulsanti predefiniti.

Esempio:

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

Se provo a cambiare il colore di sfondo del pulsante aggiungendo

    android:background="@color/primary"

tutti gli stili scompaiono, come l'animazione touch, l'ombra, l'angolo arrotondato, ecc.

Aggiungerò la mia risposta poiché non utilizzo nessuna delle altre risposte fornite.

Con Support Library v7, tutti gli stili sono in realtà già definiti e pronti all'uso, per i pulsanti standard sono disponibili tutti questi stili:

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:

Widget.AppCompat.Button.Colored:

Widget.AppCompat.Button.Borderless

Widget.AppCompat.Button.Borderless.Colored:

Per rispondere alla domanda, lo stile da utilizzare è quindi

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

Come cambiare il colore

Per l'intera app:

Il colore di tutti i controlli dell'interfaccia utente (non solo i pulsanti, ma anche i pulsanti di azione mobile, le caselle di controllo ecc.) È gestito dall'attributo colorAccentcome spiegato qui . Puoi modificare questo stile e applicare il tuo colore nella definizione del tema:

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

Per un pulsante specifico:

Se è necessario modificare lo stile di un pulsante specifico, è possibile definire un nuovo stile, ereditando uno degli stili principali sopra descritti. Nell'esempio seguente ho appena cambiato lo sfondo e i colori dei caratteri:

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

Quindi devi solo applicare questo nuovo stile sul pulsante con:

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

Per impostare un design pulsante predefinito in un layout, aggiungi questa linea al tema styles.xml:

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

dov'è @style/btnil tema del tuo pulsante. Questo imposta lo stile del pulsante per tutti i pulsanti in un layout con un tema specifico

La soluzione più semplice

Passaggio 1: utilizzare la libreria di supporto più recente

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

Passaggio 2: utilizzare AppCompatActivity come classe di attività principale

public class MainActivity extends AppCompatActivity

Passaggio 3: utilizzare lo spazio dei nomi dell'app nel file XML del layout

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

Passaggio 4: utilizzare AppCompatButton anziché 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"/>

Se ti capisco correttamente, vuoi fare qualcosa del genere:

In tal caso, dovrebbe essere sufficiente usare:

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

O per API inferiori a 21:

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

Oltre a utilizzare il materiale tutorial tutorial .

La variante animata è qui .

Ecco come ho ottenuto quello che volevo.

Innanzitutto, crea un pulsante (in 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>

L'increspatura e lo sfondo del pulsante, come un disegno 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>

Ciò ha aggiunto l'effetto a catena che stavo cercando.

Con la versione stabile di Android Material Components nel novembre 2018, Google ha spostato i componenti del materiale dallo spazio dei nomi android.support.designa com.google.android.material.
La libreria dei componenti materiali sostituisce la libreria di supporto alla progettazione di Android.

Aggiungi la dipendenza al tuo build.gradle:

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

Quindi aggiungere il MaterialButtonal layout:

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

Puoi consultare la documentazione completa qui e l' API qui .

Per cambiare il colore di sfondo hai 2 opzioni.

1. Utilizzando l' backgroundTintattributo.

Qualcosa di simile a:

<style name="MyButtonStyle"
 parent="Widget.MaterialComponents.Button">
    <item name="backgroundTint">@color/button_selector</item>
    //..
</style>

2. Sarà la migliore opzione secondo me. Se si desidera sovrascrivere alcuni attributi del tema da uno stile predefinito, è possibile utilizzare un nuovo materialThemeOverlayattributo.

Qualcosa di simile a:

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

L'opzione # 2 richiede il 'com.google.android.material:material:1.1.0'.

Libreria di supporto OLD:

Con la nuova libreria di supporto 28.0.0 , la libreria di design ora contiene il file MaterialButton.

Puoi aggiungere questo pulsante al nostro file di layout con:

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

Per impostazione predefinita, questa classe utilizzerà il colore accento del tema per il colore di sfondo dei pulsanti e il bianco per il colore del testo dei pulsanti.

Puoi personalizzare il pulsante con questi attributi:

• app:rippleColor: Il colore da utilizzare per l'effetto increspatura dei pulsanti

• app:backgroundTint: Utilizzato per applicare una tinta allo sfondo del pulsante. Se si desidera modificare il colore di sfondo del pulsante, utilizzare questo attributo anziché lo sfondo.

• app:strokeColor: Il colore da utilizzare per la corsa del pulsante

• app:strokeWidth: La larghezza da utilizzare per la corsa del pulsante
• app:cornerRadius: Utilizzato per definire il raggio utilizzato per gli angoli del pulsante

Ecco un esempio che ti aiuterà ad applicare lo stile del pulsante in modo coerente in tutta la tua app.

Ecco un tema di esempio che ho usato con gli stili specifici.

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

Ecco come ho definito la forma del pulsante e gli effetti nella cartella 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>

Gli angoli 2dp devono essere coerenti con il tema Materiale.

Accanto android.support.design.button.MaterialButton( menzionato da Gabriele Mariotti ),

C'è anche un altro Buttonwidget chiamato com.google.android.material.button.MaterialButtonche ha stili diversi e si estende da 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"

Riempito, elevato Button(impostazione predefinita) :

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

Riempito, non pertinenteButton :

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

TestoButton :

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

IconaButton :

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

Un testo Buttoncon un'icona ::

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

Una classe di convenienza per la creazione di un nuovo pulsante Materiale.

Questa classe fornisce stili di materiale aggiornati per il pulsante nel costruttore. Il widget visualizzerà gli stili di materiale predefiniti corretti senza l'uso del flag di stile.

Ho provato molte risposte e librerie di terze parti, ma nessuna manteneva il confine e aumentava l'effetto sul pre-lecca-lecca pur avendo l'effetto a catena sul lecca-lecca senza inconvenienti. Ecco la mia soluzione finale che combina diverse risposte (bordo / rilievo non sono ben renderizzati su gif a causa della profondità di colore in scala di grigi):

Lecca-lecca

Pre-lecca-lecca

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>

L'attività è 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;
        }
    });

1) È possibile creare il pulsante dell'angolo arrotondato definendo il disegno XML e si può aumentare o diminuire il raggio per aumentare o ridurre la rotondità dell'angolo del pulsante. Imposta questo disegno XML come sfondo del pulsante.

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

2) Per modificare l'animazione di transizione dell'ombra e dell'ombra predefinita tra gli stati dei pulsanti, è necessario definire il selettore e applicarlo al pulsante utilizzando la proprietà android: stateListAnimator. Per un riferimento completo alla personalizzazione dei pulsanti: http://www.zoftino.com/android-button

Ho appena creato una libreria Android, che ti consente di modificare facilmente il colore del pulsante e il colore dell'ondulazione

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

Non è necessario creare uno stile per ogni pulsante desiderato con un colore diverso, che consente di personalizzare i colori in modo casuale

puoi dare aviazione alla vista aggiungendo l'asse z ad esso e puoi avere un'ombra predefinita ad essa. questa funzione è stata fornita nell'anteprima L e sarà disponibile dopo il rilascio. Per ora puoi semplicemente aggiungere un'immagine che dà questo look per lo sfondo del pulsante