Hiding the Android Activity icon in Xamarin Forms

In my previous post, I introduced a simple demo app that used the Stack Navigation Pattern. This is a standard pattern frequently used on all phone platforms to present hierarchically organized pages of information. In my demo app, it was used to navigate to each of the three detail pages from a main starting page. It is referred to as “stack navigation” because you can always return to the previous page.

On Windows Phone, this is done using the hardware “Back” button that resides below the touchscreen interface. On iOS devices, this is done using a UI button that is placed into the top navigation bar (on the left end of the bar). And on Android, both mechanisms are supported. There is a hardware button below the touchscreen as well as a UI button in the top navigation bar.

However, on Android the default behavior of a Xamarin Forms application is to display the application’s icon (the Main Activity’s icon) into this same area of the top navigation bar – and this behavior is fine for apps that don’t use stack navigation. But for apps that use stack navigation, this leads to a cluttered navigation bar which simply doesn’t look all that great (IMO).

The solution is simple: the main activity icon can be hidden, and here is how to do it:

Since this problem only impacts the Android version of our application, we can ignore the Windows Phone and iOS build targets and focus on the Android project. The solution turns out to be fairly simple – we need to make the Main Activity’s icon transparent (Android will collapse the transparent icon for us). To do that, we can create a custom theme and apply it to our application. There are a few steps in this process…

First, create a folder under the project’s Resources folder. This new folder (if it doesn’t already exist) should be named “values” (by the way, the naming convention here is important).

Second, add the custom theme XML to this folder. Name this XML file “Styles.xml”, and place the following short snippet of code into it:

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <style name="CustomTheme" parent="android:Theme.Holo.Light">
    <item name="android:icon">@android:color/transparent</item>
  </style>
</resources>

Note that I am also basing this custom theme on the “Holo Light” built-in theme, which uses a light-hued background and dark text, which I prefer.

Lastly, modify the MainActivity to use this custom theme. We simply need to edit MainActivity.cs and add one more parameter to the Activity attribute:

namespace HiddenActivityIconDemo.Droid
{
    [Activity(
        Label = "HiddenActivityIconDemo",
        Icon = "@drawable/icon",
        MainLauncher = true,
        ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation,
        Theme = "@style/CustomTheme")]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsApplicationActivity
    {
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);</pre>
<pre><code>        global::Xamarin.Forms.Forms.Init(this, bundle);
        LoadApplication(new App());
    }
}
</code></pre>
<pre>} 

Now, when we run the updated app the icon no longer appears in the navigation bar:

Source code for the updated sample application can be found here: https://github.com/Wintellect/XamarinSamples/tree/master/HiddenActivityIconDemo

 

Build your next mobile application
with Wintellect and Xamarin!