Develop Reference

Toolbar in android

Is there any tutorial easy to understand to create a toolbar with the home button aligned to the left and the log out button aligned to the right?
I am using menu type .xml files to do it, but I am not able to align the buttons as I want.
My .xml is:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/etxera"
android:icon="#drawable/etxera_fondo"
android:title="Hasierara"
app:showAsAction="always" />
<item android:id="#+id/saioa_itxi"
android:icon="#drawable/saioaitxi"
android:title="saioa itxi"
app:showAsAction="ifRoom" />
</menu>
Thanks for support!

Make a custom toolbar
Create a xml file
toolbar.xml
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:titleTextColor="#FFFFFF">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/left_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left" />
<Button
android:id="#+id/right_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
Include the toolbar into your main_activity.xml
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
</RelativeLayout>
Don't forget to set the NoActionBar theme

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>

Problems getting my ActionModeBar(?) to overlap support toolbar

I have been trying to get my app to look more material(ized) with the help of app compat v21, I have replaced my regular actionbar with the support toolbar, and changed my theme to Theme.AppCompat.Light.NoActionBar this works great! However, when I longpress an item in my gridview and my actionmode bar (is that what they are called?) shows up for multi select it shows above the toolbar.
I want it to overlap the toolbar, the same way it did with my old regular actionbar. I have tried to find a solution here, and have found multiple sources saying to add true
This does not work for me, i have tried both with the android: prefix and without, but still I get the same result. My activity extends ActionBarActivity and I have put:
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
In my onCreate. I feel like I have tried anything but I get the same result regardless.
I guess I better show some code:
My main layout
<android.support.v4.widget.DrawerLayout
xmlns:ads="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="?window_bg_default"
>
<!-- The main content view -->
<include layout="#layout/toolbar" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
ads:adSize="SMART_BANNER"
android:visibility="gone"
android:background="#color/text_darkgray"
android:layout_width="fill_parent"
android:layout_alignParentBottom="true"
android:layout_height="wrap_content" />
<TableLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:id="#+id/main_content"
android:layout_above="#id/adView"
/>
</RelativeLayout>
</LinearLayout>
<!-- The navigation drawer -->
<include layout="#layout/navdrawer" />
My styles
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="colorPrimary">#color/twee_orange_light</item>
<item name="colorPrimaryDark">#color/twee_orange_dark</item>
<item name="colorAccent">#color/twee_blue_light</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowActionModeOverlay">true</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:actionBarStyle">#style/AppTheme.Actionbar</item>
<item name="android:actionModeBackground">#color/twee_orange_dark</item>
<item name="android:actionOverflowButtonStyle">#style/AppTheme.Overflow</item>
<item name="android:homeAsUpIndicator">#drawable/ic_action_home</item>
<item name="card_bg_default">#drawable/img_bg_card</item>
<item name="window_bg_default">#drawable/window_background</item>
<item name="card_episode_name">#color/nextepisodegray</item>
<item name="card_episode_number">#color/twee_black</item>
<item name="button_bg">?android:attr/selectableItemBackground</item>
<item name="button_watched">#drawable/ic_watched_inactive</item>
<item name="text_default">#color/text_slightlydarkgray</item>
<item name="text_default_header">#color/text_darkergray</item>
<item name="text_season_separator">#color/black</item>
<item name="drawer_background">#color/drawer_background</item>
<item name="drawer_list_background">#color/drawer_list_background</item>
<item name="card_bg_default_color">#color/drawer_list_background</item>
<item name="twee_divider">#color/divider_default</item>
<item name="card_header_default">#drawable/img_bg_cardtop_header</item>
<item name="checkbox_watched">#drawable/checkbox_watched</item>
<item name="card_middle_bg">#drawable/background_listitem_default</item>
</style>
My toolbar:
<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"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/twee_orange_light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:elevation="8dp" />
My navdrawer:¨
<se.ja1984.twee.Activities.Views.ScrimInsetsScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="fill_parent"
android:layout_gravity="left|start"
android:orientation="vertical"
android:id="#+id/drawer_wrapper"
android:background="?drawer_background"
android:fitsSystemWindows="true"
app:insetForeground="#4000"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="165dp"
android:background="#drawable/img_navdrawer_header"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="#dimen/navbar_top"
android:paddingBottom="8dp"
android:id="#+id/lnrProfileChooser"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/layoutImage"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginRight="#dimen/padding_small"
>
<se.ja1984.twee.utils.RoundedImageView
style="#style/Twee_Cast_Photo"
android:layout_height="64dp"
android:layout_width="64dp"
android:id="#+id/imgUser"
android:scaleType="centerCrop"
android:src="#drawable/ic_no_cast"/>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/traktWrapper"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:visibility="gone"
>
<ImageView
android:id="#+id/background"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/trakt_background"
/>
<ImageView
android:layout_gravity="center"
android:id="#+id/imgTraktLogo"
android:layout_width="10dp"
android:layout_height="10dp"
android:src="#drawable/ic_trakt_logo"
/>
</FrameLayout>
</RelativeLayout>
<it.sephiroth.android.library.widget.HListView
android:id="#+id/profiles"
android:layout_width="48dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="right|top" />
</FrameLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="vertical"
android:layout_gravity="bottom"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" android:orientation="vertical"
android:layout_alignParentBottom="true"
>
<TextView
style="#style/Twee_Profile_Displayname"
android:id="#+id/txtUsername"
android:text="#string/profile_notsignedin_displayname"
android:paddingTop="0dp"
/>
<TextView
android:text="Xxxx hours well spent"
style="#style/Twee_Profile_Timewasted"
android:id="#+id/txtTimeWasted"
android:paddingTop="0dp"
android:layout_below="#+id/txtUsername" />
</LinearLayout>
</RelativeLayout>
</FrameLayout>
<LinearLayout
android:id="#+id/navdrawer_items_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:orientation="vertical" />
</LinearLayout>
</se.ja1984.twee.Activities.Views.ScrimInsetsScrollView>
The trained eyes might see that I have borrowed the ScrimInsetScrollView from the IOSched app, but I don't think that matters.
And here's an image of the monsterosity!

I managed to solve this issue myself!
The problem is that I ran my super.onCreate() to late in my onCreate method.
I moved it to the top of my method, and now it works great!