Styling ActionBar Tabs - android

I'm attempting to change the colors on my ActionBar Tabs to match the colors used in my app. I've been following the blog post here: http://blog.alwold.com/2013/08/28/styling-tabs-in-the-android-action-bar/ which is very helpful. However when setting up the theme in Step 1 I can't find the correct value for the parent attribute. The website lists "Theme.Sherlock", but I'm not using ActionBarSherlock, so that doesn't apply.
My XML is as follows:
<style name="PropertyApp" parent="#style/Widget.Holo.ActionBar.TabView">
<item name="android:actionBarTabStyle">#style/PropertyApp.ActionBar.Tab</item>
<item name="actionBarTabStyle">#style/FindMyTrain.ActionBar.Tab</item>
</style>
<style name="PropertyApp.ActionBar.Tab">
<item name="android:background">#drawable/tab_bar_background</item>
</style>
No matter what I use for the parent style in the top style definition, I get an error that "No resource found that matches the given name: attr 'actionBarTabStyle'". Also, I'm told that the symbol "PropertyApp.ActionBar.Tab" cannot be resolved.

Your issue is that you are specifying the Widget.Holo.ActionBar.TabView parent style for your main PropertyApp style.
You will need to put that in your PropertyApp.ActionBar.Tab style.
Then put the main parent theme for PropertyApp like Theme.Holo.
<style name="PropertyApp" parent="android:style/Theme.Holo">
<item name="android:actionBarTabStyle">#style/PropertyApp.ActionBar.Tab</item>
</style>
<style name="PropertyApp.ActionBar.Tab" parent="android:style/Widget.Holo.ActionBar.TabView">
<item name="android:background">#drawable/tab_bar_background</item>
</style>
The naming of the parent styles will also depend on which API levels you are targeting. AppCompat for example if you are using that.
You can refer to the documentation on changing the tab backgrounds.

Related

where are android style item attributes defined?

<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="colorWindowBackground">#color/Gray</item>
</style>
I wanted to add the property colorWindowBackground like so. Can I not just use any name I like? it seems like Android studio does not appreciate my behavior.
I'm guessing then that colorPrimary from item name is defined somewhere already. and that name can only be set to certain already existing properties.
how does the compiler know which properties are allowed? Is it somehow based on the parent the style is inherited from?
For using custom attributes in the views of layouts, you can use "declare-stylable" for custom names. Please follow below referred site :
https://guides.codepath.com/android/Defining-Custom-Views
#james Joshua, colorPrimary, colorAccent, and colorPrimaryDark are defined or in other words inherited from parent style Theme.AppCompat.Light.DarkActionBar.

Styling CardView groups

