Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android Material Design Button Styles

I'm confused on button styles for material design. I'd like to get colorful raised buttons like in the attached link., like the "force stop" and "uninstall" buttons seen under the usage section. Are there available styles or do I need to define them?

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

I couldn't find the default button styles.

Example:

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

If I try to change the background color of the button by adding

    android:background="@color/primary" 

all of the styles go away, such as the touch animation, shadow, rounded corner, etc.

like image 530
xsorifc28 Avatar asked Oct 13 '14 18:10

xsorifc28


People also ask

How do I change the default button style in Android Studio?

To change the default Button style of the application we can use the android:buttonStyle attribute in the AppTheme style inside the styles. xml.


1 Answers

I will add my answer since I don't use any of the other answers provided.

With the Support Library v7, all the styles are actually already defined and ready to use, for the standard buttons, all of these styles are available:

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: enter image description here

Widget.AppCompat.Button.Colored: enter image description here

Widget.AppCompat.Button.Borderless enter image description here

Widget.AppCompat.Button.Borderless.Colored: enter image description here


To answer the question, the style to use is therefore

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

How to change the color

For the whole app:

The color of all the UI controls (not only buttons, but also floating action buttons, checkboxes etc.) is managed by the attribute colorAccent as explained here. You can modify this style and apply your own color in your theme definition:

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

For a specific button:

If you need to change the style of a specific button, you can define a new style, inheriting one of the parent styles described above. In the example below I just changed the background and font colors:

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

Then you just need to apply this new style on the button with:

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

To set a default button design in a layout, add this line to the styles.xml theme:

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

where @style/btn is your button theme. This sets the button style for all the buttons in a layout with a specific theme

like image 136
Yoann Hercouet Avatar answered Oct 18 '22 08:10

Yoann Hercouet