Custom Toolbar add imageView between backArrow and title

Question

I have a chat Application and inside the chatRoom i want to use a custom Toolbar. The reason to do that is because i need to display (in order from left to right)

1. back arrow button
2. avatar as ImageView
3. title and a subtitle below
4. the OptionsMenu on the right

My problem is the 2 (avatar) because i dont know how to put it between the back arrow and the title/subtitle

My chatRoom xml is

<?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">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/chatRoomAppBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/chatRoomToolBar"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:background="?attr/colorPrimary"
                android:minHeight="?attr/actionBarSize"
                android:theme="?attr/actionBarTheme"
                app:contentInsetEnd="8dp"
                app:contentInsetRight="8dp"
                app:contentInsetStart="0dp"
                app:contentInsetStartWithNavigation="0dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.0" />

            // avatar example
            <ImageView
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_marginStart="16dp"
                android:src="@drawable/ic_person"
                app:layout_constraintBottom_toBottomOf="@+id/chatRoomToolBar"
                app:layout_constraintStart_toStartOf="@+id/chatRoomToolBar"
                app:layout_constraintTop_toTopOf="@+id/chatRoomToolBar"
                app:tint="@color/colorAlert" />

        </androidx.constraintlayout.widget.ConstraintLayout>
    </com.google.android.material.appbar.AppBarLayout>


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

In the ChatRoomActivity, inside onCreate i do the following

@SuppressLint("InflateParams")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_chat_room)
        setSupportActionBar(chatRoomToolBar)

        supportActionBar?.apply {
            setDisplayShowHomeEnabled(true)
            setDisplayHomeAsUpEnabled(true)
        }
....
}

The problem is that the avatar is exactly in the same position as the back arrow and covers each other. I have tried to use the setIcon() method but i can't load a view as a parameter but only a drawable, besides i can't place it wherever i want it to

How can i do that?

Answer 1

Make NoActionbar in your style or theme.

then create a layout file say toolbar.xml

<androidx.appcompat.widget.Toolbar 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/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:minHeight="?attr/actionBarSize">

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

     <ImageView
        android:id="@+id/img"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_gravity="end"
        android:layout_weight="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:src="@drawable/YOUR_DRAWABLE" />

    <TextView
        android:id="@+id/text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="5dp"
        android:layout_marginTop="2dp"
        android:gravity="center_vertical"
        android:textAlignment="center"
        android:textSize="20sp"
        app:layout_constraintStart_toEndOf="@id/img"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>


</androidx.constraintlayout.widget.ConstraintLayout>

</androidx.appcompat.widget.Toolbar>

Now add this toolbar in your layout

<YOUR_ROOT_LAYOUT xmlns:.................>

     <include  id="@+id/my_toolbar"
        layout="@layout/toolbar"/>   ----> this is toolbar.xml 
  
</YOUR_ROOT_LAYOUT>

then in your activity set toolbar

androidx.appcompat.widget.Toolbar mToolbar = findViewById(R.id.my_toolbar);
        TextView title = findViewById(R.id.text);
        ImageView img = findViewById(R.id.img);
        img.setImageDrawable(YOUR_DRAWABLE);
        title.setText("YOUR_TITLE");
        setSupportActionBar(mToolbar);