How to customize the title – Android with Xamarin

By | January 24, 2014

For the next few weeks I intend to provide articles showing step by step how to implement functionality you see available in most common Android apps.

In the code samples I will try as much as possible to use Android development standards as for example the icons we use and also providing support to multiple screens allowing the apps to run on any Android device independent of size and screen resolution.

Android_1

Figure 1. Android default screen.

This first article will show how you can customize the title area of your app. By default when you create a new project Xamarin development studio will give you the MainActivity.cs that will start your app and a Main.axml layout which looks something like the Figure 1. When you run the app without any changes in the title area you’ll see to the left the Android icon and the title which by default is the app name.

That’s all part of the default settings and default theme.

Android_2

Figure 2. App with the custom title section.

When you start writing your own app that area most likely is the first thing you want to change. You probably want to add your own icon, add a more appropriate label for the view and probably add some ImageViewButton controls with access to a menu and some options. Something more like the Figure 2.

Accounting for different resolutions

When you download the code and open the solution you’ll see 5 “drawable” folders. Those folders contain the icons you’ll be using throughout your app. The icons in those folders have different resolutions. The Android engine will load the correct icon based on the resolution of the device.

  • CustomStyle.xml; you’ll find this file under Resources/values. This resource defines a custom theme we use to arrange the title area. For example you can change the height of that area by changing the value of the “android:windowTitleSize”.

<?xml version=“1.0” encoding=“UTF-8”?>
<resources>
  <style name=“CustomWindowTitleBackground”>
    <item name=“android:background”>#323331</item>
  </style>
  <style name=“CustomTheme” parent=“android:Theme”>
    <item name=“android:windowTitleSize”>36dip</item>
  </style>
</resources>

The custom view

Figure 3. Custom layout for the title.

Figure 3. Custom layout for the title.

I used a Linear Layout to define the main area of the tile. I added an ImageView control to the layout to display the app icon to the left of the title area and a large TextView for the title. Inside the Linear Layout I added a child Linear Layout aligned left and added an ImageButton with the “overflow” icon. See the xml source of the layout below.

<?xml version=“1.0” encoding=“utf-8”?>
<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”
    android:orientation=“horizontal”
    android:layout_width=“fill_parent”
    android:layout_height=“35dip”
    android:background=“@color/gray_dolphin”
    android:gravity=“center_vertical”
    android:paddingLeft=“2dip”>
    <ImageView
        android:src=“@drawable/qualtechaction”
        android:layout_width=“wrap_content”
        android:layout_height=“wrap_content”
        android:id=“@+id/imageView1” />
    <TextView
        android:text=“@string/app_name”
        android:textAppearance=“?android:attr/textAppearanceLarge”
        android:layout_width=“wrap_content”
        android:layout_height=“match_parent”
        android:id=“@+id/textView1”
        android:gravity=“center_vertical” />
    <LinearLayout
        android:orientation=“horizontal”
        android:layout_width=“fill_parent”
        android:layout_height=“35dip”
        android:background=“@color/gray_dolphin”
        android:gravity=“right|center_vertical”
        android:paddingLeft=“2dip”>
        <ImageButton
            android:src=“@drawable/ic_action_overflow”
            android:layout_width=“wrap_content”
            android:layout_height=“wrap_content”
            android:id=“@+id/imageButton1”
            android:layout_gravity=“right”
            android:background=“@color/white_smoke” />
    </LinearLayout>
</LinearLayout>

Load the MainActivity activity

Below is the code to load the activity. One thing to keep in mind, after API 11 for this to work you’ll have to set the Activity’s Theme parameter to the id of the custom theme.

To setup the custom title the commands have to be issued in the order shown below, first call the RequestWindowFeature next set the layout by calling the SetContentView and lastely set the layout of your custom title section by calling the SetFeatureInt of the Window property of the running activity.

namespace CustomTitle
{
  [Activity (MainLauncher = true, Theme = “@style/CustomTheme”)]
  public class MainActivity : Activity
  {

    protected override void OnCreate (Bundle bundle)
    {
      base.OnCreate (bundle);

      bool requestWindowFeature = false;

      requestWindowFeature = RequestWindowFeature (WindowFeatures.CustomTitle);

      // Set our view from the “main” layout resource
      SetContentView (Resource.Layout.Main);

      if (requestWindowFeature)
      {
        this.Window.SetFeatureInt (WindowFeatures.CustomTitle, Resource.Layout.CustomTitleMain);
      }

    }
  }
}

 Resources

Drop us a comment or if you have any questions please contact us through our QualTech-Software Solutions or QualTechCloud Integrated Cloud solutions customer form

Leave a Reply