For a small tool, I have to write an Android app. There are no requirements on portability, it's sufficient when the app only runs on android version 6 or later.
I would love to group dialog elements into CardViews and I would love to have some reasonable layout (spacing, colors, etc). Is there a way to use a theme, standard layout, style, etc. that I could use without the need to apply "android:padding", "card_view:cardElevation", ect. attribute to every CardView?
If it's not possible to use some already existing defaults, I could use styles. When I use styles (following Google's "Styles and Themes" API Guide), I get error messages, when I move some attributes from the CardView definition from the layout xml to the style xml. For attributes that I move to the style xml, that begin with "android:", there is no error. For other attributes, I get an `No resource found that matches the given name-error.
<style name="CardGroups">
<item name="xmlns:card_view">"http://schemas.android.com/apk/res-auto"</item>
<item name="card_view:cardElevation">3dp</item>
<item name="android:layout_margin">3dp</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
</style>
results in: Error:(20, 5) No resource found that matches the given name: attr 'card_view:cardElevation'.
You are correct that styles are the way to go to provide a common set of attributes to multiple Views.
You should not use custom namespaces in your style definitions. For custom attributes provided by libraries (such as cardElevation), you simply do not provide a namespace.
Thus your style should look like this:
<style name="CardGroups">
<item name="cardElevation">3dp</item>
<item name="android:layout_margin">3dp</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
</style>

Material design: Where to place elevation in android styles?

I want to set item elevation in some of my app's styles. Now elevation is only 21 and higher with no support library, so my natural inclination was to just create a styles-v21 xml and place it in there:
<style name="Widget.MyApp.Drawer" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:elevation">4dp</item>
</style>
The problem with this is any changes I make to Widget.MyApp.Drawer in the regular styles.xml file will be overwritten by this completely. What I'd want is for elevation to just be tacked on to the bottom of the list of style changes I made for the v21 version of this style listed in styles.xml.
So I took to creating base styles which the style I use in the views inherits from:
<style name="BaseListElement">
<item name="android:background">#drawable/listitem_background</item>
<item name="android:layout_height">#dimen/list_item_height</item>
</style>
<style name="BaseListElement.ListItem">
</style>
I leave the style blank in styles.xml, and in styles-v21, I add elevation and it works.
However this get's kind of tricky when I want to use some advanced styles:
<style name="BaseListElement">
<item name="android:background">#drawable/listitem_background</item>
<item name="android:layout_height">#dimen/list_item_height</item>
</style>
<style name="BaseListElement.BaseItem">
<item name="android:padding">#dimen/list_item_padding</item>
</style>
<style name="Widget.MyApp.ListItem" parent="#style/BaseListElement.BaseItem">
</style>
<style name="BaseListElement.BaseHeader">
</style>
In this case, BaseItem is just one style that inherits from BaseListElement, styles such as BaseHeader inherit from it as well. This is getting kind of ridiculous as you can see.
Am I overthinking this? The way I see it I have 3 choices here:
1) Continue as is and feel like an idiot
2) On the BaseListElement level, create a child style with some goofy name which is the point at which I apply the elevation, which would then (hopefully) trickle down to all the children. As soon as I have a difference between v21 children of the base however, this wouldn't work.
3) Just throw android:elevation into the styles.xml file (don't use a v21 file) and place an ignore flag on the element. I only have 5.0 devices here, so I can't easily test at the moment if this will cause a crash on older versions.
Any thoughts?
To accomplish something like this you could just create a BaseListElement.BaseItem in both styles.xml and syles-v21.xml the first one without the elevation and the second one with it. Then just extend Widget.MyApp.ListItem from BaseListElement.BaseItem which should get updated in v21 to use the elevation.
styles.xml
<style name="BaseListElement.BaseItem">
</style>
<style name="Widget.MyApp.ListItem" parent="#style/BaseListElement.BaseItem">
</style>
styles-v21.xml
<style name="BaseListElement.BaseItem">
<item name="android:padding">#dimen/list_item_padding</item>
</style>
Method 3 you can safely implement as follows:
<item name="android:elevation" tools:ignore="NewApi">4dp</item>

dark action bar with Theme.AppCompat

I am using Theme.AppCompat for my app to get the dark look. Everything looks good, except the action bar using this theme looks ancient i.e. it has a bright blue bottom divider.
I want the action bar to look like it is in Theme.AppCompat.Light.DarkActionBar.
Looking at themes.xml, i find :
<style name="Theme.AppCompat.Light.DarkActionBar"
parent="Theme.Base.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">true</item>
</style>
<style name="Theme.Base.AppCompat.Light.DarkActionBar" parent="Theme.Base.AppCompat.Light">
<item name="actionBarDivider">#drawable/appcompat_divider_dark</item>
</style>
So i create my own style as below :
<style name="myTheme" parent="#style/Theme.AppCompat">
<item name="actionBarDivider">#drawable/appcompat_divider_dark</item>
</style>
But i get the build error :
No resource found that matches the given name (at 'actionBarDivider' with value
'#drawable/appcompat_divider_dark')
Why can't i use the same drawable that is being used by the framework?
The blue line is part of the background image used for the action bar. For example, you can find it in : sdk/platforms/android-19/data/res/drawable-xxhdpi/ab_transparent_dark_holo.9.png
The trick is to create your own Widget style by inheriting Widget.AppCompat.ActionBar and set the background attribute with your desired png, which does not have the blue line. I use the support library's existing#drawable/abc_ab_bottom_transparent_dark_holo. You can find it in the folder sdk/extras/android/support/v7/appcompat/res/drawable-hdpi/.
So create the below element in the styles.xml file.
<style name="myActionBar" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:background">#drawable/abc_ab_bottom_transparent_dark_holo</item>
</style>
Then include this newly created style in your theme(already present in the styles.xml file) :
<style name="AppBaseTheme" parent="#style/Theme.AppCompat">
<item name="android:actionBarStyle">#style/myActionBar</item>
</style>
To enable this change in older APIs, make the same changes in all 3 folder - values-v14, values-v12 and values.
One important thing to note is that the "android:" namespace should not be used for the name attributes in the values-v12 and values folders.

ActionBarSherlock stacked action bar styling issue

I can't figure out why the stacked ActionBar I have implemented has a gap between the left most tab and the edge of the screen.
This is not the case with the right most tab.
I tried to remove the dividers by styling the ActionBar. After playing around with styles for a little bit, it seems like I am able to override attributes of the TabView style but not the TabBar style of ActionBarSherlock.
<style name="ActionBarTabBarStyle.Dark" parent="#style/Widget.Sherlock.ActionBar.TabBar">
<item name="android:divider">#null</item>
<item name="android:showDividers">none</item>
<item name="android:dividerPadding">0dip</item>
</style>
Then I realized I need to include identical unprefixed attributes.
ActionBarSherlock Theming
Due to limitations in Android's theming system any theme customizations must be declared
in two attributes. The normal android-prefixed attributes apply the theme to the native
action bar and the unprefixed attributes are for the custom implementation. Since both
theming APIs are exactly the same you need only reference your customizations twice rather
than having to implement them twice.
But I tried to include identical unprefixed attributes but that didnt work for me.
I tried to include identical unprefixed attributes.
<style name="ActionBarTabBarStyle.Dark" parent="#style/Widget.Sherlock.ActionBar.TabBar">
<item name="android:divider">#null</item>
<item name="android:showDividers">none</item>
<item name="android:dividerPadding">0dip</item>
<item name="divider">#null</item>
<item name="showDividers">none</item>
<item name="dividerPadding">0dip</item>
</style>
But it throws an error
Error: No resource found that matches the given name: attr 'dividerPadding'.
Error: No resource found that matches the given name: attr 'showDividers'.
So then i removed those two attributes and tried to run it again, but i still see the tabbar dividiers.
<style name="ActionBarTabBarStyle.Dark" parent="#style/Widget.Sherlock.ActionBar.TabBar">
<item name="android:divider">#null</item>
<item name="android:showDividers">none</item>
<item name="android:dividerPadding">0dip</item>
<item name="divider">#null</item>
</style>
In my AndroidManifest.xml file, I included
<uses-sdk android:minSdkVersion="8" android:targetSdkVersion="18"/>
Any suggestions or thoughts about what may be the issue?
Update
I also tried
<style name="Theme.Dark" parent="#style/Theme.Sherlock.Light.DarkActionBar">
<item name="actionBarDivider">#null</item>
<item name="android:actionBarDivider">#null</item>
</style>
But this didn't remove the dividers either. Is there another attribute which overrides these attributes?
You have to change the android:actionBarDivider attribute which belongs to the theme, not to the action bar style android:divider. You can remove the divider like this:
<style name="AppTheme" parent="Theme.Sherlock">
<item name="actionBarDivider">#null</item>
<item name="android:actionBarDivider">#null</item>
</style>
I will accept anyone with an answer that involves keeping ActionBarSherlock, however, I removed this library and now I am just using the support libraries and am no longer having that spacing issue. I guess there might be an issue with ActionBarSherlock. But since it is no longer being supported I think the best solution is just to use the Support libraries.

Categories

Resources