Develop Reference

Make a toolbar with menu icon like amazon app

I am trying to make a toolbar with menu icon like amazon app. But the toolbar menu icon have not set properly. Actually All menu icon has set Left to right. i have need back icon and navigation icon has set on right side, App logo set on center and other icon has set on left side.
menu code...
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
>
<item
android:id="#+id/action_bookmark"
android:icon="#drawable/ic_bookmark_white_24dp"
android:orderInCategory="100"
android:title="#string/action_bookmark"
app:showAsAction="always" />
<item
android:id="#+id/action_back"
android:icon="#drawable/ic_keyboard_arrow_left_white_24dp"
android:orderInCategory="101"
android:title="#string/action_back"
app:showAsAction="always" />
<item
android:id="#+id/texttite"
android:icon="#mipmap/ic_launcher"
android:orderInCategory="102"
android:title="#string/action_forward"
android:titleCondensed="hello........"
app:showAsAction="always" />
<item
android:id="#+id/action_forward"
android:icon="#drawable/ic_keyboard_arrow_right_white_24dp"
android:orderInCategory="103"
android:title="#string/action_forward"
app:showAsAction="always" />
<item
android:id="#+id/action_bookmark1"
android:icon="#drawable/ic_bookmark_white_24dp"
android:orderInCategory="104"
android:title="#string/action_bookmark"
app:showAsAction="always" />
</menu>
I have need this type of toolbar. I try this, but not success. Please Help me...

You can customize the toolbar layout just like any other layouts according to your requirement. Please find below a sample layout just using buttons.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorBlack">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:layout_width="50dp"
android:layout_height="wrap_content"
android:text="<" />
<Button
android:layout_width="50dp"
android:layout_height="wrap_content"
android:text="=" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Custom"
android:textColor="#color/backgroundColorGenericWhite"
android:textSize="22sp" />
</LinearLayout>
<Button
android:layout_width="50dp"
android:layout_height="wrap_content"
android:text="=" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</LinearLayout>

this is custom toolbar code
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:padding="0px"
android:layout_margin="0px"
app:popupTheme="#style/AppTheme.PopupOverlay" >
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>

Adding a border below Toolbar android

I'm trying to add a border that would look like this:
https://imgur.com/a/r8rHGQl
My toolbar.xml:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:elevation="1dp"
app:theme="#style/AppTheme"
app:titleTextAppearance="#style/TitleText"
app:titleTextColor="#color/colorPrimaryText"
>
</android.support.v7.widget.Toolbar>
In my java code I do :
toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
and inflating the menu.
If I try to nest the toolbar in relative/linear/constrains layout and add a View at the bottom I get the "android.widget.LinearLayout cannot be cast to android.support.v7.widget.Toolbar" error
Also tried to <include a layout with a View inside of it, but then the line appears in the middle of my toolbar and my title disappears.
Also including my menu.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/item1"
android:icon="#drawable/main_btn_info"
android:title="Item 1"
app:showAsAction="always"/>
</menu>

Create toolbar inside Linear Layout with a view
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:elevation="1dp"
app:theme="#style/AppTheme"
app:titleTextAppearance="#style/TitleText"
app:titleTextColor="#color/colorPrimaryText"/>
<View
android:background="your border color"
android:layout_width="match_parent"
android:layout_height="2dp" />
</LinearLayout>
Include this in all your layouts.
Then find toolbar in activity using toolbar id instead of xml name
toolbar = findViewById(R.id.toolbar_main);
setSupportActionBar(toolbar);

I used this method:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="Setting"
app:titleTextColor="#color/colorPrimary" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="1dp"
android:layout_marginBottom="1dp"
android:background="#DDD" />
</LinearLayout>

Made another layout with the border and included it in every activity, I know it's not the best way to do it, but result is the same for now.

Try using the elevation parameter
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
app:title="Log In"
android:elevation="5dp"
app:titleTextColor="#000000" />
android:elevation="5dp"
This gives you out an basic elevation border bottom shadow for Toolbar

Android Toolbar menu actionViewClass or actionLayout cannot be right alignment

I want to have a menu icon on the toolbar, when click on this menu icon and change to checkbox icon.
Like the search icon in the toolbar. When click on search menu button, show the searchView.
This is how the searchView is added in the menu.
<item android:id="#+id/action_search"
android:title="#string/action_menu_search"
android:icon="#drawable/ic_action_search"
app:showAsAction="ifRoom|collapseActionView"
app:actionViewClass="android.support.v7.widget.SearchView"/>
So i did the same for the checkbox
app:actionViewClass="android.widget.CheckBox"
But the actionview is shown, it is left align to the home up button. May be it is because checkbox is wrap_content.
But i want it to be right align to the end of the parent view.
So after checking this https://developer.android.com/training/appbar/action-views.html
I think i can use the actionLayout.
So i change as below:
<item android:id="#+id/action_delete"
android:title="delete"
android:icon="#drawable/ic_action_delete"
app:showAsAction="always|collapseActionView"
app:actionLayout="#layout/toolbar_checkbox_layout" />
toolbar_check_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Text"
android:gravity="center"
android:textColor="#color/colorAccent"/>
<android.support.v7.widget.AppCompatCheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:buttonTint="#color/colorAccent"
android:layout_gravity="end|center"
android:layout_marginEnd="15dp"
android:layout_marginRight="15dp" />
</LinearLayout>
The result is like that. It still cannot be right alignment. I want checkbox to be right side of the toolbar. Any suggestion? please. Thanks a lot

