How to get customized actionbar? - android

i'm just looking for a solution in my simple 1-Activty-Project
How to get the actionbar in android?
if i use the following, everything works but not layouted:
actionBar = getActionBar();
[..] register viewpager, add tabs dynamically etc [...]
I could add layout parameters in java now..
But, i want to to define an .xml like this for my actionbar by function override onCreateOptionsMenu():
#override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main_activity, menu);
return super.onCreateOptionsMenu(menu);
}
main_activity.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/menu_main_activity"
android:icon="#drawable/logo"
android:title="#string/app_name"
android:showAsAction="ifRoom|withText" />
</menu>
If i do this combined i get my actionbar which is doubled... But how to do it the right way?
What am I doing wrong..?

You need to change how it looks by creating a style for it in values/styles like
<style name="MyActionBar" parent="#android:style/Widget.Holo.ActionBar">
<item name="android:background">#drawable/bar</item>
<item name="android:textColor">#drawable/white</item>
</style>
Then create a custom application theme to use the actionbar
<style name="CustomActivityTheme" parent="#android:style/Theme.Holo.Light"> // this is telling the app to use your custom themes for the actionbar
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
or you can use.
ActionBar actionBar = getActionBar();
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setCustomView(v);
after inflating the layout you want to use. Either way, you still override onCreateOptionsMenu() to get the functionality for your menu

Related

android action bar spacing between icons [duplicate]

Is there a way to show Divider between the Menu Items in ActionBar for HoneyComb+.
Some post says that the Divider will be shown only when the menu items has android:showAsAction="withText".
I want to show only the Icon not the Text.
I successfully shown Divider for Pre-HoneyComb by implementing a Action Bar Compatibility.
I dont want to use ActionBarSherlock as given in this post Android actionbar sherlok doesn't show divider because it will be time to change from Action Bar Compatibility to ActionBarSherlock in my all Projects.
When i saw the Android Source i found that Divider will be show only when it has text as shown below (from ActionMenuItemView)
public boolean needsDividerBefore() {
return hasText() && mItemData.getIcon() == null;
}
public boolean needsDividerAfter() {
return hasText();
}
Is there a way that I can give my Implementation for ActionMenuItemView for ActionBar where needsDividerBefore() will always give true
I found an answer by myself with help of http://android-developers.blogspot.in/2011/04/customizing-action-bar.html However, this does not completely solve my problem. It adds a divider for Title, and also one for the home Icon. There are also left and right separators. That too is adjustable.
I added android:selectableItemBackground to my theme.
<item name="android:selectableItemBackground">#drawable/action_bar_item_selector</item>
action_bar_item_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/actionbar_compat_separator"></item>
<item android:left="1dp" android:drawable="#drawable/actionbar_compat_item"></item>
</layer-list>
actionbar_compat_separator - is my seperator drawable
and actionbar_compat_item is my selector for action bar item.
EDITED
I have found a better solution to my problem. It works well.
<item name="android:actionButtonStyle">#style/ActionButton</item> to my Theme
<style name="ActionButton" parent="android:style/Widget.Holo.Light.ActionButton">
<item name="android:background">#drawable/action_bar_item_selector</item>
</style>
You can override existing theme with custom styles, for e.g.
<style name="CustomTheme" parent="android:Theme.Holo.Light">
<item name="android:actionBarStyle">#style/ActionBar</item>
</style>
<style name="ActionBar" parent="android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#color/action_bar_background</item>
<item name="android:showDividers">beginning</item>
<item name="android:divider">#color/action_bar_divider</item>
</style>
Update: This doesn't seem to work for Android 5 Lollipop and above:
This is the best way I found. Just add a group with a dummy item to your menu:
menu.xml
<group>
<!--dummy item to get a nice separator-->
<item
android:title=""
android:showAsAction="always"
android:enabled="false" />
</group>
<item android:id="#+id/action_example"
...
The dummy item has an empty title so it appears invisible, and it's disabled so it can't be clicked.

Black Android ActionBar with Custom Image background

