Aligning items in support actionbar appcompat

Question

I have an appCompatActivity with a supportActionBar similar to whatsApp chat screen interface. Having been able to customise the actionbar with all the necessary components, I am not not able to apply padding/margin of any sort on the leftmost up/back button. However, with rest of the items I set up in the toolbar are aligned properly.

Here is how my layout of the activity looks like:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/relMainLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|enterAlways">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/avatar"
            android:layout_width="@dimen/action_bar_avatar_size"
            android:layout_height="@dimen/action_bar_avatar_size"/>

        <TextView
            android:id="@+id/txtUserName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20dp"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>

        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

...

In the activity:

mImageViewAvatar = (ImageView) findViewById(R.id.avatar);
        mTextViewUserName = (TextView) findViewById(R.id.txtUserName);
        final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setDisplayShowTitleEnabled(false);
    mImageViewAvatar.setBackgroundImage(Contacts.getImage());
        mTextViewUserName.setText(recipientId);

I have tried to set my layout_marginLeft to a negative value as well to the image even, it does not move to left. How do I apply margin/padding alignments to only this toolbar? Not the toolbar used in the application.

Answer 1

I guess you're looking for app:contentInsetLeft respectively app:contentInsetStart. Setting these attributes to 0dp will remove the padding - see the following two screenshots:

Without explicity setting contentInset:

Setting contentInset to 0dp

Please note: This won't work if you're using getSupportActionBar().setDisplayHomeAsUpEnabled(true) since the drawable which will be used by the system has a padding which can't be removed. See the following Screenshot:

So if you're trying to achieve the same as WhatsApp you have to use your own "back-button" drawable and add it to your Toolbar layout.

Edit

That's how I would do it:

*.xml

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

    <LinearLayout
        android:id="@+id/layout_back_button"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:gravity="center_vertical">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_action_arrow_back" />

        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/avatar" />
    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:text="StackOverflow"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:textSize="20dp" />

</android.support.v7.widget.Toolbar>

Java code

    Toolbar tb = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(tb);
    getSupportActionBar().setTitle(null);
    View view = findViewById(R.id.layout_back_button);
    view.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            onBackPressed();
        }
    });

Result:

Notice that I wrapped the back button drawable and the avatar in an extra layout, which has the selectableItemBackgroundBorderless set as the background. Due that we achieve this ripple effect like in WhatsApp.