How to right Align the image on the Toolbar in Android

Question

I am using ToolBar in my activity. I want to right align the profile picture of user. I have used android:layout_alignParentRight="true" but it is not working.

1. XML

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--Top Toolbar-->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="#3f5e7e"
        android:elevation="6dp"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        >
    <com.sevenhorse.View.CircularImageView
        android:id="@+id/profile"
        android:layout_width="40sp"
        android:layout_height="40sp"
        android:layout_alignParentRight="true"
        android:foregroundGravity="right"
        />
       <!-- android:layout_centerVertical="true"-->
    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar_top"
        android:background="#fbae38"
        android:elevation="6dp"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:tabGravity="fill"
        app:tabMode="fixed"/>


    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/reltv_footer"
        android:layout_below="@+id/tab_layout"></android.support.v4.view.ViewPager>

    <RelativeLayout
        android:id="@+id/reltv_footer"
        android:layout_width="match_parent"
        android:layout_height="50sp"
        android:layout_alignParentBottom="true"
        android:background="#2b4d72">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:padding="20sp" />

        <ImageView
            android:id="@+id/img_Profile"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:background="#2b4d72"
            android:padding="15sp"
            android:src="@drawable/more_option" />

        <View
            android:id="@+id/img_view"
            android:layout_width="3sp"
            android:layout_height="fill_parent"
            android:layout_toLeftOf="@+id/img_Profile"
            android:background="#335980" />

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_toLeftOf="@+id/img_view"
            android:background="#2b4d72"
            android:gravity="left"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/home"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:background="#203b58"
                android:padding="15sp"
                android:src="@drawable/home" />

            <View
                android:layout_width="2sp"
                android:layout_height="fill_parent"
                android:layout_toLeftOf="@+id/img_Profile"
                android:background="#203b58" />

            <ImageView
                android:id="@+id/friendrequest"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:padding="15sp"
                android:src="@drawable/friend_req" />

            <View
                android:layout_width="2sp"
                android:layout_height="fill_parent"
                android:layout_toLeftOf="@+id/img_Profile"
                android:background="#203b58" />

            <ImageView
                android:id="@+id/message"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:padding="15sp"
                android:src="@drawable/meg" />

            <View
                android:layout_width="2sp"
                android:layout_height="fill_parent"
                android:layout_toLeftOf="@+id/img_Profile"
                android:background="#203b58" />

            <ImageView
                android:id="@+id/notification"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:padding="15sp"
                android:src="@drawable/footer_notification" />
        </LinearLayout>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/reltv_Menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/reltv_footer"
        android:layout_alignParentRight="true"
        android:background="#ffffff"
        android:visibility="gone">

        <ListView
            android:id="@+id/listviewmoroption"
            android:layout_width="200sp"
            android:layout_height="wrap_content"
            android:divider="#6d6d6d"
            android:dividerHeight="1sp"></ListView>
    </RelativeLayout>
</RelativeLayout>

<FrameLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<LinearLayout
    android:id="@+id/left_drawer"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="right"
    android:background="@android:color/white"
    android:choiceMode="singleChoice"
    android:orientation="vertical">

    <include layout="@layout/cust_rightnavigationdrawer" />
</LinearLayout>

2.ScreenShot

How can i align the image to the right end of the toolbar?

Workwoman

Answer 1

You can only use android:layout_alignParentRight="true" inside a RelativeLayout, and Toolbar is a simple ViewGroup. To achieve the alignment, add a RelativeLayout inside the Toolbar and move the ImageView inside it:

<android.support.v7.widget.Toolbar
        ...
        >
    <RelativeLayout
        ...>
        <com.sevenhorse.View.CircularImageView
            ...
            android:layout_alignParentRight="true"
            ...
        />

    </RelativeLayout>

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

Stlouis

But in your case toolbar title has been gone. Please provide solution. – Cerallua

@Otziii android:layout_gravity="right|center_vertical". @Stlouis Please consider updating your answer as it covers up whole toolbar. – Reproduction

Answer 2

Try to give android:layout_gravity="right"

<com.sevenhorse.View.CircularImageView
        android:id="@+id/profile"
        android:layout_width="40sp"
        android:layout_height="40sp"
        android:foregroundGravity="right"
        android:layout_gravity="right"
        android:layout_alignParentRight="true"
        />

Schoolfellow

maybe to add several more android:layout_alignParentRight="true" just in case.. ;) – Estrone

Answer 3

Add RelativeLayout in Toolbar and then use android:layout_alignParentRight="true" with CircularImageView

<!--Top Toolbar-->
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_top"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:background="#3f5e7e"
    android:elevation="6dp"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.sevenhorse.View.CircularImageView
            android:id="@+id/profile"
            android:layout_width="40sp"
            android:layout_height="40sp"
            android:layout_alignParentRight="true"
            android:foregroundGravity="right"
            />
           <!-- android:layout_centerVertical="true"-->

   </RelativeLayout>

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

Spoke

Answer 4

inside you can put any Layout like Linear Layout,Frame Layout,it will work fine

• that layout width should be match parent

Congratulant

Answer 5

The accepted answer only works if layout_width="match_parent" ,but this action also overshadows/hides the toolbar title. The only way to show both the Image and the Toolbar title is by having the relative layout's width as a fixed length and that is not ideal for most people. Even then, the relative layout does not align to right.

My Workaround
Have the relative layout width as layout_width="match_parent" ( This hides the toolbar title )and then add a plain textview inside of it with alignParentStart="true"
Then in the main activity, replace toolbar.setTitle("my_title") , with textView.setText("my_title")

i.e

<androidx.appcompat.widget.Toolbar android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/AppTheme.AppBarOverlay"
    app:popupTheme="@style/AppTheme.PopupOverlay">
    <RelativeLayout android:id="@+id/toolbar_item_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!--The Title Bar -->
        <TextView android:id="@+id/title_bar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="@style/heading"
            android:textColor="@color/white"
            android:layout_alignParentStart="true" />

        <!--The Inbox-->
        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:focusable="true"
            android:foreground="?android:attr/selectableItemBackground"
            android:layout_marginEnd="@dimen/layout_margin"
            android:layout_toLeftOf="@+id/switchhouse_panel">
            <ImageView android:id="@+id/house_admin_messages"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:cropToPadding="true"
                android:scaleType="centerCrop"
                app:srcCompat="@drawable/ic_email_white_24dp"
                android:layout_alignParentTop="true"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="20dp"
                android:background="@drawable/circle_custom"
                android:backgroundTint="@color/green"
                android:cropToPadding="true"
                android:layout_marginStart="20dp"/>
        </RelativeLayout>

        <!--The Switch-->
        <RelativeLayout android:id="@+id/switchhouse_panel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:focusable="true"
            android:foreground="?android:attr/selectableItemBackground"
            android:layout_marginStart="@dimen/layout_margin"
            android:layout_alignParentRight="true">
            <ImageView android:id="@+id/house_cover_thumbnail"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:background="@drawable/circle_custom"
                android:cropToPadding="true"
                android:scaleType="centerCrop"
                android:layout_alignParentTop="true"/>
            <ImageView
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:background="@drawable/circle_custom"
                android:padding="3dp"
                app:srcCompat="@drawable/ic_cached_black_24dp"
                android:cropToPadding="true"
                android:layout_marginStart="20dp"/>
        </RelativeLayout>
    </RelativeLayout>
</androidx.appcompat.widget.Toolbar>

In Main Activity

TextView title_bar = findViewById(R.id.title_bar);
title_bar.setText("Manage Property");

Bulgar