Remove the Padding for Action Bar Menu Item using AppCompat - android

I am Using Overlay Action Bar By Using the Following Style to my Activity
style.xml
<style name="CustomActionBarTheme" parent="#style/Theme.AppCompat" >
<item name="windowActionBarOverlay">true</item>
<item name="android:background">#00f3ead8</item>
<item name="android:windowBackground">#drawable/logo1024</item>
</style>
I have only one menu item that is to be displayed Always
menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:yourapp="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/menusettings"
android:orderInCategory="100"
android:icon="#drawable/settings"
android:title="Menu"
yourapp:showAsAction="always"
/>
<menu>
The Icon i.e the settings.png is getting padded by 8dp
But I want 0 padding on the top and bottom so that it covers the Entire Actionbar
Please Help me out in deep trouble very close to the deadline of the project
Thanks in advance

One year later...
Removing padding on v7.Toolbar's action buttons is still challenging.
After a lot of experimentation here is a working solution, tested on API 15 and up (theoretically should be working > API 7).
First of all, toolbar style (theme) should be applied like so
<android.support.v7.widget.Toolbar
app:theme="#style/AppTheme.Toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
</android.support.v7.widget.Toolbar>
Next, values/styles.xml
<style name="AppTheme.Toolbar" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="actionButtonStyle">#style/AppTheme.Toolbar.ActionButton</item>
</style>
<!-- this will be applied regardless api version -->
<style name="Base.AppTheme.Toolbar.ActionButton" parent="#style/Widget.AppCompat.ActionButton">
<item name="android:minWidth">0dp</item>
<item name="android:minHeight">0dp</item>
</style>
<!-- this will be applied on < API 17 -->
<style name="AppTheme.Toolbar.ActionButton" parent="#style/Base.AppTheme.Toolbar.ActionButton">
<item name="android:padding">0dp</item>
</style>
And the final move, values-v17/styles.xml
<!-- this will be applied on >= API 17 -->
<style name="AppTheme.Toolbar.ActionButton" parent="#style/Base.AppTheme.Toolbar.ActionButton">
<item name="android:paddingStart">0dp</item>
<item name="android:paddingEnd">0dp</item>
</style>

Well your question was about a year ago, but it may help to other peoples.
Check the solution here :
how to add padding between menu items in android?
Setting the padding alone may not help. You must use minWidth attribute too.
I'm using AppCompat too, absolutely works.
<style name="Theme.Styled" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="actionButtonStyle">#style/Widget.Styled.Base.ActionButton</item>
</style>
<style name="Widget.Styled.Base.ActionButton" parent="#style/Widget.AppCompat.Base.ActionButton">
<item name="android:minWidth">20dp</item>
<item name="android:paddingLeft">0dp</item>
<item name="android:paddingRight">15dp</item>
</style>

Related

How to set the background colour of a Popup menu?

Hey everyone I am dealing with a small problem with Popup menu. Honestly I dont know where is the problem, I tried to search the internet if I can find any answers but unfortunatelly I cant. So..
I created a custom toolbar and set the activity to no actionbar. Then I created a popUp menu in this toolbar. First I tried to change the icon of a menu via styles and it worked. But then I wanted to change the background and text color of a menu items.
This is the code I have in my design tab of the menu item:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/fitItem1"
android:title="Item 1"
app:showAsAction="never" />
<item android:id="#+id/fitItem2"
android:title="Item 2"
app:showAsAction="never"/>
<item android:id="#+id/fitItem3"
android:title="Item 3"
app:showAsAction="never"/>
And even in the design menu it looked like this:
But when you start the app it looks by default (white background, black text)
So I thought that is it set somewhere in styles but there is nothing like that and every guide I tried to follow had no effect. Except style name="MyPopBackground" which actully changes the background.
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:actionOverflowButtonStyle">#style/MyActionButtonOverflow</item>
<item name="android:itemTextAppearance">#style/MyApp.PopupMenu</item>
<item name="android:popupBackground">#style/MyPopBackground</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="MyActionButtonOverflow" parent="android:Widget.Holo.Light.ActionButton.Overflow">
<item name="android:src">#drawable/triple_dot_icon</item>
</style>
<style name="MyApp.PopupMenu" parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">#color/colorLightGrey</item>
</style>
<style name="MyPopBackground" parent="android:style/Widget.Holo.Light.ListPopupWindow">
<item name="android:popupBackground">#color/colorGrey</item>
</style>
</resources>
There might be some useless styles but since I didnt know where is the prob. I left them there. My goal is to make that menu look like that one the image showed before.
I would be glad for any help, thanks for help.
Add popupMenu style to your AppTheme
<style name="AppTheme" parent="android:Theme.Light">
<item name="android:popupMenuStyle">#style/PopupMenu</item>
</style>
<style name="PopupMenu" parent="#android:style/Widget.PopupMenu">
<item name="android:popupBackground">#android:color/white</item>
</style>
then at mainifest.xml
<application
android:theme="#style/AppTheme" >
</application>
In style AppTheme, You add <item name="android:itemBackground">#color/colorMenu</item>

