I'm working on putting a Toolbar to screen bottom. After I hide the toolbar title, the title still occupies spaces.
My question is: how can I remove the space?
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
</resources>
In my Activity's onCreate():
toolbar = (Toolbar)findViewById(R.id.bar_bottom);
setSupportActionBar(toolbar);
getSupportActionBar().setSubtitle("");
getSupportActionBar().setDisplayShowTitleEnabled(false);
and in same activity's onCreateOptionsMenu and onOptionsItemSelected:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_bar_bottom, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
return super.onOptionsItemSelected(item);
}
and in my layout:
<?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="match_parent"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".WelcomeActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/lbl_test"
android:layout_width="match_parent"
android:layout_height="20sp"
android:text=""
/>
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/bar_bottom"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="?attr/colorPrimary"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>
and the Menu:
<?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"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".WelcomeActivity">
<item
android:id="#+id/btn_1"
android:orderInCategory="100"
android:title="Button 1"
app:showAsAction="always" />
<item
android:id="#+id/btn_2"
android:orderInCategory="200"
android:title="Button 2"
app:showAsAction="always" />
<item
android:id="#+id/btn_3"
android:orderInCategory="300"
android:title="Button 3"
app:showAsAction="always" />
<item
android:id="#+id/btn_4"
android:orderInCategory="400"
android:title="Button 4"
app:showAsAction="always" />
</menu>
Maybe i'm not too late.
<RelativeLayout 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.support.v7.widget.Toolbar
android:id="#+id/actionbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:theme="#style/Base.Theme.AppCompat.CompactMenu"
android:layout_alignParentBottom="true">
<LinearLayout
android:id="#+id/toolbarMenuLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="3"
android:gravity="center_horizontal">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/ic_action_location" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/ic_action_refresh" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:clickable="true"
android:scaleType="fitXY"
android:src="#drawable/ic_action_settings" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
If you use the Toolbar as stated in the classic mode, you cannot align contents as you wish. As you can see in the code above, add a custom layout to your Toolbar, then manage all item click by your own, without setting it as an ActionBar (it sucks, because you have to code all listener and style of course).
By the way, you will notice that the Toolbar will always have a padding in the left: this is normal, also G+ app has it (in the screenshot below, you will see it on the left of Home button).
As far I know once you set the ToolBar as the SupportActionBar it will maintain the space on right for title even if you set it to empty string.
Also when you remove title and have no icon or navigation then you are actually not interested in an ActionBar but just a toolbar. Why not extend the toolbar as below and use so that the items you add to the same by inflating menu would be equally spaced
public class SplitToolbar extends Toolbar {
public SplitToolbar(Context context) {
super(context);
}
public SplitToolbar(Context context, AttributeSet attrs) {
super(context, attrs);
}
public SplitToolbar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#Override
public void addView(View child, ViewGroup.LayoutParams params) {
if (child instanceof ActionMenuView) {
params.width = LayoutParams.MATCH_PARENT;
}
super.addView(child, params);
}
}
Instantiate as below and inflate XML
SplitToolbar toolbar = (SplitToolbar) findViewById(R.id.my_awesome_toolbar);
toolbar.inflateMenu(R.menu.menu_toolbar);
Add toolbar like below in Layout XML
<com.xxx.xxx.xxx.SplitToolbar
android:id="#+id/my_awesome_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary" />
And finally same 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"
tools:context=".XXXActivity">
<item
android:id="#+id/action_zoom2fit"
android:icon="#drawable/ic_aspect_ratio_white_24dp"
android:orderInCategory="100"
android:title="#string/zoomfit"
app:showAsAction="always" />
<item
android:id="#+id/action_card"
android:icon="#drawable/ic_action_eject"
android:orderInCategory="100"
android:title="#string/showcard"
app:showAsAction="always" />
<item
android:id="#+id/actionZoom2Track"
android:icon="#drawable/ic_drive_eta_white_24dp"
android:orderInCategory="100"
android:title="#string/zoom2Tracked"
app:showAsAction="always" />
</menu>
NOTE/DISCLAIMER : The extension of Toolbar for this purpose is actually derived from an answer I found sometime ago on StackOverflow itself. I am trying to locate the same to give credit to the person. Will sure add it once I find it.
I believe I got it from this thread
Evenly spaced menu items on Toolbar
Related
My toolbar contains :
my own views at start of the toolbar and
then a standard iconized searchview, which can be expanded by clicking the search icon:
When clicking icon to expand the search it overlaps the title:
How can I achieve to expand the searchview only to the end of "MY TITLE"?
Main layout:
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/home_appbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<androidx.appcompat.widget.Toolbar
android:id="#+id/app_toolbar"
android:layout_width="match_parent"
android:layout_height="44dp"
android:theme="#style/myToolbarTheme"
app:contentInsetLeft="0dp"
app:contentInsetStart="5dp"
app:contentInsetStartWithNavigation="0dp"
app:popupTheme="#style/myToolbarTheme"
app:title="">
<include layout="#layout/toolbar_title" />
</androidx.appcompat.widget.Toolbar>
<include layout="#layout/toolbar_tabs" />
</com.google.android.material.appbar.AppBarLayout>
<ViewFlipper .....
toolbar_title layout: included in Mainlayout
<ImageView
android:id="#+id/current_view_icon"
android:layout_width="#dimen/toolbar_view_icon"
android:layout_height="#dimen/toolbar_view_icon"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
app:srcCompat="#drawable/ic_chronology" />
<TextView
android:id="#+id/appbar_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:gravity="center_vertical"
android:text="MY TITLE"
android:textColor="#color/navigation_inner_color"
android:textSize="22dp" />
Inflating menu in code:
AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
appToolbar = context.findViewById(R.id.app_toolbar);
((AppCompatActivity) context).setSupportActionBar(appToolbar);
appToolbar.inflateMenu(R.menu.main_menu);
R.menu.main_menu with quicksearch:
<?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"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<item
android:id="#+id/app_bar_search"
android:icon="#drawable/ic_search_black_24dp"
android:title="Search"
app:actionViewClass="mypackage.toolbar.ArrayAdapterSearchView"
app:showAsAction="always" />
<item
android:id="#+id/app_bar_bookmark"
android:icon="#drawable/ic_bookmark"
android:title="Bookmark"
app:showAsAction="always" />
<item
android:id="#+id/app_bar_menuitem_settings"
android:title="Settings"
app:showAsAction="never" />
</menu>
I think you have 2 options,
Set width to SearchView in styles
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="searchViewStyle">#style/MySearchViewStyle</item>
</style>
<style name="MySearchViewStyle" parent="Widget.AppCompat.SearchView">
<item name="android:maxWidth">140dp</item>
</style>
Second option is get SeachView instance in onCreateOptionsMenu and calculate width of your toolbar_title layout set remaining width to search bar.
#Override
public boolean onCreateOptionsMenu(Menu menu)
{
getMenuInflater().inflate(R.menu.menu, menu);
MenuItem searchItem = menu.findItem(R.id.action_search);
SearchView searchView = (SearchView) MenuItemCompat.getActionView(searchItem);
searchView.setMaxWidth(calculatedWidth);
return super.onCreateOptionsMenu(menu);
}
But as per android standards, Search View has to extend completely in toolbar.
For this we have to use searchView.setMaxWidth(Integer.MAX_VALUE);.
I can set my ActionBar height in my styles.xml resource file:
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="actionBarSize">40dp</item>
</style>
This way, my action bar is a bit smaller than the default one. But a white gap appears below the ActionBar. The content starts at the same position as if the ActionBar had the same height.
EDIT:
My layout file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/mainMenuLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top">
<FrameLayout
android:id="#+id/mmContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/mmBottomNavigation" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/mmBottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_navigation_menu"
app:itemBackground="#color/white"
app:itemIconTint="#color/btn_nav_itam_color"
app:itemTextColor="#color/btn_nav_itam_color" />
</RelativeLayout>
EDIT 2:
I tried it on a blank Application. The actionBarSize attribute works as expected. Also there's no white gap.
My app uses a custom layout for the action bar - custom_action_bar.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="0dp" android:layout_margin="0dp"
android:background="#color/colorPrimary" >
<TextView
android:id="#+id/titleTvLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="#string/app_name"
android:textColor="#color/actionBarText"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/titleTvRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:text="#string/title_bar_loggedin"
android:textColor="#color/actionBarDarkText"
android:textSize="12sp"
android:textStyle="bold" />
</RelativeLayout>
And this layout is set in the Activity:
public static void setCustomTitle(AppCompatActivity apc, String userName) {
if (apc.getSupportActionBar() != null) {
apc.getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
apc.getSupportActionBar().setDisplayShowCustomEnabled(true);
apc.getSupportActionBar().setCustomView(R.layout.custom_action_bar);
View view = apc.getSupportActionBar().getCustomView();
TextView tvLeft = (TextView) view.findViewById(R.id.titleTvLeft);
TextView tvRight = (TextView) view.findViewById(R.id.titleTvRight);
tvLeft.setText(apc.getResources().getString(R.string.app_name));
String rightTitle = apc.getResources().getString(R.string.title_bar_loggedin) + " " + userName;
tvRight.setText(rightTitle);
}
}
Add standard height in your style or layout, example added for style.xml
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:actionBarStyle">#style/CustomActionBar</item>
</style>
<style name="CustomActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:actionBarSize">40dp</item>
<item name="android:background">#color/colorPrimary</item>
</style>
Set the parent layout height to "match_parent" in your layout resource file.
This is a hack but for the parent container of the content area, you can add a top margin of -8dp.
android:layout_marginTop="-8dp"
This will pull the contents up.
This is what I try but nothing happen
<style name="MyCustomTheme" parent="Theme.Freshchat.Light.DarkActionBar">
<item name="titleTextStyle">#style/Style1</item>
</style>
<style name="Style1" parent="#android:style/Widget.TextView">
<item name="android:textSize">12sp</item>
</style>
For more context, I am using Freshchat chat widget and want to change the Title and Subtitle font size. Thanks!
Try this your can you 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/myToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:titleTextAppearance="#style/ToolbarTitleTheme"
app:subtitleTextAppearance="#style/ToolbarSubtitleTheme">
</android.support.v7.widget.Toolbar>
than create Style in Style.xml
<style name="ToolbarTitleTheme" parent="#style/TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">20dp</item>
<<item name="android:textColor">#FFAA12</item>
<!-- include other attributes you want to change: textColor, textStyle, etc -->
</style>
<style name="ToolbarSubtitleTheme" parent="#style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
<item name="android:textSize">14dp</item>
<item name="android:textColor">#FFAA12</item>
</style>
1>Create an XML file with name titleview.xml
Code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent" >
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:textSize="20sp"
android:textColor="#android:color/white"
android:maxLines="1"
android:ellipsize="end"
android:text="" />
</RelativeLayout>
2>In OnCreate method:
if(getSupportActionBar() != null) {
getSupportActionBar().setDisplayShowCustomEnabled(true);
getSupportActionBar().setDisplayShowTitleEnabled(false);
LayoutInflater inflator = LayoutInflater.from(this);
View v = inflator.inflate(R.layout.titleview, null);
//if you need to customize anything else about the text, do it here.
//I'm using a custom TextView with a custom font in my layout xml so all I need to do is set title
((TextView) v.findViewById(R.id.title)).setText(this.getTitle());
((TextView) v.findViewById(R.id.title)).setTextSize(20);
//assign the view to the actionbar
this.getSupportActionBar().setCustomView(v);
}
3>In Manifest file to your Activity Add this line
android:label="#string/room_title"
The simple way will be to create a custom_action_bar.xml layout for your action bar as follows:
<?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="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/action_bar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="You title"
android:textColor="#ff0"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:id="#+id/action_bar_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your subtitle"
android:textColor="#ff0"
android:textSize="12sp" />
</LinearLayout>
Then you have to set the layout of you custom action bar as follows:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(R.layout.custom_action_bar);
}
Using this method you will be able to easily customize your action bar.
You can use SpannableString as follows:
SpannableString s = new SpannableString(getResources().getString(R.string.manage_prescription));
s.setSpan(new TypefaceSpan(YourActivity.this, Constants.TOOLBAR_TITLE_FONT), 0, s.length(),
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
And user this SpannableString object to set the title to your action bar.
I use Material design firstly in my apps and my problem is when I create activity there is no action bar or toolbar but I have Material Navigation drawer why it not implemented automatically like in older versions
Layout of activity:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/textView4" />
</LinearLayout>
Activity:
package fragments;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
public class Noname1 extends ActionBarActivity{
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.test);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return super.onCreateOptionsMenu(menu);
}
}
`
My theme:
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/nliveo_green_colorPrimary</item>
<item name="colorPrimaryDark">#color/nliveo_green_colorPrimaryDark</item>
<item name="colorAccent">#color/nliveo_green_colorPrimary</item>
<item name="android:textColorPrimary">#color/myTextPrimaryColor</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:windowBackground">#color/myWindowBackground</item>
</style>
Make a custom_toolbar.xml file like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="#color/nliveo_green_colorPrimary"
android:layout_height="?android:attr/actionBarSize" />
Include it in your layout file wherever you want like:
<include android:id="#+id/toolBar" layout="#layout/custom_toolbar"/>
in Your onCreate Method:
public class Noname1 extends ActionBarActivity{
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.test);
Toolbar tb = (Toolbar)findViewById(R.id.toolBar);
setSupportActionBar(tb);
}
}
And keep your manifest file:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/nliveo_green_colorPrimary</item>
<item name="colorPrimaryDark">#color/nliveo_green_colorPrimaryDark</item>
<item name="colorAccent">#color/nliveo_green_colorPrimary</item>
<item name="android:textColorPrimary">#color/myTextPrimaryColor</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:windowBackground">#color/myWindowBackground</item>
</style>
Hope it helps!!!
You should include toolbar in your layout. Something like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimaryDark"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/textView4" />
</LinearLayout>
Hope it helps you!!
Write getSupportActionBar().setDisplayHomeAsUpEnabled(true); if you are using support library and if not then remove Support just write getActionBar().setDisplayHomeAsUpEnabled(true);
I just started using toolbar instead of actionbar in my android app. But it shows a ridiculous settings button at the bottom of the screen and i couldn't find a way to erase it. Please help me with this.
Here is a screenshot for you to understand the problem:
http://i.stack.imgur.com/x1Gwe.png
Here is my code:
SetContentView(Resource.Layout.Main_Activity_Container);
var toolbar = FindViewById<Toolbar>(Resource.Id.Toolbar);
var toolbarBottom = FindViewById<Toolbar>(Resource.Id.BottomToolbar);
SetSupportActionBar(toolbar);
SupportActionBar.Title = "Hello from Toolbar";
SetSupportProgressBarIndeterminate(false);
toolbarBottom.Title = "";
toolbarBottom.InflateMenu (Resource.Menu.tabs);
toolbarBottom.MenuItemClick += delegate(object sender, Toolbar.MenuItemClickEventArgs e)
{
Toast.MakeText(this,
"Bottom toolbar pressed: " + e.Item.TitleFormatted, duration: ToastLength.Short).Show();
indeterminateVisible = !indeterminateVisible;
SetSupportProgressBarIndeterminateVisibility(indeterminateVisible);
};
axml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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.support.v7.widget.Toolbar
android:id="#+id/Toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/actionBarSize"
android:layout_alignParentTop="true"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:background="?attr/colorPrimary" />
<android.support.v7.widget.Toolbar
android:id="#+id/BottomToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/actionBarSize"
style="#style/HeaderBar"
android:background="?attr/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:layout_alignParentBottom="true" />
<FrameLayout
android:id="#+id/Container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/Toolbar"
android:layout_above="#id/BottomToolbar" />
</RelativeLayout>
styles.xml
<style name="MyTheme" parent ="#style/Theme.AppCompat.Light">
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#2196F3</item>
<item name="colorPrimaryDark">#1976D2</item>
<item name="windowActionModeOverlay">true</item>
<item name="colorAccent">#FF4081</item>
<item name="android:actionMenuTextColor">#24598a</item>
<item name="android:actionButtonStyle">#style/ActionButtonStyle</item>
</style>
<style name="ActionButtonStyle" parent="#style/Widget.AppCompat.ActionButton">
<item name="android:minWidth">70dip</item>
<item name="android:paddingStart">0dip</item>
<item name="android:paddingEnd">0dip</item>
</style>
tabs.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/menu_share"
android:icon="#drawable/icon"
local:showAsAction="always"
android:title="Edit" />
<item android:id="#+id/menu_share"
android:icon="#drawable/icon"
local:showAsAction="always"
android:title="Undo" />
<item android:id="#+id/menu_share"
android:icon="#drawable/icon"
local:showAsAction="always"
android:title="Redo" />
<item android:id="#+id/menu_share"
android:icon="#drawable/icon"
local:showAsAction="always"
android:title="Save" />
I also want to change the positions of these menu items. I know that i can use custom components inside of toolbars but i don't get why these menu items always appear in the right hand side.
Thank you.
I had the same issue, I resolved it by following below steps :
First of all to remove the disgusting settings button at bottom do the following :
In your activity, comment getMenuInflater().inflate(...) :
....
#Override
public boolean onCreateOptionsMenu(Menu menu) {
//getMenuInflater().inflate(R.menu.display_map, menu);
return true;
}
....
This will surely remove settings button from bottom, it did mine.
Now you can create your own menu items as normal views, add as many buttons as you want in your toolbar, whereever you want, see an example :
Toolbar is just a ViewGroup, So, in your toolbar.xml file or whereever you have defined android.support.v7.widget.Toolbar, change as per your requirements of buttons and their positions.
Below shows how to add an button at the center of toolbar, you can change it to your required position :
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/color_toolbar"
android:layout_width="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="button"
android:onClick="buttonHandler"/>
</android.support.v7.widget.Toolbar>