Estilos De Botões De Design De Material Android
Http://www.google.com/design/spec/components/buttons.html#buttons-usage
não consegui encontrar os estilos dos botões predefinidos.
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 mudar o cor de fundo do botão, adicionando
android:background="@color/primary"
todos os estilos desaparecem, como a animação do toque, a sombra, o canto arredondado, etc.
11 answers
Vou adicionar a minha resposta, uma vez que não Uso nenhuma das outras respostas fornecidas.
Com a biblioteca de suporte v7, todos os estilos já estão definidos e prontos a usar, para os botões padrão, todos estes 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.Colored
:
Widget.AppCompat.Button.Borderless
Widget.AppCompat.Button.Borderless.Colored
:
Para responder à pergunta, o estilo a usar é portanto
<Button style="@style/Widget.AppCompat.Button.Colored"
.......
.......
.......
android:text="Button"/>
Como mudar a cor
Para a aplicação inteira:
A cor de todos os controlos UI (não só botões, mas também botões de Acção flutuantes, caixas de controlo, etc.) é gerenciado pelo atributo colorAccent
como explicado aqui.
Poderá modificar este estilo e aplicar a sua própria cor na sua definição de tema:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="colorAccent">@color/Orange</item>
</style>
Para um botão específico:
Se precisar de mudar o estilo de um botão específico, pode definir um novo estilo, herdando um dos estilos pai descritos acima. No exemplo abaixo, acabei de mudar as cores do fundo e da 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 só precisa de aplicar este novo estilo no botão com:
android:theme="@style/AppTheme.Button"
Para definir um desenho por omissão de um botão numa disposição, adicione esta linha aos estilos.tema xml:
<item name="buttonStyle">@style/btn</item>
Onde @style/btn
é o tema do botão. Isto define o estilo do botão para todos os botões numa disposição com um tema específico
Solução Mais Simples
Passo 1: usar a biblioteca de suporte mais recente
compile 'com.android.support:appcompat-v7:25.2.0'
Passo 2: Use a AppCompatActivity como a sua classe de actividade-mãe
public class MainActivity extends AppCompatActivity
Passo 3: Usar o espaço de nomes da aplicação no seu ficheiro XML de disposição
<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">
Passo 4: Usar o AppCompatButton em vez do Botão
<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"/>
![enter image description here](/images/content/26346727/e1e9c0ef022c0d51390d959600b427fc.png)
Nesse caso, deve ser o suficiente para usar:
<item name="android:colorButtonNormal">#2196f3</item>
Ou para API inferior a 21:
<item name="colorButtonNormal">#2196f3</item>
Além de usando o Tutorial do tema Material .
A variante animada é aqui.
Primeiro, fez um botão (em 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 fundo para o botão, como um desenhável 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>
Isto adicionou o efeito ondulante que eu procurava.
Com o lançamento estável de componentes de Material Android em Novembro de 2018, o Google moveu os componentes de material do namespace
android.support.design
paracom.google.android.material
.
biblioteca de componentes de Materiais é um substituto para a biblioteca de Suporte de Design do Android.
Adicionar a dependência ao seu build.gradle
:
dependencies { implementation ‘com.google.android.material:material:1.0.0’ }
Depois adicione o MaterialButton
para a sua disposição:
<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"
/>
Pode verificar a documentação completa aqui e API aqui .
Para alterar a cor de fundo , tem 2 opções.
- usando o atributo
backgroundTint
.
<style name="MyButtonStyle"
parent="Widget.MaterialComponents.Button">
<item name="backgroundTint">@color/button_selector</item>
//..
</style>
-
Na minha opinião, será a melhor opção. Se quiser sobrepor alguns atributos de tema a partir de um estilo predefinido, então poderá usar um novo
materialThemeOverlay
atributo.
<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#2 requer a 'com.google.android.material:material:1.1.0'.
Biblioteca de suporte antiga:
Com a nova biblioteca de suporte 28. 0 , a biblioteca de Design agora contém o MaterialButton
.
Pode adicionar este botão ao nosso ficheiro de disposição 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 omissão, esta classe irá usar a Cor do acento do seu tema para os botões preencheram a cor de fundo, juntamente com o branco para os botões Cor do texto.
Pode personalizar o botão com estes atributos:-
app:rippleColor
: a cor a utilizar para o efeito ripple do botão app:backgroundTint
: usado para aplicar um tom no fundo do botão. Se desejar alterar a cor de fundo do botão, use este atributo em vez de fundo.app:strokeColor
: a cor a usar para o traço do botão-
app:strokeWidth
: a largura a usar para o traço do botão -
app:cornerRadius
: usado para definir o raio usado para os cantos do botão
Ao lado android.support.design.button.MaterialButton
(mencionado por Gabriele Mariotti),
Existe também outro elemento chamado Button
com.google.android.material.button.MaterialButton
que 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"
Cheio, elevado Button
(por omissão):
style="@style/Widget.MaterialComponents.Button"
Recheados, não revestidos Button
:
style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
style="@style/Widget.MaterialComponents.Button.TextButton"
style="@style/Widget.MaterialComponents.Button.Icon"
app:icon="@drawable/icon_24px" // Icons can be added from this
Um texto Button
com um ícone::
Ler: https://material.io/develop/android/components/material-button/
Uma classe de conveniência para criar um novo botão de Material.Esta classe fornece estilos de Material actualizados para o botão na construtor. O elemento irá mostrar o Material por omissão correcto estilos sem o uso da bandeira de estilo.
Aqui está uma amostra que irá ajudar a aplicar o estilo do botão de forma consistente em toda a sua aplicação.
Aqui está um tema de amostra 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 do botão dentro da 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.
Eu tentei um monte de respostas e de terceiros libs, mas nenhum estava mantendo a fronteira e aumentou o efeito no pré-Chupa enquanto tendo o efeito ondulado sobre Chupa-chupa sem draubaque. Aqui está a minha solução final combinando várias respostas (border / raised não são bem renderizados em gifs devido à profundidade de cor em tons de cinzento) :
Pirulito
Pré-pirulito
Construir.enxada
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>
Oncreato de actividade
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) pode criar o botão de canto arredondado definindo o XML desenhável e pode aumentar ou diminuir o raio para aumentar ou diminuir a arredondamento do canto do botão. Defina este xml desenhável como 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>
2) para alterar a animação de transição de sombras e sombras por omissão entre os estados do botão, é necessário definir o selector e aplicá-lo ao botão usando a propriedade android:stateListAnimator. Para a referência completa de personalização do botão : http://www.zoftino.com/android-button
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"/>
Não precisa de criar um estilo para cada botão que quiser com uma cor diferente, permitindo-lhe personalizar as cores aleatoriamente
Você pode dar a aviação à vista adicionando-lhe o eixo z e pode ter sombra predefinida. este recurso foi fornecido em L preview e estará disponível após o lançamento. Por agora você pode simplesmente adicionar uma imagem que dá esta procura por fundo do botão