How to set the Actionbar action Overflow indicator (three dots) color and splitActionBar?

I am developing an app with the action bar And I wanted to make it split. in action bar I am using toolbar. let me first put some of my code here and let me tell you what I want.
I am setting my toolbar in to Actionbar and here is the xml of my toolbar
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:background="#drawable/header_actionbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/iv_header"
/>
</android.support.v7.widget.Toolbar>
and in main activity I am calling it as below after finding my id of toolbar:
if (toolbar != null) {
setSupportActionBar(toolbar);
}
**
What I want
**
1.Now every thing has set and looking great. but accept the one thing and that is I want to make the text color to white of three dots which shows action, currently they are in black color. How can I change them to white.
2. Secondly I want to show split action bar so I am trying this but it never shows up what could be the reason? All I want a below bar as used in viber app.
For explanation of my app action icon(three dots: which shows action) i have done so many changes to my style but nothing really help , what I have done in it so far is given below :
Style.xml :
<resources>
<style name="myAppTheme" parent="Base.Theme.AppCompat.Light">
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/primaryColorDark</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="windowNoTitle">true</item>
<item name="actionMenuTextColor">#ffffff</item>
<item name="android:actionMenuTextColor">#ffffff</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/white</item>
</style>
<style name="MyActionBar" parent="#style/Widget.AppCompat.ActionBar.Solid">
<item name="titleTextStyle">#style/MyTitleTextStyle</item>
<item name="actionMenuTextColor">#ffffff</item>
<item name="android:actionMenuTextColor">#ffffff</item>
</style>
<style name="MyTitleTextStyle" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="actionMenuTextColor">#ffffff</item>
<item name="android:actionMenuTextColor">#ffffff</item>
</style>
</resources>
Note: My activity extends to appcompactactivity.
In your MyActionBar theme, have these attributes :
<item name="android:textColorSecondary">#color/white</item>
<item name="android:textColorPrimary">#color/white</item>
This worked for me. I hope it does for you too.

Android: status bar not theme on transitiong to new activity

I have create a simple app with 2 activities. Main (launcher) activity is themed properly where colorPrimaryDark is applied to status bar.
But when I transition to new activity, everything seems normal except status bar. It somehow colored white. Any idea why this could be happening?
Running this on OnePlus One (Lollipop 5.0.2)
Target api -> 16+
values/styles.xml
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/PrimaryColor</item>
<item name="colorPrimaryDark">#color/PrimaryDarkColor</item>
<item name="colorAccent">#color/accent</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
values-v21/styles.xml
<style name="AppTheme" parent="AppTheme.Base">
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item name="android:windowSharedElementEnterTransition">#android:transition/slide_bottom</item>
<item name="android:windowSharedElementExitTransition">#android:transition/move</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
layout/activity_settings.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#856"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context=".SettingsActivity">
<include layout="#layout/toolbar" />
</LinearLayout>
Change
<item name="android:statusBarColor">#android:color/transparent</item>
to
<item name="android:statusBarColor">#color/PrimaryDarkColor</item>
Change the api level to 11+, you can find it. change the Theme to DarkActionBar
You might be not needing this anymore but I recently get this issue so maybe this will help others.
I fix it by creating new style in values-v21/styles.xml extending from the AppTheme:
<style name="AppTheme.SolidStatusBar">
<item name="android:statusBarColor">#color/PrimaryDarkColor</item>
</style>
and use this as your new Activity theme in manifest. This way your changes don't have to interfere with activities that need to use translucent status bar like your Main activity.
I have no idea why is this happening though.
In values-v21/styles.xml, change
<item name="android:statusBarColor">#android:color/transparent</item>
to
<item name="android:statusBarColor">#color/colorPrimaryDark</item>

Android: unable to change color of back arrow navigation icon

I'm using new android appcompat toolbar. I need to set the same custom color to both burger icon and back arrow icons. Using drawerArrowStyle allows me to change burger icon but not the arrow. The issue is only on Lollipop devices, anything pre-lollipop is fine.
Here is the code:
Toolbar:
<?xml version="1.0" encoding="utf-8"?>
<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:minHeight="?attr/actionBarSize"
android:background="#color/my_primary"
local:theme="#style/My.Toolbar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
Style.xml:
<style name="Theme.Base" parent="Theme.AppCompat.Light">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#color/my_primary</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#color/black</item>
</style>
<style name="My.Theme" parent="Theme.Base">
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
<style name="My.Toolbar" parent="Theme.AppCompat.NoActionBar">
<!-- color of the title text in the Toolbar, in the Theme.AppCompat theme: -->
<item name="android:textColorPrimary">#color/my_actionbartext</item>
<!-- necessary to support older Android versions.-->
<item name="actionMenuTextColor">#color/my_actionbartext</item>
<item name="android:textColorSecondary">#color/my_actionbartext</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="color">#color/my_actionbartext</item>
</style>
I've tried using solution from here but it didn't work. Anyone has any ideas?
Just do this in your Activity/Fragment:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
getSupportActionBar().setHomeAsUpIndicator(getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha, null));
else
getSupportActionBar().setHomeAsUpIndicator(getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha));
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
The path to the right solution for the problem I found here
However this still didn't 100% work due to our use of DrawerLayout. My colleague wrote an excellent post on the solution here
I am also not able to update back arrow button after upgrading to 23.2.0 support library
<style name="ThemeOverlay.MyApp.ActionBar" parent="ThemeOverlay.AppCompat.ActionBar">
<item name="android:textColorPrimary">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
</style>
It is the color of actionMenuTextColor. Add this line to your theme.
<item name="actionMenuTextColor">your color</item>

