Center Align title in action bar using styles in android.

Center Aligning Title in Android Action Bar using Styles

This article will guide you on how to center align the title in your Android Action Bar using styles. Action Bars are a prominent UI element providing crucial context and navigation for users. By centering the title, you enhance the visual appeal and maintain consistency with your app’s design.

Understanding the Approach

We’ll utilize the power of styles to achieve this. The key is to modify the android:layout_gravity attribute within the Action Bar’s title style. Let’s break down the steps.

Steps

1. Create a Style Resource: Navigate to your res/values/styles.xml file. Within this file, create a new style resource to define the custom style for your Action Bar title.
2. Define Title Style: In your styles.xml file, add the following code block within the tags:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  <item name="android:actionBarStyle">@style/MyActionBarStyle</item>
</style>

<style name="MyActionBarStyle" parent="@android:style/Widget.Holo.ActionBar">
  <item name="android:titleTextStyle">@style/MyActionBarTitleTextStyle</item>
</style>

<style name="MyActionBarTitleTextStyle" parent="@android:style/TextAppearance.Widget.ActionBar.Title">
  <item name="android:layout_gravity">center</item>
</style>

3. Apply the Style: Open your AndroidManifest.xml file and find the <application> tag. Set the theme attribute to your newly created style:

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">

Explanation

• We create a style named AppTheme and set its parent to Theme.AppCompat.Light.DarkActionBar. This provides a base for our application’s theme.
• Next, we define MyActionBarStyle, inheriting from the standard ActionBar widget style. Here, we override the android:titleTextStyle property to apply our custom MyActionBarTitleTextStyle.
• MyActionBarTitleTextStyle, based on the default ActionBar title appearance, overrides android:layout_gravity to center. This aligns the title text horizontally within the Action Bar.

Key Points

• This method applies a custom style to the Action Bar title. Remember to apply the style to your activity or the entire application using the android:theme attribute in AndroidManifest.xml.
• Make sure your project includes the AppCompat support library, as we’re using Theme.AppCompat.Light.DarkActionBar.

Example

Assuming your MainActivity.java contains:

package com.example.appname;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

And your activity_main.xml is:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:layout_centerInParent="true"/>

</RelativeLayout>

After following the steps above, running the application will result in the following:

Conclusion

By leveraging styles in Android, you can effortlessly center align the title within your Action Bar. This approach provides a clean, maintainable way to customize your application’s user interface and ensure consistency across your app’s design. This technique enhances the user experience by presenting a visually appealing and organized Action Bar.