Estilos de botão de design de material do Android

308

Estou confuso sobre os estilos de botões para o design de materiais. Gostaria de obter botões coloridos elevados, como no link anexado., Como os botões "forçar parada" e "desinstalar" vistos na seção de uso. Existem estilos disponíveis ou preciso defini-los?

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

Não consegui encontrar os estilos de botão padrão.

Exemplo:

 <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 eu tentar alterar a cor de fundo do botão adicionando

    android:background="@color/primary"

todos os estilos desaparecem, como animação por toque, sombra, canto arredondado etc.

xsorifc28
fonte
I este Wii ser mais útil no botão personalizado angrytools.com/android/button
Kharak

Respostas:

750

Adicionarei minha resposta, já que não uso nenhuma das outras respostas fornecidas.

Com a Biblioteca de suporte v7, todos os estilos já estão definidos e prontos para uso, para os botões padrão, todos esses estilos estão disponíveis:

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: insira a descrição da imagem aqui

Widget.AppCompat.Button.Colored: insira a descrição da imagem aqui

Widget.AppCompat.Button.Borderless insira a descrição da imagem aqui

Widget.AppCompat.Button.Borderless.Colored: insira a descrição da imagem aqui


Para responder à pergunta, o estilo a ser usado é, portanto,

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

Como mudar a cor

Para todo o aplicativo:

A cor de todos os controles da interface do usuário (não apenas botões, mas também botões de ação flutuantes, caixas de seleção etc.) é gerenciada pelo atributo, colorAccentconforme explicado aqui . Você pode modificar esse estilo e aplicar sua própria cor na definição do seu tema:

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

Para um botão específico:

Se você precisar alterar o estilo de um botão específico, poderá definir um novo estilo, herdando um dos estilos principais descritos acima. No exemplo abaixo, mudei as cores de fundo e de fonte:

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

Então você só precisa aplicar esse novo estilo no botão com:

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

Para definir um design de botão padrão em um layout, inclua esta linha no tema styles.xml:

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

onde @style/btnestá o seu tema de botão. Isso define o estilo do botão para todos os botões em um layout com um tema específico

Yoann Hercouet
fonte
6
Eu acho que essa é a melhor maneira de fazê-lo a partir de agora.
precisa saber é o seguinte
5
Você o testou no dispositivo Kitkat?
maohieng
14
colorButtonNormalattr não funciona para mim no Android 4.1.2. Não é possível definir a cor do botão ( android:backgroundquebra o estilo do material).
Konstantin Konopko
2
@YoannHercouet em qual versão do Android você fez essas imagens? No meu Andro 4.1.2 e 4.4.2 os botões com style = ".. AppCompat.Button" não são gerados.
Grzegorz Dev
5
@konopko Se você é como eu, você usou style=""em vez de Android:theme=""mudar para o último que problema corrigido para mim
John Snow
84

Solução mais simples


Etapa 1: usar a biblioteca de suporte mais recente

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

Etapa 2: use AppCompatActivity como sua classe de atividade pai

public class MainActivity extends AppCompatActivity

Etapa 3: use o namespace do aplicativo no arquivo XML de 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">

Etapa 4: Use AppCompatButton em vez de 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"/>

insira a descrição da imagem aqui

Ehtesham Hasan
fonte
7
Você não precisa especificar, android.support.v7.widget.AppCompatButtonporque a ferramenta de construção usa isso automaticamente quando você especificaButton
Marque
2
irá ativar / desativar o trabalho automaticamente? ou precisamos especificar estilos novamente para isso?
Sundeep1501
Isso remove a lista de estado em pré-pirulito para mim, resultando em um botão, sem quaisquer efeitos clique
Florian Walther
Parece funcionar no Android P, exceto que textColorsubstitui a cor do texto no estado desativado .
L33t
@ Sundeep1501 Não mudou para cinza por Widget.MaterialComponents.Button.OutlinedButtonpelo menos.
21419 Dr.jacky
66

Se eu entendi direito, você deseja fazer algo assim:
insira a descrição da imagem aqui

