Top

Branding a Xamarin.Forms app on Android: Accent Color

Branding a Xamarin.Forms app on Android: Accent Color

Here we are going to start a series of articles with some tips to brand our Xamarin.Forms app.
In this case, we are going to talk about how to apply our accent color in some parts of our Android one.

Using Android Styles
The easiest way to apply our brand color is creating a custom Android theme.

For example: if we have a simple Entry, the result Android control is showing the default colors. A focused Entry control looks like:

image1

The first approach to change entry underline color using Android styles is creating a custom theme:

[code language=”xml”]


#f91816 #B2f91816 #FF0000
[/code]

image2

This is valid in Android 5.0 devices, which use the specified accent color. But in Android 4 ones, the Entry control still has the default blue underline color. To modify it, we have to change the used theme, for instance http://android-holo-colors.com/, to generate the desired resources, and update our theme to use those:

[code language=”xml”]


#f91816 #B2f91816 #FF0000
[/code]

image3

Using Custom Renderers
On the other hand, there are some controls that we cannot modify using the previous behavior.

Now we want to change the over scroll effect color of ListView control. Using the previous theme, we can see that in Android 5 devices, it is the accent color, but in Android 4.0 devices, we have to do some changes.

image4

As shown in this article we have to write some code. To use this approach in Xamarin.Forms, we should implement a Custom Renderer:

[code language=”csharp”]
using AccentColor.Droid.Renderers;
using Android.Content;
using Android.Graphics;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Color = Android.Graphics.Color;

[assembly: ExportRenderer(typeof(ListView), typeof(CustomListViewRenderer))]
namespace AccentColor.Droid.Renderers
{
public class CustomListViewRenderer : ListViewRenderer
{
protected override void OnAttachedToWindow()
{
var androidGlow = Context.Resources.GetColor(Resource.Color.accent);
BrandGlowEffect(Context, androidGlow);
base.OnAttachedToWindow();
}

private static void BrandGlowEffect(Context context, Color brandColor)
{
try
{
//http://evendanan.net/android/branding/2013/12/09/branding-edge-effect/
//glow
int glowDrawableId = context.Resources.GetIdentifier(“overscroll_glow”, “drawable”, “android”);
var androidGlow = context.Resources.GetDrawable(glowDrawableId);
androidGlow.SetColorFilter(brandColor, PorterDuff.Mode.SrcIn);

//edge
int edgeDrawableId = context.Resources.GetIdentifier(“overscroll_edge”, “drawable”, “android”);
var androidEdge = context.Resources.GetDrawable(edgeDrawableId);
androidEdge.SetColorFilter(brandColor, PorterDuff.Mode.SrcIn);
}
catch
{
//Can’t change list view brand color
}
}
}
}
[/code]

This is the result:

image5

Using this approach we can change also the overlay color when using MasterDetailPage:

[code language=”csharp”]
using AccentColor.Droid.Renderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(MasterDetailPage), typeof(CustomMasterDetailRenderer))]
namespace AccentColor.Droid.Renderers
{
public class CustomMasterDetailRenderer : MasterDetailRenderer
{
protected override void OnAttachedToWindow()
{
var androidGlow = Context.Resources.GetColor(Resource.Color.accent);
SetScrimColor(androidGlow);
base.OnAttachedToWindow();
}
}
}
[/code]

Using Custom Services
Finally, there are an special case where we cannot use the previous solutions.. This case is the call to DisplayAlert Page’s method. This method creates an Alert, but we do not have any way to modify the used colors. A simple approach is to create a Service, and display alerts using it:

[code language=”csharp”]
button.Clicked += (sender, args) => DependencyService.Get().ShowAlert(“Branded alert”, “This is a branded alert!”, “OK”);
[/code]

The IDisplayAlertService Android implementation:

[code language=”csharp”]
using AccentColor.Droid.Service;
using AccentColor.Services;
using Android.App;
using Android.Content.Res;
using Android.Widget;
using Xamarin.Forms;

[assembly: Dependency(typeof(AndroidDisplayAlertService))]
namespace AccentColor.Droid.Service
{
public class AndroidDisplayAlertService : IDisplayAlertService
{
public void ShowAlert(string title, string content, string buttonText)
{
var alert = new AlertDialog.Builder(Forms.Context);
alert.SetTitle(title);
alert.SetMessage(content);
alert.SetNegativeButton(buttonText, (sender, e) => { });

var dialog = alert.Show();
BrandAlertDialog(dialog);
}

public static void BrandAlertDialog(AlertDialog dialog)
{
try
{
Resources resources = dialog.Context.Resources;
var color = dialog.Context.Resources.GetColor(Resource.Color.accent);

var alertTitleId = resources.GetIdentifier(“alertTitle”, “id”, “android”);
var alertTitle = (TextView)dialog.Window.DecorView.FindViewById(alertTitleId);
alertTitle.SetTextColor(color); // change title text color

var titleDividerId = resources.GetIdentifier(“titleDivider”, “id”, “android”);
var titleDivider = dialog.Window.DecorView.FindViewById(titleDividerId);
titleDivider.SetBackgroundColor(color); // change divider color
}
catch
{
//Can’t change dialog brand color
}
}
}
}
[/code]

The result dialog is:

image6

Conclusion
We have seen three ways to apply our brand color in Xamarin.Forms for Android apps, allowing us to modify almost any detail of our User Interface, and provide the better branded experience.

You can download a sample project from: https://github.com/danielcaceresm/Xamarin.Forms.AccentColor

Daniel Cáceres
3 Comments
  • Javier Pintor

    Interesting post, I’m trying to add this to my project, but during the building, crashes.

    No resource found that matches the given name (AppTheme).

    I’m using a Visual Studio PCL project.

    What could be the problem??

    9 junio, 2015 at 1:26 pm Responder

Post a Comment