v7 Toolbar OptionsMenu Item to far right - how to add margin - android

I am using the android.support.v7.widget.Toolbar in my activity.
I added it into my layout for the activity as following:
<RelativeLayout 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/add_contact_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#color/colorPrimary"
android:elevation="6dp"
android:title="#string/add_contact_toolbar_title"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</RelativeLayout>
I inflate the options menu in onCreateOptionsMenu of the activity and I
inflate my menu.xml :
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/add_contact_optionmenu_save"
android:title="#string/add_contact_optionmenu_save"
app:showAsAction="always"/>
</menu>
But unfortunately, the item appears way too far right and is too small:
How can I make it to appear like in all other apps? Bigger, and with more
right margin?
Cheers!

Well to move the MenuItem to a bit left from the right edge, you need to set paddingRight attribute to the android.support.v7.widget.Toolbar.
android:paddingRight="20dp"
To change the size, add the following style <item> to your App Theme.
<item name="actionMenuTextAppearance">#style/ActionBar.MenuTextStyle</item>
<item name="android:actionMenuTextAppearance">#style/ActionBar.MenuTextStyle</item>
<style name="ActionBar.MenuTextStyle"
parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textSize">48dp</item>
</style>
All this being said, a better design pattern is simply to go ahead and follow the Material Design guidelines. I would suggest you have an icon for save rather than the text.

Related

Menu with Text only not showing in Toolbar

I have to show back icon, Logo and text (Next) in Toolbar. Next is right aligned. I tried placing text via menu. I have set logo and back button to toolbar.
toolbar.setLogo(R.mipmap.logo);
toolbar.setNavigationIcon(R.mipmap.back);
Also, I have inflated following menu in onCreateOptionsMenu
Menu inflated:
<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/action_next"
android:title="#string/next"
app:showAsAction="always" />
Text Menu is not visible at all. if I put icon in menu item, it gets displayed.
I have used android.support.v7.widget.Toolbar.
Edited:
I solved it. In case someone else gets struck with such issue.
Please add
<item name="android:actionMenuTextColor">#color/blue</item>
in styles. Menu itemw as getting selected on click but was not visible, means it was showing white text color on white toolbar. Setting menuText color solved my problem.
Android Documentation explains that the withText option for showAsAction will
Also include the title text (defined by android:title) with the action item.
Since that is what you want, code the following.
<item
android:id="#+id/action_next"
android:title="#string/next"
app:showAsAction="always|withText" />
You can do something like this:
First, remove default title in your Activity:
getSupportActionBar().setDisplayShowTitleEnabled(false);
Then, your toolbar layout can be like this:
<LinearLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/material_blue"
android:elevation="5dp"
android:minHeight="?attr/actionBarSize" >
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:gravity="end"
android:text="#string/app_name"
android:textColor="#android:color/white" />
</android.support.v7.widget.Toolbar>
</LinearLayout>
And, in your activity handle the click event:
toolbarTop.findViewById(R.id.toolbar_title).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Log.d(TAG,"Clicked");
}
});
Try Changing to support widget. This worked for me
app:actionViewClass="android.support.v7.widget.SearchView"
This what it looked after the change
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<item android:id="#+id/search"
android:title="#string/search_title"
android:icon="#drawable/ic_search"
app:showAsAction="always|withText"
app:actionViewClass="android.support.v7.widget.SearchView"
tools:context=".AppHome.HomeActivity"/>
</menu>
If you are getting an empty action with no text but blank space in it,
it might happen if you have created your own tool bar in the layout and have also used the Action bar in your theme's parent.
If you are creating your own toolbar then use parent="Theme.MaterialComponents.DayNight.NoActionBar" in your themes, both normal and night themes.
It's happening because of the style used in your layout.
To solve this, define a new style and use it in your layout.
<style name="ToolBarStyle" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar">
<item name="android:itemBackground">#fff</item> // background color of the menus
<item name="android:textColor">#000</item>// text color of the menus
</style>
Use it like this in your layout
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/ToolBarStyle"
app:popupTheme="#style/ThemeOverlay.MaterialComponents.Light"
android:background="#color/primary_pink"
android:minHeight="?attr/actionBarSize"
android:elevation="4dp"
/>

How to align items in an android-toolbar?

