Is it possible to centre the actionbar title from a fragment using AndroidX navigation?

Question

Currently, I am using the Navigation component from Android and the actionbar title is displayed on the left. However, I kind of want it centralised to make things neater, is there any way to go about doing so?

Image of the actionbar title that is displayed on the left

Activity's code:

public class General extends AppCompatActivity {
    private BottomNavigationView bottomNavigationView;
    private NavController navController;
    private AppBarConfiguration appBarConfiguration;

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

        bottomNavigationView = findViewById(R.id.bottomNavigationView);
        navController = Navigation.findNavController(this,  R.id.fragment);

        appBarConfiguration = new AppBarConfiguration.Builder(R.id.addFragment, R.id.homeFragment).build();

        NavigationUI.setupWithNavController(bottomNavigationView, navController);
        NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);
    }
}

Activity's XML Code

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".General">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_navigation_menu">

    </com.google.android.material.bottomnavigation.BottomNavigationView>

    <fragment
        android:id="@+id/fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@+id/bottomNavigationView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/the_navigation" />

</androidx.constraintlayout.widget.ConstraintLayout>

Fragment XML Code:

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/the_navigation"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.test.HomeFragment"
        android:label="Home"
        tools:layout="@layout/home_fragment" />
    <fragment
        android:id="@+id/addFragment"
        android:name="com.test.AddFragment"
        android:label="Add"
        tools:layout="@layout/add_fragment" />
</navigation>

Does this answer your question? [Android toolbar center title and custom font](https://stackoverflow.com/questions/26533510/android-toolbar-center-title-and-custom-font) — Sekiro, Jan 24 '21 at 13:53
Would you be kind enough to point me in the right direction if I am to use the toolbar? I would highly appreciate it if you include code snippets on how to integrate my code with the toolbar :D — 風の歌, Jan 24 '21 at 14:57
[official docs](https://developer.android.com/training/appbar/setting-up#add-toolbar) are a good place to start — Sekiro, Jan 24 '21 at 15:59
Try adding a custom toolbar to the activity then try the link provided above. Also, you need to add ```false true``` to the style. — private static, Jan 24 '21 at 23:51

score 0 · Accepted Answer · answered Jan 25 '21 at 15:07

0

After a bit of searching, it seems like this did the trick. All I had to do was to add it to my Activity code.

answered Jan 25 '21 at 15:07

風の歌

11
3

score 0 · Answer 2 · answered Aug 27 '22 at 20:39

As the fragments are a childs of Parent activity, so we can centralize or customize the title as we want on the Parent Activity. Here is an example how to center the title without doing the iterate for all View widgets ...

override fun onCreate(savedInstanceState: Bundle?) {
        setTheme(R.style.AppTheme);
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        navView = findViewById(R.id.nav_view)
        navController = findNavController(R.id.nav_host_fragment)

        // Passing each menu ID as a set of Ids because each
        // menu should be considered as top level destinations.
        val appBarConfiguration = AppBarConfiguration(
            setOf(
                R.id.navigation_home, R.id.navigation_settings, R.id.navigation_info
            )
        )
        setupActionBarWithNavController(navController, appBarConfiguration)
        navView.setupWithNavController(navController)

        // Detect on where fragment we are, and custom the title from here
        navController

            .addOnDestinationChangedListener { nc: NavController, nd: NavDestination, args: Bundle? ->
                when(nd.id){
                    R.id.navigation_home -> {
                        supportActionBar?.displayOptions = ActionBar.DISPLAY_SHOW_CUSTOM
                        supportActionBar?.setCustomView(R.layout.title_home_action_bar_layout)
                       
                    }
                    R.id.navigation_settings -> {
                        supportActionBar?.displayOptions = ActionBar.DISPLAY_SHOW_CUSTOM
                        supportActionBar?.setCustomView(R.layout.title_settings_action_bar_layout)
                      
                    }
                    R.id.navigation_info -> {
                        supportActionBar?.displayOptions = ActionBar.DISPLAY_SHOW_CUSTOM
                        supportActionBar?.setCustomView(R.layout.title_info_action_bar_layout)
                        
                    }
                }
            }

    }

For the custom centered title : title_settings_action_bar_layout.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="vertical">
    
        <TextView
            android:id="@+id/tvTitle"
            style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Settings Baby Watcher"
            android:textColor="#FFFFFF" />
    
    </LinearLayout>

Is it possible to centre the actionbar title from a fragment using AndroidX navigation?

2 Answers2