Styling ActionBar Sherlock - android

I'm trying to customize my sherlock action bar, but nothing that I code in my style.xml is recognized.
In my manifest file:
android:theme="#style/Theme.Sherlock"
My style.xml:
<resources>
<style name="Theme.MyAppTheme" parent="Theme.Sherlock">
<item name="android:actionBarStyle">#style/Theme.MyAppTheme.ActionBar</item>
</style>
<style name="Theme.MyAppTheme.ActionBar" parent="Widget.Sherlock.ActionBar">
<item name="android:background">#222222</item>
<item name="android:height">64dip</item>
<item name="android:titleTextStyle">#style/Theme.MyAppTheme.ActionBar.TitleTextStyle</item>
</style>
<style name="Theme.MyAppTheme.ActionBar.TitleTextStyle" parent="TextAppearance.Sherlock.Widget.ActionBar.Title">
<item name="android:textColor">#fff</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">32sp</item>
</style>
I'm calling my actionbar this way:
public class MainActivity extends SherlockActivity {
com.actionbarsherlock.app.ActionBar actionbar;
...
actionbar = getSupportActionBar();
... }
There is no problem in showing the actionbar, but the same does not show any customization coded in style.xml, can someone help me? Thankful.

It's because you are applying the same original style in the manifest file android:theme="#style/Theme.Sherlock" which doesn't make any difference. You have prepared the custom style with name Theme.MyAppTheme, having parent as Theme.Sherlock. So, you need to declare your customized style(Theme.MyAppTheme) in your manifest file like android:theme="#style/Theme.MyAppTheme". Even you have to include without android prefix attributes too like below as the other answerer also said. Hope this helps. Even you can refer this too.
<style name="Theme.MyAppTheme" parent="Theme.Sherlock.Light">
<item name="android:actionBarStyle">#style/Theme.MyAppTheme.ActionBar</item>
<item name="actionBarStyle">#style/Theme.MyAppTheme.ActionBar</item>
</style>
<style name="Theme.MyAppTheme.ActionBar" parent="Widget.Sherlock.ActionBar">
<item name="android:background">#222222</item>
<item name = "background">#222222</item>
<item name="android:height">64dip</item>
<item name="height">64dip</item>
<item name="android:titleTextStyle">#style/Theme.MyAppTheme.ActionBar.TitleTextStyle</item>
<item name="titleTextStyle">#style/Theme.MyAppTheme.ActionBar.TitleTextStyle</item>
</style>
<style name="Theme.MyAppTheme.ActionBar.TitleTextStyle" parent="TextAppearance.Sherlock.Widget.ActionBar.Title">
<item name="android:textColor">#fff</item>
<item name="textColor">#fff</item>
<item name="android:textStyle">bold</item>
<item name="textStyle">bold</item>
<item name="android:textSize">32sp</item>
<item name="textSize">32sp</item>
</style>

Use this and you don't need to create your own style
Action Bar Style Generator

This:
<item name="android:actionBarStyle">#style/Theme.MyAppTheme.ActionBar</item>
is for the default ActionBar, notice the 'android:'.
You have to style it like this:
<resources>
<style name="Theme.MyAppTheme" parent="Theme.Sherlock">
<item name="android:actionBarStyle">#style/Theme.MyAppTheme.ActionBar</item>
<item name="actionBarStyle">#style/Theme.MyAppTheme.ActionBar</item>
</style>
<style name="Theme.MyAppTheme.ActionBar" parent="Widget.Sherlock.ActionBar">
<item name="android:background">#222222</item>
<item name="android:height">64dip</item>
<item name="background">#222222</item>
<item name="height">64dip</item>
<item name="android:titleTextStyle">#style/Theme.MyAppTheme.ActionBar.TitleTextStyle</item>
<item name="titleTextStyle">#style/Theme.MyAppTheme.ActionBar.TitleTextStyle</item>
</style>
<style name="Theme.MyAppTheme.ActionBar.TitleTextStyle" parent="TextAppearance.Sherlock.Widget.ActionBar.Title">
<item name="android:textColor">#fff</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">32sp</item>
<item name="textColor">#fff</item>
<item name="textStyle">bold</item>
<item name="textSize">32sp</item>
</style>

Related

Parent style for TextView style with AppCompat usage