How can I align items of a toolbar to the left, middle and right? Everytime I inflate the menu from my toolbar_menu.xml it loads the icons to the far right. How can I put them in the order I want? I am using an standalone toolbar at the bottom of the screen.
I Have an AXML which holds the toolbar.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarMenuMain"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#CC2827"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:layout_alignParentBottom="true"/>
My Main activity:
mToolbarMenu = FindViewById<SupportToolbar> (Resource.Id.toolbarMenuMain);
mToolbarMenu.InflateMenu(Resource.Menu.toolbarMenu);
mToolbarMenu.MenuItemClick += mToolbarMenu_MenuItemClick;
And the toolbar_menu.xml.
<?xml version="1.0" encoding="utf-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:myapp="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/action_home"
android:icon="#drawable/ic_directions_car_white_24dp"
android:title="Home"
android:layout_gravity="left"
myapp:showAsAction="always"/>
<item android:id="#+id/action_Shop"
android:icon="#drawable/ic_store_mall_directory_white_24dp"
android:title="Shop"
android:layout_gravity="center"
myapp:showAsAction="always"/>
<item android:id="#+id/action_Map"
android:icon="#drawable/ic_map_white_24dp"
android:title="Maps"
android:layout_gravity="right"
myapp:showAsAction="always"/>
</menu>
The layoutDirection attribute should be added to the toolbar tag.
for examle:
android:layoutDirection="rtl"
If you want to align items of a toolbar to the left, middle and right, you need to create seperate layout for it. because in menus you don't have any option to change the position, they will always come on right of the screen. You can use custom layout and inflate it in the tool bar.
please refer - Add custom layout to toolbar

How can I add a custom item to a NavigationView with a menu layout?

