This is my menu.xml at the moment
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/action_save"
android:title="Save"
android:icon="#drawable/ic_action_save"
app:showAsAction="ifRoom|withText" />
<item
android:id="#+id/action_delete"
android:title="Delete This"
android:icon="#drawable/ic_action_delete"
app:showAsAction="never"/>
</menu>
However, the spacing between the overflow menu and the main Save button is pretty small. I'd like to add more spacing.
Here is my styles.xml
<resources>
<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- ... -->
<item name="android:actionButtonStyle">#style/MyActionButtonStyle</item>
</style>
<style name="MyActionButtonStyle" parent="Widget.AppCompat.Light.ActionButton">
<item name="android:paddingEnd">100dip</item>
<item name="android:paddingRight">100dip</item>
<item name="android:layout_marginRight">100dip</item>
<item name="android:horizontalSpacing">100dip</item>
</style>
<!-- ... -->
</resources>
Unfortunately, that style has no effect.
The only thing I can get to work is <item name="android:minWidth">300dp</item>. I am using this for now, but the problem is I am going to have various buttons of different widths, so it would be much better if I could set spacing or padding instead of min-width.
Why are all of my padding rules of 100dip not working, and what should I do instead?
Found solution, added following lines in styles.xml file and it worked!!
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:actionButtonStyle">#style/MyActionButtonStyle</item>
</style>
<style name="MyActionButtonStyle" parent="AppBaseTheme">
<item name="android:minWidth">20dip</item>
<item name="android:padding">0dip</item>
</style>
Related
I found many solutions for button styling, but I have a small problem about defining multiple button styles. I am coding a calculator and I want to have different button styles for operation buttons and number buttons. So I had to define 2 different button styles. In my styles.xml file, I added following codes:
<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="buttonStyle">#style/OperationButtons</item>
<item name="buttonStyle">#style/NumberButtons</item>
</style>
<style name="OperationButtons" parent="android:Widget.Button">
<item name="android:background">#263238</item>
<item name="android:paddingTop">15dp</item>
<item name="android:paddingBottom">15dp</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_weight">.2</item>
<item name="android:textColor">#fff</item>
<item name="android:layout_margin">10dp</item>
<item name="android:textSize">18sp</item>
</style>
<style name="NumberButtons" parent="android:Widget.Button">
<item name="android:background">#607D8B</item>
<item name="android:paddingTop">15dp</item>
<item name="android:paddingBottom">15dp</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_weight">.2</item>
<item name="android:textColor">#fff</item>
<item name="android:layout_margin">10dp</item>
<item name="android:textSize">18sp</item>
</style>
</resources>
However, it seems that I'm defining two different button styles and I am getting an error like "Resource entry AppTheme already has bag item buttonStyle."
How can I solve this problem?
The buttonSyle that you define in your AppTheme is the default (so you can have only one).
But you can use the second style in your layouts doing this:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/NumberButtons"/>
Don't forget to remove:
<item name="buttonStyle">#style/NumberButtons</item>
been trying to change the color of the menu items that appear on the Toolbar.
Here is my menu xml
<?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">
<item android:id="#+id/action_settings"
android:title="Settings"
app:showAsAction="never"
android:orderInCategory="100"/>
<item android:id="#+id/always"
android:title="Always"
app:showAsAction="always"
android:orderInCategory="101"/>
<item android:id="#+id/never"
android:title="Never"
app:showAsAction="never"
android:orderInCategory="102"/>
<item android:id="#+id/ifroom"
android:title="If Room"
android:orderInCategory="103"
app:showAsAction="ifRoom"/>
<item android:id="#+id/always1"
android:title="Always1"
app:showAsAction="always"
android:orderInCategory="104"/>
</menu>
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="actionMenuTextColor">#color/white</item>
<item name="android:actionMenuTextColor">#color/white</item>
</style>
</resources>
I've tried using the style options but I cannot figure out how to change the color. The actionMenuTextColor & android:actionMenuTextColor do not solve the problem. It still appears black. Which looks untidy on my blue background.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:background="#color/colorPrimary">
</android.support.v7.widget.Toolbar>
Turns out I was inheriting the wrong theme! This works for me!
Remove this line in styles.xml
<item name="actionMenuTextColor">#color/white</item>
<item name="android:actionMenuTextColor">#color/white</item>
and add this
<item name="android:textColor">#color/red</item>
<item name="android:itemBackground">#color/skyBlue</item>
Complete code :
<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="android:textColor">#color/red</item>
<item name="android:itemBackground">#color/skyBlue</item>
</style>
I am working on popup-menu in actionbar. But I am stuck to display exact below of actionbar(cut-to-cut).I am putting two snapshot.
My issue screen shot:
I want exact popup menu below of actionbar as below screenshot
Correction screenshot:
My code snippet:
<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">
<item android:id="#+id/action_filter"
android:icon="#drawable/ic_filter_white_18dp"
android:title="#string/action_filter"
app:showAsAction="ifRoom" />
<item android:id="#+id/action_label"
android:icon="#drawable/ic_add_circle_outline_white_18dp"
android:title="#string/action_label"
app:showAsAction="ifRoom" />
<item android:id="#+id/action_settings"
android:title="#string/action_settings"
app:showAsAction="never" />
When working with AppCompat Theme, below code help you.Either Kitkat or Lollipop
Make your style.xml like below
<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/black</item>
<item name="android:background">#android:color/transparent</item>
<item name="actionOverflowMenuStyle">#style/OverflowMenu</item>
</style>
<style name="OverflowMenu" parent="Widget.AppCompat.PopupMenu.Overflow">
<item name="android:windowDisablePreview">true</item>
<item name="overlapAnchor">false</item>
<item name="android:dropDownVerticalOffset">5.0dp</item>
<!--<item name="android:popupBackground">#FFF</item>-->
</style>
If you want to keep using ActionBar and AppCompat theme rather than ToolBar or Holo theme, you can use this code:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="actionOverflowMenuStyle">#style/MyOverflowMenu</item>
</style>
<style name="MyOverflowMenu" parent="Widget.AppCompat.PopupMenu.Overflow">
<item name="overlapAnchor">false</item>
<item name="android:overlapAnchor" tools:ignore="NewApi">false</item>
<item name="android:dropDownVerticalOffset">4.0dip</item>
</style>
This worked for me.
As per my code this is exact sotution by changing style.
<style name="AppTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:actionMenuTextColor">#color/text_white</item>
<item name="android:popupMenuStyle">#style/PopupMenu.Example</item>
<item name="actionOverflowMenuStyle">#style/OverflowMenu</item>
</style>
<style name="PopupMenu.Example" parent="#android:style/Widget.Holo.Light.ListPopupWindow">
<item name="android:popupBackground">#efefef</item>
</style>
<style name="OverflowMenu" parent="Widget.AppCompat.PopupMenu.Overflow">
<!-- Required for pre-Lollipop. -->
<item name="overlapAnchor">false</item>
<!-- Required for Lollipop. -->
<item name="android:overlapAnchor">false</item>
<item name="android:dropDownVerticalOffset">4.0dip</item>
</style>
You can achieve this by style property
overlapAnchor= false
<style name="toolBarStyle" parent="AppTheme">
<item name="popupTheme">#style/toolbarPopup</item>
</style>
<style name="toolbarPopup" parent="#android:style/Widget.Holo.ListPopupWindow"> <!--ThemeOverlay.AppCompat.Light-->
<item name="android:popupBackground">#AF0000</item>
<item name="overlapAnchor">false</item>
<item name="android:dropDownVerticalOffset">5dp</item>
</style>
and set that style in AppTheme like below
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- to avoid overlay of popup window in toolbar -->
<item name="actionOverflowMenuStyle">#style/toolBarStyle</item>
</style>
Set the theme at android manifest to
android:theme="#android:style/Theme.Holo.Light"
I have a menu.xml file:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".StudentMarks" >
<item android:id="#+id/action_example"
android:title="#string/action_example"
android:showAsAction="withText|ifRoom"
style="#style/SelectedYear" />
<item android:id="#+id/action_settings"
android:title="#string/action_settings"
android:orderInCategory="100"
android:showAsAction="never" />
</menu>
The item action example has a title that represents the current year (2014).
I can see it in the action bar but i don't know how can I set the size of the year.
I would like to make it bigger.
my styles.xml files
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
<style name="SelectedYear" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:textSize">16sp</item>
</style>
</resources>
use this attribute in xml
android:textAppearance="?android:attr/textAppearanceLarge"
Try change your styles.xml
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:textSize">20sp</item>
</style>
I am using a .png for both my logo and action Bar menu items. I am using the android.Holo.light theme.
Even though I've made the background transparent for both the logo and the menu items, a grey shaded area is still showing behind the .png. How do I change this?
Take a look at my menu XML and my style override XML below.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyTheme" parent="android:Theme.Holo.Light">
<item name="android:selectableItemBackground">#color/transparent</item>
<item name="android:background">#00000000</item>
</style>
<style name="ActionBar" parent="#android:style/Widget.Holo.Light.ActionBar" >
<item name="android:selectableItemBackground">#color/transparent</item>
<item name="android:background">#00000000</item>
</style>
<style name="textTitle"
parent="#android:style/TextAppearance">
<item name="android:textSize">20dp</item>
<item name="android:textColor">#DC0451</item>
<item name="android:textStyle">bold</item>
</style>
<style name="textDescription"
parent="#android:style/TextAppearance">
<item name="android:textSize">15dp</item>
<item name="android:textColor">#666666</item>
</style>
</resources>
Menu xml
<item
android:id="#+id/Category"
android:title="Category"
android:showAsAction="always|withText"
android:icon="#drawable/menuitemselect"
style="#style/ActionBar"
>
<menu>
<item
android:id="#+id/catalog"
android:title="Main Catalog"
android:icon="#drawable/menuitemselect"
android:onClick="catalogClick"
/>
<item android:id="#+id/newvideos"
android:title="New"
android:icon="#drawable/menuitemselect"
android:onClick="newVideoClick"
style="#style/ActionBar"
/>
<item
android:id="#+id/popularvideos"
android:title="Popular"
android:icon="#drawable/menuitemselect"
android:onClick="popularVideoClick"
style="#style/ActionBar"
/>
</menu>
</item>
<item android:id="#+id/backButton"
android:title="Back"
android:showAsAction="ifRoom"
android:icon="#drawable/ic_launcher"
/>
</menu>
Thank you
I found that the issue was with :
<item name="android:selectableItemBackground">#color/transparent</item>.
I added it in an attempt to get rid of default highlight feature. It seems when I have this set, the grey background shows up. When I remove it, it acts as it should.