Search code examples
androidtoolbarandroid-architecture-navigationappbar

How to make appbar with some button and handle up button with navigation


I want to make a custom toolbar that I can add two or more buttons to navigating some other section (like profile and the notification area) and current fragment name. and if I user change fragment and go to another place up button disappear for back to the last place. right now I try to handle like this:

appbar.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:appNs="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimaryDark"
    android:id="@+id/toolbar"
    android:paddingStart="20dp"
    android:layoutDirection="rtl"
    android:paddingEnd="10dp"
    android:theme="@style/toolbarTheme">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="my app name"
        android:layout_gravity = "center"
        android:textSize="18sp"
        android:fontFamily="@font/main_bold"
        android:id="@+id/toolbar_title" />

    <ImageView
        android:id="@+id/imgProfile"
        android:src="@drawable/ic_profile"
        android:layout_marginStart="15dp"
        android:layout_gravity="end"
        android:layout_width="25dp"
        android:layout_height="25dp"/>


    <ImageView
        android:id="@+id/imgNotification"
        android:src="@drawable/ic_notification"
        android:layout_width="25dp"
        android:layout_gravity="end"
        android:layout_marginStart="15dp"
        android:layout_height="25dp"/>

</androidx.appcompat.widget.Toolbar>

activity_main.xml:

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

<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <include layout="@layout/appbar" />

            <androidx.core.widget.NestedScrollView
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <fragment
                    android:id="@+id/myNavHostFragment"
                    android:name="androidx.navigation.fragment.NavHostFragment"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:defaultNavHost="true"
                    app:navGraph="@navigation/navigation" />
            </androidx.core.widget.NestedScrollView>
        </LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

MainActivity.kt:

 setSupportActionBar(toolbar)
        val navController = findNavController(R.id.myNavHostFragment)
        val appBarConfiguration = AppBarConfiguration(navController.graph)
        toolbar.setupWithNavController(navController, appBarConfiguration)

how I can set onClickListener for ImageView that defined into appbar.xml? and how I can make label fragment text customizable? for example change font text size and text color and ...
(right now when I go into one fragment and user up button to back label fragment will go to edge or disappear and go out from toolbar section)


Solution

  • If you use databinding, you can access child views of your included view easily. You need to provide id to your included layout. Simply add databinding to your included layout, and then access its views using it. In your case in your main activity it would be something like:

    binding.toolbar.imgProfile.setOnClickListener{}