I've been experimenting with simplifying some navigation drawer code by making use of the new NavigationView class in the Android design support library. It works great if you just want icons on the left, and text on the right like in the example in the documentation, but what if I want to add a single custom view to the layout which has an android.support.v7.widget.SwitchCompat like in the Google Play Movies app (see screenshot below)?
I've tried using the actionLayout attribute to specify a custom layout file like in the example code below, however that attribute appeared to be ignored as it didn't work.
res/menu/navigation_drawer.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:id="#+id/group1"
android:checkableBehavior="single">
<item
android:id="#+id/nav_screen1"
android:icon="#drawable/ic_list_black_24dp"
android:title="Screen 1" />
<item
android:id="#+id/nav_screen2"
android:icon="#drawable/ic_search_black_24dp"
android:title="Screen2"/>
</group>
<group android:id="#+id/group2">
<item
android:id="#+id/nav_custom"
android:icon="#drawable/custom_icon_24dp"
app:actionLayout="#layout/nav_drawer_switch"
android:title="Custom item with switch"/>
<item
android:id="#+id/nav_settings"
android:icon="#drawable/ic_settings_black_24dp"
android:title="Settings"/>
</group>
</menu>
res/layout/nav_drawer_switch.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.SwitchCompat
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:text="Custom item with switch"/>
</LinearLayout>
How can I get this to work? Ideally I'd like to add the custom view while still making use of my Menu layout, but if that's not possible without using a crude hack (like tapping into an existing layout generated by the support library) then I'd like to know the solution with the least amount of code, and which still makes it worth transitioning to NavigationView.
The actionLayout attribute is now supported in Android Support Library 23.1:
NavigationView provides a convenient way to build a navigation drawer, including the ability to creating menu items using a menu XML file. We’ve expanded the functionality possible with the ability to set custom views for items via app:actionLayout or using MenuItemCompat.setActionView().
So the code in the question should just work now.
NavigationView is a subclass of FrameLayout, which can have multiple children:
You can, however, add multiple children to a FrameLayout and control
their position within the FrameLayout by assigning gravity to each
child, using the android:layout_gravity attribute.
That means you can add a custom view to your NavigationView:
<android.support.design.widget.NavigationView
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/side_menu">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_gravity="bottom">
<android.support.v7.widget.SwitchCompat
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="night_mode"/>
</LinearLayout>
</android.support.design.widget.NavigationView>
I had the same problem and found that NavigationView behaves differently depending on:
Whether you set the android:title and android:icon attributes on item or not
What kind of view your action layout contains (e.g. TextView or others)
Not setting the attributes worked for completely customizing the item:
<?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:showIn="navigation_view">
<item
android:id="#+id/nav_custom"
android:title="#null"
app:actionLayout="#layout/nav_drawer_switch" />
</menu>
(Note that you can also just not set android:title, but that results in a warning in Android Studio.)
The result:
(This is with version 27.1.1 of com.android.support:design, not sure about other versions.)
create a layout with switchcompat and mention it in menu item as
<item android:id="#+id/notification"
android:title="Notification"
app:actionLayout="#layout/notify" />`
then notify layout add this
<android.support.v7.widget.SwitchCompat
android:id="#+id/switch_compat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:checked="false"
android:onClick="notify"/>
onclick is the keyPoint,implement handler in your Activity,then it will work.
You might want to take a look at this library: https://github.com/mikepenz/MaterialDrawer. It makes it easy to use Navigation Drawer and it supports custom views.

ActionBar menuItem not showing text

I have a menu layout with only one item in it.
<?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/toolbar_right_button"
android:icon="#drawable/ic_toolbar_locked"
android:orderInCategory="1"
android:title="Logout"
app:showAsAction="always|withText"/>
</menu>
As you can see I've included the withText attribute but I still only get the icon.
How can I get both the icon and text to show?
I agree with your answer, but I had to do some digging to get it to work in my code, ultimately, I had to create an onClickListener for the button.
In my code, I wrote in the onCreateOptionsMenu(Menu menu) method:
menu.getItem(indexInMenu).getActionView().findViewById(R.id.button_logout).setOnClickListener(...);
This makes the menuItem responsive when it's replaced with a button in app:actionLayout
I'm not sure why withText wouldn't work for me so I just created an actionLayout to use instead.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/toolbar_right_button"
android:icon="#drawable/ic_toolbar_locked"
android:orderInCategory="1"
android:title="Logout"
app:actionLayout="#layout/menu_item_logout"
app:showAsAction="ifRoom|withText"/>
</menu>
and the actionLayout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/logout_button"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableRight="#drawable/ic_toolbar_locked"
android:gravity="center_vertical"
android:text="Logout"
android:textColor="#color/PrimaryColour"/>
</RelativeLayout>
I have try your menu xml, and it worked on android 4.1.1, 5.0.0
but it not worked on 4.3
to fix this, please refer to How to get text on an ActionBar Icon?
it use custom layout for the item
You could try:
<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=".MainActivity" >
<!-- "Mark Favorite", should appear as action button if possible -->
<!-- Settings, should always be in the overflow -->
<item
android:title="Settings"
android:id="#+id/mainMenu"
android:icon="#drawable/ic_3d_rotation_black_24dp"
app:showAsAction="always">
<menu>
<item
android:id="#+id/menu_logout1"
android:icon="#drawable/ic_3d_rotation_black_24dp"
android:title="logout1"/>
<item
android:id="#+id/menu_logout3"
android:icon="#drawable/ic_3d_rotation_black_24dp"
android:title="logout3"/>
</menu>
</item>
<item
android:id="#+id/menu_logout2"
android:icon="#drawable/ic_3d_rotation_black_24dp"
android:title="logout2"
app:showAsAction="always"/>
</menu>
Note, that this example will also paint some icons, so if you don´t want the icons, just remove the icon attribute.
Remove icon from <item
android:icon="#drawable/ic_baseline_add_24"
Remove this line then it will show hope it worked for u
When the text in your toolbar menu items is not showing, this is probably related to your style settings. For example, when you have organized your style in a way that app title in toolbar is shown in white color, your menu items may become white on white.
To solve this, you need to set two attributes to your toolbar:
This is the general Style for the toolbar. Textcolor is white. Maybe you are using something like this when you are facing the "no text"-issue
<style name="ToolBarStyle" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar">
<item name="android:textColorPrimary">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
</style>
To make sure that text in menu is showing, not only set the app:theme of your toolbar but also the app:popuptheme. In this example popuptheme is set to a light theme because this leads to black text.
<androidx.appcompat.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#color/supplyon_blue"
app:theme="#style/ToolBarStyle"
app:popupTheme="#style/ThemeOverlay.MaterialComponents.Light"
android:id="#+id/toolbar" />
Play around with this setting and it will probably solve your problem.

Padding between ActionBar's home icon and title

Does anybody know how to set padding between the ActionBar's home icon and the title?
EDIT: make sure you set this drawable as LOGO, not as your app icon like some of the commenters did.
Just make an XML drawable and put it in the resource folder "drawable" (without any density or other configuration).
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="#drawable/my_logo"
android:right="10dp"/>
</layer-list>
The last step is to set this new drawable as logo in your manifest (or on the Actionbar object in your activity)
Good luck!
I adapted Cliffus answer and assigned the logo-drawable in my actionbar style definition, for instance like this in res/style.xml:
<item name="android:actionBarStyle">#style/MyActionBar</item>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#3f51b5</item>
<item name="android:titleTextStyle">#style/ActionBar.TitleText</item>
<item name="android:textColor">#fff</item>
<item name="android:textSize">18sp</item>
<item name="android:logo">#drawable/actionbar_space_between_icon_and_title</item>
</style>
The drawable looks like Cliffus' one (here with the default app launcher icon) in res/drawable/actionbar_space_between_icon_and_title.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/ic_launcher"
android:right="20dp"/>
</layer-list>
In the android_manifest.xml you can still set a different app icon (launcher icon on 'desktop'. Any different logo definition here are visible in activities without an action bar.
I also faced a similar issue, in my case I had to set titles dynamically on each activity depending on the content.
So this worked for me.
actionBar.setTitle(" " + yourActivityTitle);
If all you want is the spacing, this is the easiest solution I could think of.
This is how I was able to set the padding between the home icon and the title.
ImageView view = (ImageView)findViewById(android.R.id.home);
view.setPadding(left, top, right, bottom);
I couldn't find a way to customize this via the ActionBar xml styles though. That is, the following XML doesn't work:
<style name="ActionBar" parent="android:style/Widget.Holo.Light.ActionBar">
<item name="android:titleTextStyle">#style/ActionBarTitle</item>
<item name="android:icon">#drawable/ic_action_home</item>
</style>
<style name="ActionBarTitle" parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textSize">18sp</item>
<item name="android:paddingLeft">12dp</item> <!-- Can't get this padding to work :( -->
</style>
However, if you are looking to achieve this through xml, these two links might help you find a solution:
https://github.com/android/platform_frameworks_base/blob/master/core/res/res/values/styles.xml
(This is the actual layout used to display the home icon in an action bar)
https://github.com/android/platform_frameworks_base/blob/master/core/res/res/layout/action_bar_home.xml
This is a common question in Material Design as you may want to line your toolbars title with the content in the fragment below. To do this, you can override the default padding of "12dp" by using the attribute contentInsetStart="72dp" in your toolbar.xml layout as shown below
toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<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_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/app_theme_color"
app:contentInsetStart="72dp"/>
Then in your activity, call
Toolbar toolbar = (Toolbar) activity.findViewById(R.id.toolbar);
toolbar.setTitle("Title Goes Here");
And you end up with this:
If you are using toolbar from AppCompat (android.support.v7.widget.Toolbar, >= revision 24, June 2016), the padding between the icon and the title can be changed with the following value :
app:contentInsetStartWithNavigation="0dp"
To improve my answer, you can use it on your toolbar directly inside your activity or you can create a new layout file for your toolbar. In this case, you just have to import your toolbar's #id using the include property on each needed views.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp">
</android.support.v7.widget.Toolbar>
You can then import your layout on your activity.xml
<include
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
For me only the following combination worked, tested from API 18 to 24
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
where in "app" is : xmlns:app="http://schemas.android.com/apk/res-auto"
for example.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/SE_Life_Green"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
>
.......
.......
.......
</android.support.v7.widget.Toolbar>
Using titleMarginStart works for me. Xamarin example:
<android.support.v7.widget.Toolbar
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="?attr/colorPrimary"
app:titleMarginStart="24dp"/>
Set the logo like so:
mToolbar = FindViewById<SupportToolbar>(Resource.Id.toolbar);
SetSupportActionBar(mToolbar);
SupportActionBar.SetLogo(Resource.Drawable.titleicon32x32);
SupportActionBar.SetDisplayShowHomeEnabled(true);
SupportActionBar.SetDisplayUseLogoEnabled(true);
SupportActionBar.Title = "App title";
I used \t before the title and worked for me.
Im using a custom image instead of the default title text to the right of my apps logo. This is set up programatically like
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setDisplayUseLogoEnabled(true);
actionBar.setCustomView(R.layout.include_ab_txt_logo);
actionBar.setDisplayShowCustomEnabled(true);
The issues with the above answers for me are #Cliffus's suggestion does not work for me due to the issues others have outlined in the comments and while #dushyanth programatic padding setting may have worked in the past I would think that the fact that the spacing is now set using android:layout_marginEnd="8dip" since API 17 manually setting the padding should have no effect. See the link he posted to git to verify its current state.
A simple solution for me is to set a negative margin on my custom view in the actionBar, like so android:layout_marginLeft="-14dp". A quick test shows it works for me on 2.3.3 and 4.3 using ActionBarCompat
Hope this helps someone!
I solved this problem by using custom Navigation layout
Using it you can customize anything in title on action bar:
build.gradle
dependencies {
compile 'com.android.support:appcompat-v7:21.0.+'
...
}
AndroidManifest.xml
<application
android:icon="#drawable/ic_launcher"
android:label="#string/app_name">
<activity
android:name=".MainActivity"
android:theme="#style/ThemeName">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
styles.xml
<style name="ThemeName" parent="Theme.AppCompat.Light">
<item name="actionBarStyle">#style/ActionBar</item>
<item name="android:actionBarStyle" tools:ignore="NewApi">#style/ActionBar</item>
<style name="ActionBar" parent="Widget.AppCompat.ActionBar">
<item name="displayOptions">showCustom</item>
<item name="android:displayOptions" tools:ignore="NewApi">showCustom</item>
<item name="customNavigationLayout">#layout/action_bar</item>
<item name="android:customNavigationLayout" tools:ignore="NewApi">#layout/action_bar</item>
<item name="background">#color/android:white</item>
<item name="android:background">#color/android:white</item>
action_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/action_bar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:drawableLeft="#drawable/ic_launcher"
android:drawablePadding="10dp"
android:textSize="20sp"
android:textColor="#android:color/black"
android:text="#string/app_name"/>
I had a similar issue but with spacing between the up and the custom app icon/logo in the action bar. Dushyanth's solution of setting padding programatically worked for me (setting padding on app/logo icon). I tried to find either android.R.id.home or R.id.abs__home (ActionBarSherlock only, as this ensures backwards compatibility), and it seems to work across 2.3-4.3 devices I've tested on.
For my case, it was with Toolbar i resolved it like this:
ic_toolbar_drawble.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/ic_toolbar"
android:right="-16dp"
android:left="-16dp"/>
</layer-list>
In my Fragment, i check the api :
if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
toolbar.setLogo(R.drawable.ic_toolbar);
else
toolbar.setLogo(R.drawable.ic_toolbar_draweble);
Good luck!
You can change drawableSize of your DrawerArrow like this:
<style name="MyTheme" parent="android:Theme.WithActionBar">
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="barLength">24dp</item>
<item name="arrowShaftLength">24dp</item>
<item name="arrowHeadLength">10dp</item>
<item name="drawableSize">42dp</item> //this is your answer
</style>
It isn't correct answer, because you can't choose padding side and DrawerArrow icon scaling when change drawableSize (drawableSize = width = height). But you can margin from left. To margin from right do
findViewById(android.R.id.home).setPadding(10, 0, 5, 0);
I used this method setContentInsetsAbsolute(int contentInsetLeft, int contentInsetRight) and it works!
int padding = getResources().getDimensionPixelSize(R.dimen.toolbar_content_insets);
mToolbar.setContentInsetsAbsolute(padding, 0);
When you are using a custom Toolbar, you can use
toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle(R.string.activity_title);
setSupportActionBar(toolbar);
getSupportActionBar().setLogo(R.drawable.logo);
and in your toolbar layout simply set app:titleMarginStart="16dp"
Note that you have to set the icon as a logo, don't use getSupportActionBar().setIcon(R.drawable.logo)
instead use:
getSupportActionBar().setLogo(R.drawable.logo)
I used AppBarLayout and custom ImageButton do to so.
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
android:background="#android:color/transparent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/selector_back_button"
android:layout_centerVertical="true"
android:layout_marginLeft="8dp"
android:id="#+id/back_button"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
My Java code:
findViewById(R.id.appbar).bringToFront();
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
final ActionBar ab = getSupportActionBar();
getSupportActionBar().setDisplayShowTitleEnabled(false);
You can achieve same by method as well:
Drawable d = new InsetDrawable(getDrawable(R.drawable.nav_icon),0,0,10,0);
mToolbar.setLogo(d);
In your XML, set the app:titleMargin in your Toolbar view as following:
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:titleMarginStart="16dp"/>
Or in your code:
toolbar.setTitleMargin(16,16,16,16); // start, top, end, bottom
Just include:
app:titleMargin="10dp"
Within your xml file, like:
<androidx.appcompat.widget.Toolbar
android:id="#+id/tbrMain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:titleMargin="10dp"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme" />
this work for me to add padding to the title and for ActionBar icon i have set that programmatically.
getActionBar().setTitle(Html.fromHtml("<font color='#fffff'> Boat App </font>"));
<string name="app_name">" "Brick Industry</string>
Just add " " for your app name
It will add space between icon and title

Categories

Resources