MainActivity.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:background="#ffffff"
tools:context="com.example.raj.jazzflurry.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/faqfoods_bar"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_gravity="end"
android:layout_height="?attr/actionBarSize">
<include
layout="#layout/btn_share"
android:id="#+id/btn_share"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
btn_share.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizantal" android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text"
android:layout_gravity="center"
android:textColor="#color/colorAccent"/>
<android.support.v7.widget.AppCompatCheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:buttonTint="#color/colorAccent"
android:layout_gravity="center" />
</LinearLayout>
Java file (inside of on create)
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Hai");
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setBackgroundDrawable(ContextCompat.getDrawable(this, R.color.colorprimary1));
Manifest.xml
<activity
android:name=".MainActivity"
android:screenOrientation="portrait"
android:theme="#style/Theme.AppCompat.NoActionBar">

Adding camera icon to the action bar in android

In menu_main.xml,
<item
android:id="#+id/camera"
android:title="camera"
android:icon="#drawable/cam"
android:showAsAction="always" />
I can see camera option on my menu(hardware) button click but i can't see icon in action bar.
Do I need to change any action bar settings?

Actionbar is now deprecated use toolbar instead
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" >
<RelativeLayout
android:id="#+id/bookmark"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:clickable="true"
android:gravity="right" >
<ImageView
android:id="#+id/bookmarkIv"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_alignParentRight="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:clickable="true"
android:src="#drawable/ic_star_uncheck" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>

try using a android support library themes like appcompact if you are trying to use this in lower version phones

You can try below in menu.xml
<menu 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"
>
<item
android:id="#+id/camera"
android:orderInCategory="100"
android:title="camera"
android:icon="#drawable/cam"
app:showAsAction="always" />
</menu>
Use app:showAsAction="always" instead of android:showAsAction="always". And remember add xmlns:app="http://schemas.android.com/apk/res-auto" in menu. Hope help you.

Bottom toolbar layout

I have created two toolbars one top and one bottom.
And the result is like this:
My question is, how can i make my bottom toolbar's items centered and their widths span vertically to fit the toolbar?
Here is what i've done:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="app.shinobi.org.ssmis.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/container_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
android:id="#+id/toolbar"
layout="#layout/main_toolbar" />
</LinearLayout>
<app.shinobi.org.util.tab.SlidingTabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="2dp"
android:background="#color/primaryColor"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
<include
android:id="#+id/stats_toolbar"
layout="#layout/stats_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
/>
</LinearLayout>
These are my two menus:
for the top toolbar:
<menu 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"
tools:context="app.shinobi.org.ssmis.MainActivity">
<item android:id="#+id/search" android:title="#string/search"
android:icon="#drawable/ic_search" android:orderInCategory="1" app:showAsAction="always"/>
<item android:id="#+id/refresh" android:title="#string/action_refressh"
android:icon="#drawable/ic_refresh" android:orderInCategory="2" app:showAsAction="always" />
for the bottom toolbar:
<menu 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"
tools:context="app.shinobi.org.ssmis.MainActivity">
<item android:id="#+id/monthly" android:title="#string/action_monthly"
android:icon="#drawable/ic_refresh" android:orderInCategory="3" app:showAsAction="always" />
<item android:id="#+id/yearly" android:title="#string/action_yearly"
android:icon="#drawable/ic_refresh" android:orderInCategory="4" app:showAsAction="always" />
<item android:id="#+id/drugs" android:title="#string/action_drugs"
android:icon="#drawable/ic_refresh" android:orderInCategory="5" app:showAsAction="always" />
Thanks!

Creating a menu will always put your button to the end of the toolbar.
If you want to center these buttons, you will have to use toolbar.addView(view) where your view can inflate from a xml file like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="3"
>
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<ImageButton
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<ImageButton
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
</LinearLayout>
Then you just have to:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setContentInsetsRelative(0, 0);
toolbar.addView(
LayoutInflater.from(this).inflate(R.layout.toolbar, null, false),
new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
);

Actually you can use a ActionMenuView to replace your bottom Toolbar
Or you can try this SplitToolbar implementation
https://gist.github.com/dodgex/7bc81fd2cbb70a8d5117

I can suggest one not very good solution but it works. If i right understand in include layout you have a toolbar view. Its a container so you can use it like relative or linear layout. And put buttons or other views inside it. And write properties like gravity in center. That is all.
Another way - do smth with items in menu layout may be. But i don't know how(
PS: a short example
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/primary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="previousActivity"
android:src="#drawable/ic_navigate_before_white_24dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Contact us"
android:textColor="#color/white"
android:textSize="20sp"
android:layout_gravity="center"
android:id="#+id/toolbar_title" />
</android.support.v7.widget.Toolbar>