Nesse caso, deve ser apenas o suficiente para usar:

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

Ou para API menor que 21:

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

Além de Usando o Tutorial do Tema do Material .

A variante animada está aqui .

AlexKorovyansky
fonte
1
O @androiddeveloper enviou a amostra para o GitHub, o principal é aqui - github.com/AlexKorovyansky/BlueRaisedButton/blob/master/app/src/… ,
AlexKorovyansky
Eu acho que você precisa usar a biblioteca compat para versões mais antigas.
AlexKorovyansky
2
Não, mas você pode configurá-lo caso a API tenha 21 anos ou mais. Eu encontrei uma maneira, mas não sei qual é a melhor maneira de fazê-lo.
desenvolvedor Android
4
posso ter várias cores com essa abordagem? parece que permite apenas um de cada vez.
gerfmarquez 21/09/2015
2
@gerfmarquez U precisa tk têm estilos diferentes para diferentes botões
KISHORE_ZE
39

Aqui está como consegui o que queria.

Primeiro, criei um botão (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>

A ondulação e o plano de fundo do botão, como um desenho 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>

Isso adicionou o efeito cascata que eu estava procurando.

xsorifc28
fonte
3
O raio do canto deve ser 2dp para corresponder aos ativos da estrutura. Além disso, translationZ não deve ser definido em XML e não há necessidade de substituir a elevação, minWidth, minHeight ou margem padrão.
alanv
A margem padrão se torna 0 quando um estilo personalizado é aplicado, por algum motivo as propriedades não estão sendo herdadas.
precisa saber é o seguinte
3
Ah, eu não percebi que você está perdendo um estilo pai. Você deve adicionar parent = "Widget.Material.Button" ou simplesmente pular a criação de um estilo personalizado inteiramente e definir o plano de fundo no próprio botão.
alanv
Oh! Eu não sabia que existia, não o encontrei em nenhuma documentação. Vou tentar isso.
xsorifc28
Embora não esteja certo de como fazê-lo sem um estilo personalizado. Você poderia me mostrar um exemplo?
xsorifc28
33

Com o lançamento estável do Android Material Components em novembro de 2018, o Google mudou os componentes do material do namespace android.support.designpara com.google.android.material.
A biblioteca de componentes de material substitui a biblioteca de suporte a design do Android.

Adicione a dependência ao seu build.gradle:

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

Em seguida, adicione o MaterialButtonao seu 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"
   />

Você pode verificar a documentação completa aqui e a API aqui .

Para alterar a cor de fundo, você tem 2 opções.

  1. Usando o backgroundTintatributo

Algo como:

<style name="MyButtonStyle"
 parent="Widget.MaterialComponents.Button">
    <item name="backgroundTint">@color/button_selector</item>
    //..
</style>
  1. Será a melhor opção na minha opinião. Se você deseja substituir alguns atributos do tema de um estilo padrão, poderá usar o novo materialThemeOverlayatributo.

Algo como:

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

A opção nº 2 requer o 'com.google.android.material:material:1.1.0'.

insira a descrição da imagem aquiinsira a descrição da imagem aqui

Biblioteca de suporte antigo:

Com a nova Biblioteca de Suporte 28.0.0 , a Biblioteca de Design agora contém o MaterialButton.

Você pode adicionar este botão ao nosso arquivo de layout com:

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

Por padrão, essa classe usará a cor de destaque do seu tema para a cor de fundo preenchida pelos botões e o branco para a cor do texto dos botões.

Você pode personalizar o botão com estes atributos:

  • app:rippleColor: A cor a ser usada para o efeito cascata do botão
  • app:backgroundTint: Usado para aplicar uma tonalidade ao fundo do botão. Se você deseja alterar a cor do plano de fundo do botão, use este atributo em vez do plano de fundo.

  • app:strokeColor: A cor a ser usada para o toque no botão

  • app:strokeWidth: A largura a ser usada para o toque no botão
  • app:cornerRadius: Usado para definir o raio usado nos cantos do botão
Gabriele Mariotti
fonte
android.support.design.button.MaterialButton parece não compilar #
IgorGanapolsky
3
@IgorGanapolsky Você está certo. Apenas atualizei a resposta com o lançamento estável.
Gabriele Mariotti
20

Aqui está um exemplo que ajudará a aplicar o estilo do botão de maneira consistente em seu aplicativo.

Aqui está um exemplo de tema que usei com os estilos específicos.

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

Foi assim que defini a forma e os efeitos dos botões na pasta 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>

Os cantos 2dp devem mantê-lo consistente com o tema Material.

samkya
fonte
6
Compatível com versões anteriores?
Skynet
Desculpe, estou atrasado em responder, no entanto, não é compatível com versões anteriores, pois os temas foram introduzidos bastante tarde.
samkya
18

Ao lado android.support.design.button.MaterialButton( mencionado por Gabriele Mariotti ),

Há também outro Buttonwidget chamado com.google.android.material.button.MaterialButtonque tem estilos diferentes e se estende de 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"

Preenchido, elevado Button(padrão) :insira a descrição da imagem aqui

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

Preenchido, sem melhoriaButton :insira a descrição da imagem aqui

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

TextoButton : insira a descrição da imagem aqui

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

ÍconeButton : insira a descrição da imagem aqui

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

Um texto Buttoncom um ícone ::insira a descrição da imagem aqui


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

Uma classe de conveniência para criar um novo botão Material.

Esta classe fornece estilos de Material atualizados para o botão no construtor. O widget exibirá os estilos de material padrão corretos sem o uso do sinalizador de estilo.

ʍѳђ ઽ ૯
fonte
1
Você sabe como você pode mudar a cor dele?
Daniel Gomez Rico
1
app:backgroundTinte app:backgroundTintModeda documentação .
ʍѳђ ઽ 9 ท
como eles estão atribuindo desativado cor estado
Zaid Mirza
6

Tentei várias bibliotecas de respostas e de terceiros, mas nenhuma estava mantendo a fronteira e aumentou o efeito no pré-pirulito, enquanto causava o efeito cascata no pirulito sem inconvenientes. Aqui está minha solução final combinando várias respostas (borda / relevo não são bem renderizadas em gifs devido à profundidade de cores da escala de cinza):

Pirulito

insira a descrição da imagem aqui

Pré-pirulito

insira a descrição da imagem aqui

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>

Atividade 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;
        }
    });
