Common Views

Button

To create a button with a label, use the following XML :

<Button
    android:id="@+id/next_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/next" />

A normal button can also have an image on the left or right, by using the android:drawableLeft and android:drawableRight attributes.

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_text"
    android:drawableLeft="@drawable/button_icon"
    ... />

Styling the button

A button can styled by applying a theme, e.g we can style the button so that its borderless :

<Button
    android:id="@+id/button_send"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_send"
    android:onClick="sendMessage"
    style="?android:attr/borderlessButtonStyle" />

We can also give the button a custom backgound for the different states :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_pressed"
          android:state_pressed="true" />
    <item android:drawable="@drawable/button_focused"
          android:state_focused="true" />
    <item android:drawable="@drawable/button_default" />
</selector>

Note

The xml file needs to be placed in the Resources/drawable folder. The order of the item is important. Android will search them by order, and only apply the button normal state after checking the state_pressed and state_focused.

EditText

Use to capture text entry.

<EditText
   android:id="@+id/album_description_view"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:hint="@string/album_description"
   android:inputType="textMultiLine" />

You might need to wrap the EditText inside a TextInputLayout to get nice animations from Material Design AppCompat Theme

<android.support.design.widget.TextInputLayout
    android:id="@+id/input_layout_name"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/input_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:hint="@string/hint_name" />
</android.support.design.widget.TextInputLayout>

ImageView

Displays an image. Use the scaleType to control how the image resizes. Images are not clickable by default. You will need to enable android:clickable=true.

<ImageView
    android:id="@+id/photo_image_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    android:src="@drawable/beach" />

ImageButton

A button that displays an image and its clickable.

<ImageButton
    android:id="@+id/photo_image_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    android:src="@drawable/beach" />

RadioButton

Used for selecting one choice from a list of possible choices.

<RadioGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <RadioButton
        android:id="@+id/yes_radio_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Yes"
        android:checked="true" />
    <RadioButton
        android:id="@+id/no_radio_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="No"
        android:textAppearance="?android:textAppearanceMedium" />
</RadioGroup>

View

A plain rectange that can be used as a divider.

<View
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="#4E4B4F" />

Spinner

Click on it to show a list of options. Requires an adapter to bind to the data source used to displate the items.

<Spinner
    android:id="@+id/sort_by_spinner"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

You first define an array of values and you create an adapter and bind the adapter to the spinner.

var choices = new string[] { "Beach", "BBQ", "Family Dinner", "Party"};
var spinner = FindViewById<Spinner>(Resource.Id.sort_by_spinner);
var adapter = new ArrayAdapter<string>(this,Android.Resource.Layout.SimpleSpinnerDropDownItem, choices);
adapter.SetDropDownViewResource(Android.Resource.Layout.SimpleSpinnerDropDownItem);
spinner.Adapter = adapter;

spinner.ItemSelected += (sender, e) => { 
    Console.WriteLine(spinner.GetItemAtPosition(e.Position));
};

CheckBox

Used for choosing multiple options.

<CheckBox
    android:id="@+id/notify_me_checkbox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/notify_me"
    android:textAppearance="?android:textAppearanceMedium" />

Switch

On/off switch that can you drap to the right or left or just tap to toggle.

<Switch
    android:id="@+id/backup_photos_switch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/auto_backup_photos"
    android:textAppearance="?android:textAppearanceSmall" />

For backwards compatibility use SwitchCompat. On older devices, the control is called a Togglebutton.

Switch Events

var backupPhotosSwitch = FindViewById<Switch>(Resource.Id.backup_photos_switch);
backupPhotosSwitch.CheckedChange +=  (object sender, CompoundButton.CheckedChangeEventArgs e) => { 
    Console.WriteLine($"Switch is {e.IsChecked}");
};

SeekBar

Displays progress and allows you to drag the handle anywhere in the bar e.g for music or video.

<SeekBar
    android:id="@+id/seek_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="100"
    android:progress="20" />

SeekBar Events

You handle the Progress event to get notified when the progress of the SeekBar changes.

var seekBar = FindViewById<SeekBar>(Resource.Id.seek_bar);
seekBar.ProgressChanged += (object sender, SeekBar.ProgressChangedEventArgs e) => { 
    Console.WriteLine($"Progress is now {e.Progress}");
};

RatingBar

<RatingBar
    android:id="@+id/rating_bar"
    style="?android:attr/ratingBarStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:numStars="5"
    android:rating="2.5"
    android:stepSize="0.5" />

RatingBar Events

You can use the RatingBarChange event to subscribe to changes in the RatingBar

var ratingBar = FindViewById<RatingBar>(Resource.Id.rating_bar);
ratingBar.RatingBarChange += (object sender, RatingBar.RatingBarChangeEventArgs e) => { 
    Console.WriteLine($"Rating is {e.Rating}");
};

ProgressBar

Loading spinner, used to show that something is running.

<ProgressBar
    android:id="@+id/loading_spinner"
    style="?android:progressBarStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Can also change the style to use a horizontal progressbar, use the style style="?android:progressBarStyleHorizontal"

<ProgressBar
    android:id="@+id/progress_bar"
    style="?android:progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="false"
    android:max="100"
    android:progress="40"/>

SearchView

A search view that you type a query into.

    <SearchView
        android:id="@+id/search_viewer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:iconifiedByDefault="true"
        android:queryHint="Search photos" />