AppCompat ToolBar popupTheme not used in the ShareAction MenuItem

Context
Using the AppCompat v7 21.0.0 / 21.0.2 / 21.0.3
Problem
The popupTheme of the ToolBar is not applied to the ShareAction
Style on the toolbar:
<style name="MyActionBarStyle" parent="Widget.AppCompat.Toolbar">
<item name="android:background">#color/green</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">#style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>
The overflow menu item is using the popupTheme properly
The ShareAction on the other hand does not receive the popupTheme. After some testing I noticed it received the app:theme of the ToolBar thus being dark.
<item name="android:colorBackground">#color/white</item>
In order to get the black text on the ShareAction I tried setting many attributes and by setting "android:textColorPrimary" (on the ToolBar theme) I get what I want BUT then my icons on the ToolBar also takes this color which is weird...
The menu xml is the following:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cycle="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/ic_share"
android:icon="#drawable/abc_ic_menu_share_holo_dark"
android:title="#string/media_share"
cycle:showAsAction="ifRoom"
cycle:actionProviderClass="android.support.v7.widget.ShareActionProvider" />
<item
android:icon="#drawable/abc_ic_menu_share_holo_dark"
android:showAsAction="ifRoom"
android:title="br">
<menu>
<item
android:id="#+id/menuSortNewest"
android:title="Sort by newest" />
<item
android:id="#+id/menuSortRating"
android:title="Sort by rating" />
</menu>
</item>
</menu>
I would expect both the ShareAction & the overflow to have the popupTheme but it's not the case
Workaround
I'll edit this post once I got a workaround
Ref: https://code.google.com/p/android/issues/detail?id=87285&thanks=87285&ts=1419254842
So, here's what worked for me.
Here's my 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/action_bar_main"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
app:theme="#style/Toolbar"
app:popupTheme="#style/Toolbar_Popup"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
Notice that I set both theme and popupTheme, and I also override background to be colorPrimary.
Here's the main app theme description with themes for Toolbar:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:actionMenuTextColor">#color/white</item>
<!-- Support library compatibility -->
<item name="actionMenuTextColor">#color/white</item>
<item name="actionBarSize">#dimen/actionbar_height</item>
<item name="colorPrimary">#color/dark_blue</item>
<item name="colorPrimaryDark">#color/dark_blue</item>
<item name="android:textColorPrimary">#607d8b</item>
</style>
<style name="Toolbar" parent="Base.ThemeOverlay.AppCompat.ActionBar">
<item name="android:textColorPrimary">#fff</item>
<item name="android:background">#color/dark_blue</item>
</style>
<style name="Toolbar_Popup" parent="Base.ThemeOverlay.AppCompat.ActionBar">
<item name="android:textColorPrimary">#fff</item>
<item name="android:background">#color/dark_blue</item>
</style>
So, as a result, Share action background is set to the value of background in the main Toolbar theme. And the background of Toolbar itself is overriden.
I was scratching my head for ages trying to solve this. I found a solution to my problem. Hopefuully this will help others also:
In my toolbar definition I was setting a custom theme like so:
<android.support.v7.widget.Toolbar
...
app:theme="#style/ActionBarThemeOverlay"
... />
In my styles.xml, my theme was defined as:
<style name="ActionBarThemeOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColorPrimary">#fff</item>
<item name="colorControlNormal">#fff</item>
<item name="colorControlHighlight">#3fff</item>
</style>
I wanted white action icons in my toolbar, so I was setting these values to white. Unfortunately it was also making my ShareActionProvider menu text white (on a white background).
The solution for me was to remove the style setting for textColorPrimary. My toolbar icons were still white but I now had the desired dark text in the popup share provider menu.
<style name="ActionBarThemeOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="colorControlNormal">#fff</item>
<item name="colorControlHighlight">#3fff</item>
</style>
This page may helps to solve your problem: http://www.murrayc.com/permalink/2014/10/28/android-changing-the-toolbars-text-color-and-overflow-icon-color/
One difference I noticed in your XML is that you once use the property android:showAsAction="ifRoom" and once cycle:showAsAction="ifRoom".

Categories

Resources