Toolbar on Android toolbar with WhatsApp icon

Question

How to display back arrow icon on android toolbar like WhatsApp?

I use the code below to set the arrow and icon on the toolbar.

toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); getSupportActionBar().setDisplayShowHomeEnabled(true); getSupportActionBar().setHomeButtonEnabled(true); toolbar.setLogo(icon); 

but I got the result as shown below.

I want an icon right after the next arrow. I do not want any gap between the back arrow and the icon, as shown below. Whatsapp

How to set back arrow icon on toolbar like WhatsApp?

Answer 1

As far as I know, WhatsApp does not use the application support toolbar , Whatsapp installs a custom action panel using

 actionBar.setCustomView(R.layout.conversation_actionbar); 

The application uses the chat_actionbar.xml parameter, Whatsapp uses

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@id/custom_view" android:layout_width="fill_parent" android:layout_height="?actionBarSize" android:clipChildren="false" > <LinearLayout android:id="@id/back" style="@style/ActionBarButtonStyle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:contentDescription="@string/abc_action_bar_up_description" android:enabled="false" android:orientation="horizontal" android:padding="@dimen/abc_action_bar_default_padding_material" > <ImageView android:id="@id/up" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left|center" android:scaleType="center" android:src="?homeAsUpIndicator" /> <FrameLayout android:id="@id/conversation_contact_photo_frame" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left|center" android:layout_marginRight="0.0dip" > <ImageView android:id="@id/conversation_contact_photo" android:layout_width="35.0dip" android:layout_height="35.0dip" android:scaleType="fitCenter" /> <View android:id="@id/transition_start" android:layout_width="35.0dip" android:layout_height="35.0dip" /> <ProgressBar android:id="@id/change_photo_progress" style="?android:attr/progressBarStyleSmallInverse" android:layout_width="35.0dip" android:layout_height="35.0dip" android:layout_gravity="center" android:visibility="gone" /> </FrameLayout> </LinearLayout> <LinearLayout android:id="@id/conversation_contact" style="@style/ActionBarButtonStyle" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_toRightOf="@id/back" android:clickable="true" android:clipChildren="false" android:orientation="vertical" android:paddingBottom="2.0dip" android:paddingLeft="4.0dip" android:paddingRight="0.0dip" android:paddingTop="0.0dip" > <com.whatsapp.TextEmojiLabel android:id="@id/conversation_contact_name" style="@style/Theme.ActionBar.TitleTextStyle.Condensed" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left" android:ellipsize="end" android:gravity="left" android:lines="1" android:scrollHorizontally="true" android:singleLine="true" /> <LinearLayout android:id="@id/conversation_contact_status_holder" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="left" android:clipChildren="false" android:clipToPadding="false" android:orientation="horizontal" > <TextView android:id="@id/conversation_contact_status_prefix" style="@style/Theme.ActionBar.SubtitleTextStyle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left" android:lines="1" android:paddingRight="3.5sp" android:singleLine="true" android:text="@string/conversation_last_seen" android:visibility="gone" /> <TextView android:id="@id/conversation_contact_status" style="@style/Theme.ActionBar.SubtitleTextStyle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="left" android:ellipsize="end" android:lines="1" android:singleLine="true" /> <View android:layout_width="0.0dip" android:layout_height="1.0dip" android:layout_weight="1.0" /> </LinearLayout> </LinearLayout> 

But I would advise you to follow the Materail Design Rules and use the ToolBar application support libraries to support ,

You can get the following result as shown in the picture below

Using the following code

your_activity.xml:

 <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" > <android.support.v7.widget.Toolbar android:id="@+id/toolbar_chats" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"> <include layout="@layout/toolbar_conversation"/> </android.support.v7.widget.Toolbar> </android.support.design.widget.AppBarLayout> 