i'm in need to have custom image background with a logo, the problem is that backgound is white. I got it to work with this
<style name="CustomActionBarTheme"
parent="#android:style/Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="#android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:background">#drawable/activity_grey</item>
<item name="actionMenuTextColor">#android:color/black</item>
<item name="android:actionMenuTextColor">#android:color/black</item>
<item name="android:itemTextAppearance">#style/TextAppearance</item>
Now my problem it this: My background color is WHITE and the settings dots on the right top corner are white as well.. How can i change those 3 dots from white color to black??? I spent the weekend trying different solution but nothing worked..
Remember, i need to keep the background image for my acitonBar (which already works) + i need to make that actionBar Settings icon in the dark colors..
Thanks!
ps. my temp workAround is that i'm using Grey background instead so the icon is somewhat visible, but that is not right..
Create a folder under res named menu and create main_menu.xml
<?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/menu_item"
android:icon="#drawable/ic_"
android:title="#string/menu_item"
app:showAsAction="always"/>
</menu>
Download item menu black/grey from here
https://android.googlesource.com/platform/frameworks/base/+/master/core/res/res/
or you can also your own icon and add it in your drawable
and this in main your Main Activity class
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main_menu, menu);
return true;
}
Hope this will help :)
Customize your Theme like this:
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/app_color_Primary</item>
<item name="colorPrimaryDark">#color/app_color_primary_dark</item>
<item name="colorAccent">#color/app_color_accent</item>
</style>
And <item name="colorPrimary">#color/app_color_Primary</item> will render your ActionBar's background.

Styling Sherlock Action Bar drop down items