Rémy DAVID
fonte
Estava procurando um exemplo completo, surpreso por isso não ser votado mais alto - obrigado.
XMAN
4

1) Você pode criar um botão de canto arredondado definindo xml drawable e pode aumentar ou diminuir o raio para aumentar ou diminuir a redondeza do canto do botão. Defina este desenho XML como pano de fundo do botão.

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

botão de canto arredondado

2) Para alterar a sombra padrão e a animação de transição de sombra entre os estados dos botões, é necessário definir o seletor e aplicá-lo ao botão usando a propriedade android: stateListAnimator. Para uma referência completa de personalização de botões: http://www.zoftino.com/android-button

Arnav Rao
fonte
1

Acabei de criar uma biblioteca Android, que permite modificar facilmente a cor do botão e a cor da ondinha

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

Você não precisa criar um estilo para cada botão que deseja com uma cor diferente, permitindo que você personalize as cores aleatoriamente

xgc1986
fonte
1
A biblioteca produz um erro: rippleColor has already been definedalguns usuários já o mencionaram nos 'problemas'
SagiLow 16/01
0

você pode dar aviação à vista adicionando eixo z a ela e pode ter sombra padrão nela. esse recurso foi fornecido na visualização L e estará disponível após o lançamento. Por enquanto, você pode simplesmente adicionar uma imagem para dar uma olhada no fundo do botão

Suhail Mehta
fonte
Entendo. Eu tenho que fazê-lo manualmente então. Como eu adicionaria o toque radial? Apenas um efeito de transição para o botão?
xsorifc28