Custom theme in Android / Xamarin project - center Title text of Action Bar

Question

I have custom theme in Android / Xamarin project. What I can't do is to:

set header to the middle (and remove icon)
add menu button with menu option (for example button settings)

I've tried with settings property -> gravity to center but it didn't work.

Preview

    <?xml version="1.0" encoding="utf-8"?>
<resources>
  <!-- the theme applied to the application or activity -->
  <style name="AgrippaTheme"
         parent="@android:style/Theme.Holo.Light.DarkActionBar">
    <item name="android:actionBarStyle">@style/MyActionBar</item>
  </style>

  <!-- ActionBar styles -->
  <style name="MyActionBar"
         parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
    <item name="android:background">@color/main_orange_color</item>
    <item name="android:titleTextStyle">@style/AgrippaTheme.TitleTextStyle</item>
  </style>

  <!-- ActionBar TitleTextStyle styles -->
  <style name="AgrippaTheme.TitleTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
    <item name="android:textColor">@color/main_black_color</item>
    <item name="android:gravity">center_vertical|center_horizontal</item>
  </style>
</resources>

score 11 · Accepted Answer · answered Nov 04 '14 at 14:40

You will have to do it programmatically via a static method inside a static class

public static void SetActionbarText(Activity activity, string text)
        {
            // Setting custom view enable
            activity.ActionBar.SetHomeButtonEnabled(false);
            activity.ActionBar.SetIcon(Android.Resource.Color.Transparent);
            activity.ActionBar.SetDisplayShowCustomEnabled(true);
            activity.ActionBar.Title = "";

            LinearLayout linearLayout = new LinearLayout(activity);
            linearLayout.SetGravity(GravityFlags.CenterVertical);
            LinearLayout.LayoutParams textViewParameters = 
                new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MatchParent, LinearLayout.LayoutParams.MatchParent);
            textViewParameters.RightMargin = (int)(40 * activity.Resources.DisplayMetrics.Density);
            TextView modelTitle = new TextView(activity);        
            modelTitle.Text = text;
            modelTitle.Gravity = GravityFlags.Center;
            linearLayout.AddView(modelTitle,textViewParameters);
            ActionBar.LayoutParams actionbarParams = 
                new ActionBar.LayoutParams(ActionBar.LayoutParams.MatchParent,ActionBar.LayoutParams.MatchParent);
            activity.ActionBar.SetCustomView(linearLayout, actionbarParams);
        }

Notice that you have to play with right margin dimension of the text. This margin should be equal as width of the home icon(it is there but it is invisible).

You can add the right icon adding it on a Menu.xml and inflating this xml file in the OnCreateOptionsMenu method of your activity.

score 3 · Answer 2 · edited May 23 '17 at 11:53

You can also do it by using menu and styles xml files. To add the settings button, for example, you can just add an item in the menu file that defines the menu of the UI shown in the picture. There are a few predefined icons, like the one that i have used (ic_menu_preferences), but you can use another one or use a image instead. So, in, let`s say agrippa_menu.xml:

 <?xml version="1.0" encoding="utf-8"?>

[...]

<item
    android:id="@+id/menu_item_settings"
    android:title="@string/settings"
    android:icon="@android:drawable/ic_menu_preferences"
    android:showAsAction="ifRoom|withText"
    app:showAsAction="ifRoom|withText"/>

[...]

To ride off the icon you can add this line to the style that defines this UI, or create a new one if you don´t have it already created. So, in styles.xml:

<style name="AgrippaTheme" parent="android:Theme.Holo.Light">

   <!--pre v11-->
   <item name="logo">@color/transparent</item>
   <!--post v11-->
   <item name="android:logo">@color/transparent</item>
    <!-- Customize your theme here. -->
</style>

Finally, in reference to put the title in the middle, I haven´t found another way than defining a custom xml action bar and set it programatically like it is said here: Center Align title in action bar using styles in android. : . If someone knows how to do it using just styles will be welcomed.

Custom theme in Android / Xamarin project - center Title text of Action Bar

2 Answers2

Linked