I've been trying for a while to style the items in a drop down list I added to the Action Bar, but I can't come up with the right code.
I tried looking into the abs__styles.xml and abs__themes.xml in the SherlockActionBar project but none of the items I added to my project worked.
The way I'm creating the menus is the following:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Sharing icons
SubMenu submenu = menu.addSubMenu(null);
submenu.add(getResources().getString(R.string.twitter));
submenu.add(getResources().getString(R.string.facebook));
submenu.add(getResources().getString(R.string.email));
// Share button itself
MenuItem ShareButton = submenu.getItem();
ShareButton.setIcon(R.drawable.icon_share_triangle);
ShareButton.setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS | MenuItem.SHOW_AS_ACTION_WITH_TEXT);
// Twitter submenu button
MenuItem TwitterItem = submenu.getItem(0);
TwitterItem.setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS | MenuItem.SHOW_AS_ACTION_WITH_TEXT);
TwitterItem.setOnMenuItemClickListener(new OnMenuItemClickListener() {
public boolean onMenuItemClick(MenuItem item) {
setShareTwitterIntent();
return true;
}
});
...
}
I also tried taking a look at this post using the following code, but still no luck:
<!-- style the list navigation -->
<style name="MyDropDownNav" parent="android:style/Widget.Holo.Light.Spinner.DropDown.ActionBar">
<item name="android:background">#drawable/ad_spinner_background_holo_light</item>
<item name="android:popupBackground">#drawable/ad_menu_dropdown_panel_holo_light</item>
<item name="android:dropDownSelector">#drawable/ad_selectable_background</item>
</style>
I just need to change the background color of the items in the drop down list.
Thanks a lot for your help!
EDIT:
I also tried this, and it still doesn't work:
<item name="android:actionDropDownStyle">#style/MyApp.DropDownNav</item>
<item name="actionDropDownStyle">#style/MyApp.DropDownNav</item>
...
<style name="MyApp.DropDownNav" parent="Widget.Sherlock.Light.Spinner.DropDown.ActionBar">
<item name="android:background">#drawable/sharing_panel</item>
</style>
I had the same problem and after a lot of head scratching - the sort of scratching like a dog with a bad case of fleas - I got it to work. This is with ABS 4.1 (90). The below code will change the background colour of the drop down item.
SomeActivity.java
Context context = ab.getThemedContext();
ArrayAdapter<CharSequence> list = ArrayAdapter.createFromResource(
context, R.array.map_activity_view_list,
R.layout.sherlock_spinner_item);
list.setDropDownViewResource(R.layout.sherlock_spinner_dropdown_item);
Note: You use R.layout.sherlock_spinner_item for the createFromResource and R.layout.sherlock_spinner_dropdown_item for the setDropDownViewResource.
This is what appears in the sample in the ABS source:
https://github.com/JakeWharton/ActionBarSherlock/blob/master/samples/demos/src/com/actionbarsherlock/sample/demos/ListNavigation.java
This is because the unselected dropdown in the action bar when is the sherlock_spinner_item layout and the actual dropdown items use the sherlock_spinner_dropdown_item layout which means the styles are different for each:
sherlock_spinner_item
android:spinnerItemStyle
spinnerItemStyle
sherlock_spinner_dropdown_item
android:spinnerDropDownItemStyle
spinnerDropDownItemStyle
Remember both styles are needed - android: prefixed styles for for the native ICS ActionBar and the style without the android: prefix is for the AcrionBarSherlock style on devices older than ICS.
res/values/styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.MyApp" parent="Theme.Sherlock.Light">
<!-- the text when loading -->
<!--
<item name="actionBarStyle">#style/Widget.MyApp.ActionBar</item>
<item name="android:actionBarStyle">#style/Widget.MyApp.ActionBar</item>
-->
<!-- the dropdown items -->
<item name="android:spinnerDropDownItemStyle">#style/MyApp.Widget.Holo.DropDownItem</item>
<item name="spinnerDropDownItemStyle">#style/MyApp.Widget.Holo.DropDownItem</item>
<!-- the action bar dropdown menu item -->
<!--
<item name="android:spinnerItemStyle">#style/MyApp.Widget.Holo.SpinnerItem</item>
<item name="spinnerItemStyle">#style/MyApp.Widget.Holo.SpinnerItem</item>
-->
</style>
<style name="Widget.MyApp.ActionBar" parent="Widget.Sherlock.Light.ActionBar">
<item name="titleTextStyle">#style/Widget.MyApp.TitleTextStyle</item>
<item name="android:titleTextStyle">#style/Widget.MyApp.TitleTextStyle</item>
</style>
<style name="Widget.MyApp.TitleTextStyle" parent="TextAppearance.Sherlock.Widget.ActionBar.Title">
<item name="android:textColor">#color/orange</item>
</style>
<style name="MyApp.Widget.Holo.DropDownItem" parent="Widget.Sherlock.Light.DropDownItem.Spinner">
<item name="android:background">#color/orange</item>
</style>
<style name="MyApp.Widget.Holo.SpinnerItem" parent="Widget.Sherlock.TextView.SpinnerItem">
<item name="android:background">#color/orange</item>
</style>
</resources>
res/values/color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="orange">#ffEf4f1f</color>
</resources>
Please mark as answer if this solves it for you. Thanks!
Links:
Browse styles:
https://github.com/JakeWharton/ActionBarSherlock/blob/master/actionbarsherlock/res/values/abs__styles.xml
Browse themes:
https://github.com/JakeWharton/ActionBarSherlock/blob/master/actionbarsherlock/res/values/abs__themes.xml
To change the background drawable of the menu item in Sherlock Action Bar (v4.1.0), use the following:
<style name="My_Theme" parent="Theme.Sherlock">
<item name="android:popupMenuStyle">#style/MyApp.PopupMenuStyle</item>
<item name="popupMenuStyle">#style/MyApp.PopupMenuStyle</item>
</style>
<style name="MyApp.PopupMenuStyle" parent="Widget.Sherlock.ListPopupWindow">
<item name="android:popupBackground">#drawable/menu_item_background</item>
</style>
hope this helps.
i used this, and its work for me
<style name="MyDropDownItem" parent="Widget.Sherlock.Spinner.DropDown.ActionBar">
<item name="android:background">#drawable/spinner_background_holo_light</item>
<item name="android:popupBackground">#color/actionbar_normal</item>
<item name="android:dropDownSelector">#drawable/list_selector_holo_light</item>
</style>
<style name="myTheme" parent="#style/Theme.Sherlock">
...
...
...
<item name="android:actionDropDownStyle">#style/MyDropDownItem</item>
<item name="actionDropDownStyle">#style/MyDropDownItem</item>
</style>
where,
"spinner_background_holo_light" and "list_selector_holo_light" are selectors
and
"actionbar_normal" drawable (image OR color)
I am not sure if this question has been answered in a satisfactory way, but I ran into this problem and did not find an answer that I liked. It seemed like I had a pretty standard configuration of ActionBarSherLock and using the drop down navigation gave me some bad results out of the box. Black text on a black background. I want to make the text white. Here is how I accomplished it:
For starters, my application's base theme extends Theme.Sherlock:
<style name="AppBaseTheme" parent="Theme.Sherlock">
</style>
My actual application theme AppTheme extends my base (I can't remember why I did this at the time, it is likely unnecessary).
<style name="AppTheme" parent="AppBaseTheme">
<item name="spinnerItemStyle">#style/SpinnerItemStyle</item>
<item name="android:spinnerItemStyle">#style/SpinnerItemStyle</item>
</style>
I needed to override Widget.Sherlock.TextView.SpinnerItem and so as below:
<style name="SpinnerItemStyle" parent="Widget.Sherlock.TextView.SpinnerItem">
<item name="android:textAppearance">#style/TextAppearance.MySpinnerItem</item>
</style>
The reason for doing this was to access the TextApperance widget: TextAppearance.Sherlock.Widget.TextView.SpinnerItem
This was overridden as below:
<style name="TextAppearance.MySpinnerItem" parent="TextAppearance.Sherlock.Widget.TextView.SpinnerItem">
<item name="android:textColor">#FFFFFF</item>
<item name="android:textSize">16sp</item>
<item name="android:textStyle">normal</item>
</style>
My biggest mistake in tying to get the text in trying to fix this was trying to directly set textColor in the overridden SpinnerItemStyle. Since it used a textAppearance widget, it was just not working.
Then my code to make this work looks like this (in my activity's onCreate method):
SpinnerAdapter spinnerAdapter = ArrayAdapter.createFromResource(this,
R.array.call_type, R.layout.sherlock_spinner_item);
OnNavigationListener onNavigationListener = new OnNavigationListener() {
// Get the same strings provided for the drop-down's ArrayAdapter
String[] strings = getResources().getStringArray(R.array.call_type);
#Override
public boolean onNavigationItemSelected(int position, long itemId) {
String filter = strings[position];
filterCalls(filter);
return true;
}
};
ActionBar actionBar = getSupportActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
actionBar.setListNavigationCallbacks(spinnerAdapter,
onNavigationListener);
This allowed my to change the color of the text, on the spinner drop down using ActionBarSherlock.
ActionBarSherlock requires you to use one of its 3 themes. You can extend them though, and override the dropdown style, like this:
<style name="MySherlockLightTheme" parent="Theme.Sherlock.Light">
<item name="actionDropDownStyle">#style/MyDropDownNav</item>
</style>
This is assuming you want the holo light theme, and your dropdown style is MyDropDownDav.
Then in your code, you just switch to use your theme (either in the manifest, or do it in Activity's onCreate).

ActionBar MenuItem Divider

Is there a way to show Divider between the Menu Items in ActionBar for HoneyComb+.
Some post says that the Divider will be shown only when the menu items has android:showAsAction="withText".
I want to show only the Icon not the Text.
I successfully shown Divider for Pre-HoneyComb by implementing a Action Bar Compatibility.
I dont want to use ActionBarSherlock as given in this post Android actionbar sherlok doesn't show divider because it will be time to change from Action Bar Compatibility to ActionBarSherlock in my all Projects.
When i saw the Android Source i found that Divider will be show only when it has text as shown below (from ActionMenuItemView)
public boolean needsDividerBefore() {
return hasText() && mItemData.getIcon() == null;
}
public boolean needsDividerAfter() {
return hasText();
}
Is there a way that I can give my Implementation for ActionMenuItemView for ActionBar where needsDividerBefore() will always give true
I found an answer by myself with help of http://android-developers.blogspot.in/2011/04/customizing-action-bar.html However, this does not completely solve my problem. It adds a divider for Title, and also one for the home Icon. There are also left and right separators. That too is adjustable.
I added android:selectableItemBackground to my theme.
<item name="android:selectableItemBackground">#drawable/action_bar_item_selector</item>
action_bar_item_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/actionbar_compat_separator"></item>
<item android:left="1dp" android:drawable="#drawable/actionbar_compat_item"></item>
</layer-list>
actionbar_compat_separator - is my seperator drawable
and actionbar_compat_item is my selector for action bar item.
EDITED
I have found a better solution to my problem. It works well.
<item name="android:actionButtonStyle">#style/ActionButton</item> to my Theme
<style name="ActionButton" parent="android:style/Widget.Holo.Light.ActionButton">
<item name="android:background">#drawable/action_bar_item_selector</item>
</style>
You can override existing theme with custom styles, for e.g.
<style name="CustomTheme" parent="android:Theme.Holo.Light">
<item name="android:actionBarStyle">#style/ActionBar</item>
</style>
<style name="ActionBar" parent="android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#color/action_bar_background</item>
<item name="android:showDividers">beginning</item>
<item name="android:divider">#color/action_bar_divider</item>
</style>
Update: This doesn't seem to work for Android 5 Lollipop and above:
This is the best way I found. Just add a group with a dummy item to your menu:
menu.xml
<group>
<!--dummy item to get a nice separator-->
<item
android:title=""
android:showAsAction="always"
android:enabled="false" />
</group>
<item android:id="#+id/action_example"
...
The dummy item has an empty title so it appears invisible, and it's disabled so it can't be clicked.

Android 3.0: cannot style Action Bar 's action item buttons

Here is the dev guide related to the subject http://developer.android.com/guide/topics/ui/actionbar.html#ActionItems
So we have in activity
public class MyActivity extends Activity {
#Override
public boolean onCreateOptionsMenu(Menu menu)
{
super.onCreateOptionsMenu(menu);
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.my_menu, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item)
{
switch (item.getItemId())
{
case R.id.first_menu_button:
return true;
case R.id.second_menu_button:
return true;
default:
return super.onOptionsItemSelected(item);
}
}
Where R.menu.my_menu is
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/first_menu_button"
android:showAsAction="always"
android:icon="#drawable/btn_first"/>
<item
android:id="#+id/second_menu_button"
android:showAsAction="always"
android:icon="#drawable/btn_second"/>
</menu>
To style that buttons http://developer.android.com/guide/topics/ui/actionbar.html#ActionItemStyles say we should use android:actionButtonStyle attribute. I've done it like this:
In manifest:
<activity android:name="com.root.test.MyActivity"
android:theme="#style/CustomActionBarStyle"
</activity>
In styles.xml:
<style name="CustomActionBarStyle" parent="#android:style/Theme.Holo.Light">
<item name="android:actionButtonStyle">#style/customActionButtonStyle</item>
<item name="android:windowActionBar">true</item>
<item name="android:windowNoTitle">false</item>
</style>
<style name="customActionButtonStyle" parent="#android:style/Widget.Holo.Light.ActionButton">
<item name="android:[...]
</style>
Problem is that whatever I write in customActionButtonStyle, it's just ignoring it. Other atributes in CustomActionBarStyle works (even more complicated, they are jast omit for the sake of simplicity). My main purpuse was to set custom padding. Is there any other way to do that, like some other, not android:actionButtonStyle attribute? Or some one knows how to get this work? (android:abItemPadding attribute added only in 3.1)
Thanks.
If you wanna change text parametres like text size, color or style, you must use actionMenuTextAppearance. Here is my code for ActionBarSherlock:
<item name="actionMenuTextAppearance">#style/MyProject.ActionMenuTextAppearance</item>
<item name="android:actionMenuTextAppearance">#style/MyProject.ActionMenuTextAppearance</item>
...
<style name="MyProject.ActionMenuTextAppearance" parent="TextAppearance.Sherlock.Widget.ActionBar.Menu">
<item name="android:textSize">15sp</item>
<item name="android:textStyle">normal</item>
<item name="android:textAllCaps">false</item>
</style>
EDIT: This is my template for styling action bar with ActionBarSherlock: https://github.com/petrnohejl/Android-Templates-And-Utilities/tree/master/Res-Theme-Holo-Deprecated
Most style elements will work but padding is supplied by the system layouts used to generate the action buttons and likely will not do what you expect. Most action bar metrics such as padding and margins should generally be left alone for UX consistency. Even the item padding attribute you noted is meant to be informational for apps that may want to use it to style their own custom action views.

Categories

Resources