How to add an Icon to the toolbar using Navigation Drawer Activity Google template?

Question

I'm developing an Android app from "Navigation Drawer Activity" Template.

I would like to add an icon in the toolbar (left of the title).

When I use setIcon, it displays the icon in the center of the toolbar and I can't see the title.

How can I do that properly?

app_bar_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Theme.BodetTag.AppBarOverlay">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/Theme.BodetTag.PopupOverlay" />
    </com.google.android.material.appbar.AppBarLayout>

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

</androidx.coordinatorlayout.widget.CoordinatorLayout>

MainActivity:

class MainActivity : AppCompatActivity() {

    private lateinit var appBarConfiguration: AppBarConfiguration

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val toolbar: Toolbar = findViewById(R.id.toolbar)
        setSupportActionBar(toolbar)
        //supportActionBar?.setIcon(R.drawable.bodet_icon)

        val drawerLayout: DrawerLayout = findViewById(R.id.drawer_layout)
        val navView: NavigationView = findViewById(R.id.nav_view)
        val 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.
        appBarConfiguration = AppBarConfiguration(setOf(
                R.id.nav_home, R.id.nav_gallery, R.id.nav_slideshow), drawerLayout)
        setupActionBarWithNavController(navController, appBarConfiguration)
        navView.setupWithNavController(navController)
    }

    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        // Inflate the menu; this adds items to the action bar if it is present.
        menuInflater.inflate(R.menu.main, menu)
        return true
    }

    override fun onSupportNavigateUp(): Boolean {
        val navController = findNavController(R.id.nav_host_fragment)
        return navController.navigateUp(appBarConfiguration) || super.onSupportNavigateUp()
    }
}

Thanks!

Answer 1

For those looking to replace the burger-menu-icon, use app:navigationIcon="@drawable/ic_your_icon". In your case i believe this will clash with the android navigation components logic, tho.

So most probably you want to add an additional logo: For that, you can remember that a toolbar is just a standard layout and do sth. like this:

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        >

          <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/your_icon"
            />
          
          <TextView
            android:id="@+id/toolbarTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="your title here"
            />
            
       </LinearLayout>
    </androidx.appcompat.widget.Toolbar>

This will result in your title breaking. To fix this, i suggest disabling the default-toolbar-title:

supportActionBar?.setDisplayShowTitleEnabled(false)

and updating your custom title on your own, e.g. with a

navController.addOnDestinationChangedListener { _, destination, _ ->
    toolbarTitle.text = destination.label
}