What parent style should I use if I want to set global textViewStyle and maintain backward compatibility with AppCompat? I can't find something like Widget.AppCompat.TextView :
<style name="Base_AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:textViewStyle">#style/GlobalTextViewStyle</item>
</style>
<style name="GlobalTextViewStyle" parent="?????">
<item name="android:textAppearance">#style/TextAppearance.AppCompat.Medium</item>
</style>
You just need to extend TextAppearance.AppCompat style overriding necessary values:
<style name="Base_AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:textAppearance">#style/MyTextAppearance</item>
</style>
<style name="MyTextAppearance" parent="TextAppearance.AppCompat">
<item name="android:textColor">?android:textColorPrimary</item>
<item name="android:textColorHint">?android:textColorHint</item>
<item name="android:textColorHighlight">?android:textColorHighlight</item>
<item name="android:textColorLink">?android:textColorLink</item>
<item name="android:textSize">#dimen/abc_text_size_body_1_material</item>
<item name="textColor">?textColorPrimary</item>
<item name="textColorHighlight">?textColorHighlight</item>
<item name="textColorHint">?textColorHint</item>
<item name="textColorLink">?textColorLink</item>
<item name="textSize">16sp</item>
<item name="textStyle">normal</item>
</style>
If you want to set this style for all your TextView's in your app, you can do something like this:
<resources>
<style name="YourTheme" parent="android:YourParentThTheme">
<item name="android:textViewStyle">#style/GlobalTextViewStyle </item>
</style>
<style name="GlobalTextViewStyle" parent="android:Widget.TextView">
<item name="android:textColor">#FF000</item>
<item name="android:textStyle">bold</item>
</style>
</resources>
<style name="normal_text_white" parent="#android:style/TextAppearance.Medium">
<item name="android:textColor">#color/white_color</item>
<item name="android:textSize">#dimen/small_text_size</item>
<item name="android:textColorHint">#color/hint_color</item>
</style>
We can try this as well for AppCompat widget.
<style name="TitleStyle" parent="TextAppearance.AppCompat">
<item name="android:gravity">center_horizontal</item>
<item name="android:textColor">#android:color/black</item>
<item name="android:textSize">26sp</item>
</style>

Moving menu and buttons to upper actionBar

Simple question, how do I move everything from bottom actionBar to the actionBar above (right corner). What is the theme called (assuming it has to do with themes). Also how can the bottom actionBar be removed completely!
This is currently my xml-code setting the themes. Theme.ML.ActionBar2 is the theme setting the attribute's for the actionBar:
<resources>
<style name="Theme.ML.Default" parent="#style/Theme.Sherlock">
<item name="android:windowBackground">#drawable/bg_math</item>
<item name="android:windowNoTitle">true</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.ML.ActionBar2" parent="#style/Theme.Sherlock">
<item name="android:windowBackground">#drawable/bg_list_topbar</item>
</style>
<style name="Theme.ML.Tabs" parent="#style/Widget.Sherlock.ActionBar.TabBar">
<item name="windowActionBarOverlay">true</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:gravity">center</item>
<item name="android:listDivider">#color/transparent</item>
<item name="android:showDividers">none</item>
<item name="android:dividerPadding">0dp</item>
<item name="android:dividerHeight">0dp</item>
<item name="android:dividerVertical">#null</item>
<item name="background">#drawable/tab_bar_background</item>
<item name="android:background">#drawable/tab_bar_background</item>
</style>
<style name="Theme.ML.Text" parent="#style/Widget.Sherlock.ActionBar.TabText">
<item name="android:textColor">#color/text_tab_indicator</item>
<item name="android:textSize">8sp</item>
</style>
</resources>
check this if you have put in your manifest within your activity declaration.
android:uiOptions="splitActionBarWhenNarrow"

ActionBarSherLock divider style

Does anyone knows,
How do i set a line in between ActionBar tab bar and title bar, because i am using same color for both, that looks odd,
i am using style as:
<style name="Theme.MyTheme" parent="#style/Theme.Sherlock.Light.DarkActionBar">
<item name="actionBarStyle">#style/Widget.MyTheme.ActionBar</item>
<item name="actionBarTabStyle">#style/customActionBarTabStyle</item>
</style>
here i set the color,
<style name="Widget.MyTheme.ActionBar" parent="Widget.Sherlock.ActionBar">
<item name="android:background">#4B4B4B</item>
<item name="background">#4B4B4B</item>
</style>
<style name="customActionBarTabStyle" parent="Widget.Sherlock.ActionBar.TabView">
<item name="background">#4B4B4B</item>
<item name="android:background">#4B4B4B</item>
</style>
Try using something like this :
<style name="Theme.Dreams" parent="#style/Theme.Sherlock.Light.DarkActionBar">
<item name="android:actionBarTabBarStyle">#style/ActionBarTabBarStyle.Dreams</item>
</style>
<style name="ActionBarTabBarStyle.Dreams" parent="#style/Widget.Sherlock.ActionBar.TabBar">
<item name="android:background">#drawable/ic_tabbar_background</item>
<item name="android:showDividers">middle</item>
<item name="android:divider">#drawable/ic_tabbar_divider</item>
<item name="android:dividerPadding">0dp</item>
</style>

Alignment text of actionbar tab?