toolbar_conversation.xml:

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:background="?attr/selectableItemBackgroundBorderless" android:layout_width="fill_parent" android:layout_height="?actionBarSize" > <!-- android:background="?attr/selectableItemBackgroundBorderless" will cause this Custom View to make ripple effect --> <LinearLayout android:id="@+id/conversation_image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:contentDescription="@string/abc_action_bar_up_description" android:orientation="horizontal"> <ImageView android:id="@+id/conversation_contact_photo" android:layout_width="35.0dip" android:layout_height="35.0dip" android:src="@drawable/icon" android:scaleType="fitCenter" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_toRightOf="@id/conversation_image" android:orientation="vertical" android:paddingBottom="2.0dip" android:paddingLeft="4.0dip" android:paddingRight="0.0dip" android:paddingTop="0.0dip" > <TextView android:id="@+id/action_bar_title_1" android:layout_width="wrap_content" android:layout_height="0dp" android:layout_gravity="center_vertical" android:layout_marginLeft="6dp" android:layout_weight="0.6" android:ellipsize="end" android:gravity="center_vertical" android:maxLines="1" android:textSize="18sp" android:text="shanraisshan" android:textStyle="bold" /> <TextView android:id="@+id/action_bar_title_2" android:layout_width="wrap_content" android:layout_height="0dp" android:layout_marginLeft="6dp" android:layout_weight="0.4" android:ellipsize="end" android:text="last seen 1 hour ago" android:maxLines="1" android:textSize="12sp" /> </LinearLayout> 

Activity.java

 final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_chats); setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); toolbar.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Log.e("Toolbar","Clicked"); } }); 

Wait for it, Whatsapp will go to the App-compat support library in the future.

Answer 2

 getSupportActionBar().setDisplayShowHomeEnabled(true); 

together with

 getSupportActionBar().setIcon(R.drawable.ic_launcher); 

Answer 3

It seems you need to set three values ​​corresponding to the value of the action bar to display the icon:

actionBar.setDisplayHomeAsUpEnabled(true); actionBar.setDisplayShowHomeEnabled(true); actionBar.setIcon(R.drawable.ic_cast_dark);

I would have thought that setDisplayHomeAsUpEnabled' and 'setIcon should be enough, but not like that.

I am using android.support.v7.app.ActionBar

Answer 4

You can achieve this by creating a custom Drawable containing an arrow and image icon, then add it to the toolbar.setNavigationIcon(drawable) , as shown below.

  setSupportActionBar(mBinding.toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); Drawable drawable = new Drawable() { @Override public void draw(Canvas canvas) { int width = canvas.getWidth(); int height = canvas.getHeight(); Bitmap bMap = CircularImageView.getCircularBitmap(BitmapFactory.decodeResource(getResources(), R.drawable.beautiful_eyes_small)); canvas.drawBitmap(bMap,(width-(bMap.getWidth())), (height/2)-(bMap.getHeight()/2), null); Bitmap bMap2 = BitmapFactory.decodeResource(getResources(), R.drawable.ic_arrow_back); canvas.drawBitmap(bMap2,0, (height/2)-(bMap2.getHeight()/2), null); } @Override public void setAlpha(int i) { } @Override public void setColorFilter(ColorFilter colorFilter) { } @Override public int getOpacity() { return PixelFormat.TRANSLUCENT; } }; mBinding.toolbar.setNavigationIcon(drawable); 

Answer 5

You can install the Home icon add-on using the code below

 ((ImageView) findViewById(android.R.id.home)).setPadding(x, x, x, x); x = set your value. 

Answer 6

Well, I think you should try to make some changes in the inverse image of the button, for example, apply some conciseness, reduce the width of the image and make it transparent. May be useful

Answer 7

you cannot do this with the usual back arrow in the toolbar, because it has minWidth 56dp with a center of scaleType you can do something like this:

 <android.support.v7.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:background="?attr/colorPrimary"> <ImageButton android:id="@+id/ibCustomBack" android:layout_width="wrap_content" android:layout_height="match_parent" android:background="?attr/selectableItemBackground" android:src="@drawable/ab_back_mtrl_am_alpha" /> <ImageView android:id="@+id/yourImage" android:layout_width="35dp" android:layout_height="35dp" android:src="@drawable/pb" /> </android.support.v7.widget.Toolbar> 

and process ibCustomBack yourself.