Style a Button

PDF for offline use
Sample Code:
Related SDKs:

Let us know how you feel about this

Translation Quality


0/250

This recipe will show how to change the appearance of a button with the use of a style and a state selector list.

Recipe

  1. Create a new Xamarin.Android application named StyleAButton.

  2. Edit MainActivity.cs:

[Activity(Label = "ButtonStyle", MainLauncher = true, Icon = "@drawable/icon")]
public class Activity1 : Activity
{
    protected override void OnCreate(Bundle bundle)
    {
        base.OnCreate(bundle);
        SetContentView(Resource.Layout.Main);
    }
}
  1. Alter Main.axml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <Button
        android:text="Unstyled Button"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/button2" />
    <Button
        android:background="@drawable/red_button"
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Styled Button"
        style="@style/button_text" />
</LinearLayout>
  1. Add a new resource to the Drawable folder as an XML file called red_button.xml:
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true" >
    <shape>
      <solid
          android:color="#ef4444" />
      <stroke
          android:width="1dp"
          android:color="#992f2f" />
      <corners
          android:radius="6dp" />
      <padding
          android:left="10dp"
          android:top="10dp"
          android:right="10dp"
          android:bottom="10dp" />
    </shape>
  </item>
  <item>
    <shape>
      <gradient
          android:startColor="#ef4444"
          android:endColor="#992f2f"
          android:angle="270" />
      <stroke
          android:width="1dp"
          android:color="#992f2f" />
      <corners
          android:radius="6dp" />
      <padding
          android:left="10dp"
          android:top="10dp"
          android:right="10dp"
          android:bottom="10dp" />
    </shape>
  </item>
</selector>
  1. Create a new resource in the Values directory called styles.xml:
<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <style name="button_text" >
    <item name="android:layout_width" >fill_parent</item>
    <item name="android:layout_height" >wrap_content</item>
    <item name="android:textColor" >#ffffff</item>
    <item name="android:gravity" >center</item>
    <item name="android:layout_margin" >3dp</item>
    <item name="android:textSize" >30dp</item>
    <item name="android:textStyle" >bold</item>
    <item name="android:shadowColor" >#000000</item>
    <item name="android:shadowDx" >1</item>
    <item name="android:shadowDy" >1</item>
    <item name="android:shadowRadius" >2</item>
  </style>
</resources>
  1. At this point the project should have two new XML files created, one in the Drawable folder, and another in the Values folder:

  1. Run the application on a device, and two buttons should appear. One appears as the default system button, while the other is a red button with rounded corners and large white text:

When the styled button is pressed, it will change color slightly from a darker red to a bright red:

Additional Information

This example created a style called button_text to specify the look and format of the button. A style is a collection of properties that specify the look and format for a View or window. A style can specify properties such as height, padding, font color, font size, background color, and much more. A style is defined in an XML resource that is separate from the XML that specifies the layout.

In order to change the appearance of the button it was necessary to create a custom shape drawable, and then assign that to the background attribute of the Button.

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.