I try to customize actionbar tabs. Look on the picture:
My code:
<style name="ActionBarTabBar" parent="#android:style/Widget.Holo.Light.ActionBar.TabBar">
<item name="android:showDividers">end</item>
<item name="android:divider">#drawable/actionbar_tab_divider</item>
<item name="android:dividerPadding">0dp</item>
<item name="android:background">#drawable/actionbar_tab_bg</item>
<item name="android:paddingLeft">50dp</item>
<item name="android:paddingRight">0dp</item>
</style>
<style name="ActionBarTab" parent="#android:style/Widget.Holo.ActionBar.TabView">
<item name="android:showDividers">none</item>
<item name="android:measureWithLargestChild">true</item>
<item name="android:gravity">center</item>
</style>
<style name="CustomTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/ActionBar</item>
<item name="android:listSelector">#style/ListView</item>
<item name="android:actionBarTabBarStyle">#style/ActionBarTab</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabBar</item>
</style>
I would like to align the text of tabs to center. When I try to set up showDividers to value middle, divider is not visible. It is visible with values beggining or end.
After more attempts, I've got desired result.
This is my code, that works properly.
<style name="ActionBarTabBar" parent="#android:style/Widget.Holo.Light.ActionBar.TabBar">
<item name="android:background">#drawable/actionbar_tab_bg</item>
<item name="android:paddingLeft">30dp</item>
<item name="android:paddingRight">30dp</item>
</style>
<style name="ActionBarTab" parent="#android:style/Widget.Holo.Light.ActionBar.TabView">
<item name="android:showDividers">middle</item>
<item name="android:divider">#drawable/actionbar_tab_divider</item>
<item name="android:dividerPadding">0dp</item>
<item name="android:measureWithLargestChild">true</item>
<item name="android:gravity">center</item>
</style>
<style name="CustomTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarTabBarStyle">#style/ActionBarTab</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabBar</item>
</style>
It was needed to specify the style for Widget.Holo.Light.ActionBar.TabView and for this item set up the divider.
Delete styles you don't need to override in order to style your tabs like you described:
<style name="ActionBarTabBar" parent="#android:style/Widget.Holo.Light.ActionBar.TabBar">
<item name="android:divider">#drawable/actionbar_tab_divider</item>
<item name="android:background">#drawable/actionbar_tab_bg</item>
</style>

Custom Spinner with white text color

I want my Action Bar spinner to display it's text in white (like in google maps app),
but i'm struggling to get there..
i'm trying something like this:
<style name="Mepo.Spinner" parent="#android:style/Widget.Spinner">
<item name="android:spinnerItemStyle">#style/StandardSpinnerItem</item>
<item name="spinnerItemStyle">#style/StandardSpinnerItem</item>
</style>
<style name="StandardSpinnerItem" parent="#android:style/Widget.TextView.SpinnerItem">
<item name="android:textAppearance">#android:color/white</item>
<item name="android:textColor">#android:color/white</item>
</style>
but that has no effect.
I know this his probably been asked but i can't find the right solution.
any ideas?
p.s i'm actually using sherlock action bar if that matters
in the end this is what i did, maybe this will help someone:
<style name="Theme.Styled" parent="Theme.Sherlock.Light.DarkActionBar">
<item name="actionBarStyle">#style/Widget.Styled.ActionBar</item>
<item name="android:actionBarStyle">#style/Widget.Styled.ActionBar</item>
<item name="actionDropDownStyle">#style/xxx.ActionBar.DropDown.Style</item>
<item name="android:actionDropDownStyle">#style/xxx.ActionBar.DropDown.Style</item>
</style>
<style name="Widget.Styled.ActionBar" parent="Widget.Sherlock.Light.ActionBar.Solid.Inverse">
<item name="background">#0B2F39</item>
<item name="android:background">#0B2F39</item>
<item name="backgroundSplit">#0B2F39</item>
<item name="android:backgroundSplit">#0B2F39</item>
</style>
<style name="xxx.ActionBar.DropDown.Style" parent="Widget.Sherlock.Light.Spinner.DropDown.ActionBar">
<item name="android:background">#drawable/abs__spinner_ab_holo_dark</item>
</style>
if you have any remark or corretions i would love to hear them
If you already use an custom theme(you extended the base theme and customized it) and you want to customize the spinner only for one activity you need to do this:
<style name="Theme.MyTheme" parent="Theme.Sherlock">
... your other items
</style>
<style name="Theme.MyTheme.Spinner" parent="Theme.MyTheme">
<item name="android:spinnerItemStyle">#style/SpinnerItem</item>
<item name="android:spinnerDropDownItemStyle">#style/SpinnerItem.DropDownItem</item>
</style>
<style name="Spinner" parent="#android:style/Widget.Spinner">
<item name="android:spinnerItemStyle">#style/SpinnerItem</item>
<item name="android:spinnerDropDownItemStyle">#style/SpinnerItem.DropDownItem</item>
</style>
<style name="SpinnerItem" parent="#android:style/Widget.TextView.SpinnerItem">
<item name="android:textColor">#android:color/white</item>
</style>
<style name="SpinnerItem.DropDownItem" parent="#android:style/Widget.Holo.Light.DropDownItem.Spinner">
<item name="android:textColor">#android:color/white</item>
</style>
And to use this style in an activity use this:
<activity
android:name=".YourActivity"
android:theme="#style/Theme.MyTheme.Spinner" >
</activity>
If you want to customize the spinner for all the activities(your application) move the items from Theme.MyTheme.Spinner into Theme.MyTheme:
<style name="Theme.MyTheme" parent="Theme.Sherlock">
... your other items
<item name="android:spinnerItemStyle">#style/SpinnerItem</item>
<item name="android:spinnerDropDownItemStyle">#style/SpinnerItem.DropDownItem</item>
</style>

Categories

Resources