Android's Material Design of Toolbar / SupportActionBar - android

I'm experimenting with the news themes tonight and I'm wondering if anyone knows these fix to this issue.
This appears on the stock Toolbar and even, as seen below, when referring to custom layout file.
It's relatively minor but my OCD eyes go right to it so maybe someone can help. Thanks :)

UPDATE: Inheriting from the correct theme and declaring attributes in pairs (with and without the android: prefix) was the fix!
<!-- Base app theme. -->
<style name="AppTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ActionBar styles. -->
<style name="MyActionBar" parent="Widget.AppCompat.ActionBar">
<item name="android:titleTextStyle">#style/MyActionBarTitleText</item>
<item name="titleTextStyle">#style/MyActionBarTitleText</item>
<item name="android:subtitleTextStyle">#style/MyActionBarSubTitleText</item>
<item name="subtitleTextStyle">#style/MyActionBarSubTitleText</item>
<item name="android:background">#color/blue</item>
<item name="background">#color/blue</item>
</style>
<style name="MyActionBarTitleText" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/white</item>
</style>
<style name="MyActionBarSubTitleText" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle">
<item name="android:textColor">#color/white</item>
<item name="android:textSize">#dimen/subtitle</item>
</style>

If es0329's answer doesn't work for you, try to replace titleTextStyle by titleTextAppearance. It is working for me:
<style name="MyActionBar" parent="Widget.AppCompat.ActionBar">
<item name="android:titleTextAppearance">#style/MyActionBarTitleText</item>
<item name="titleTextAppearance">#style/MyActionBarTitleText</item>
<item name="android:subtitleTextAppearance">#style/MyActionBarSubTitleText</item>
<item name="subtitleTextAppearance">#style/MyActionBarSubTitleText</item>
<item name="android:background">#color/blue</item>
<item name="background">#color/blue</item>
</style>

Related

Android style inheritance

I have two themes, one has ActionBar and one without. It seems redundant to do duplicate the styles, is there any way to simplify it?
Thanks
<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary_color</item>
<item name="android:windowBackground">#color/bg_color</item>
<item name="colorAccent">#color/accent_color</item>
<item name="colorPrimaryDark">#color/darker_color</item>
<!-- Button style -->
<item name="android:buttonStyle">#style/ButtonStyle</item>
<item name="buttonStyle">#style/ButtonStyle</item>
</style>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/primary_color</item>
<item name="android:windowBackground">#color/bg_color</item>
<item name="colorAccent">#color/accent_color</item>
<item name="colorPrimaryDark">#color/darker_color</item>
<!-- Button style -->
<item name="android:buttonStyle">#style/ButtonStyle</item>
<item name="buttonStyle">#style/ButtonStyle</item>
</style>
<style name="ButtonStyle" parent="Widget.AppCompat.Button">
<item name="android:background">#color/primary_color</item>
</style>
Unfortunately, due to the way that Style/Theme inheritance works, there is no way around this. You could read more about that here:
Android Styles heritage
One option, however, would be to copy the contents of the NoActionBar theme. It turns out that it only contains 2 lines:
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
So your code would look like this
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/primary_color</item>
<item name="android:windowBackground">#color/bg_color</item>
<item name="colorAccent">#color/accent_color</item>
<item name="colorPrimaryDark">#color/darker_color</item>
<!-- Button style -->
<item name="android:buttonStyle">#style/ButtonStyle</item>
<item name="buttonStyle">#style/ButtonStyle</item>
</style>
<!-- NoActionBar theme -->
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
Now you are inheriting the AppTheme attributes as well as getting the NoActionBar behavior. Obviously this is not foolproof if the attributes of NoActionBar change in the future, but it might be a good option for someone with many attributes in their base AppTheme.

Fully Transparent Action bar on Holo Light Theme

I want to make full translucent action bar like google did, i tried several option, that seems to work on Holo, however they are not "full transparent" in Holo.Light
this is my style so far:
<style name="MyTheme.Translucent" >
<item name="windowActionBarOverlay">true</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="actionBarStyle">#style/MyTheme.ActionBar</item>
<item name="android:actionBarStyle">#style/MyTheme.ActionBar</item>
</style>
<style name="MyTheme.ActionBar" parent="#style/Widget.Sherlock.ActionBar">
<item name="background">#android:color/transparent</item>
<item name="android:background">#android:color/transparent</item>
</style>
and in Oncreate:
getSupportActionBar().setBackgroundDrawable(null);
the result its "almost" what i need
however i see a shade in action bar:
What i want (or something like this)
i found the solution
using
<item name="android:windowContentOverlay">#null</item>
will do the trick to remove the line
please check the link....................
http://cyrilmottier.com/2013/05/24/pushing-the-actionbar-to-the-next-level
**values/themes.xml**
<style name="Theme.TranslucentActionBar" parent="#android:style/Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/Widget.ActionBar</item>
</style>
<style name="Theme.TranslucentActionBar.ActionBar" />
<style name="Theme.TranslucentActionBar.ActionBar.Overlay">
<item name="android:actionBarStyle">#style/Widget.ActionBar.Transparent</item>
<item name="android:windowActionBarOverlay">true</item>
</style>
**values/styles.xml**
<style name="Widget.ActionBar" parent="#android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:background">#drawable/ab_background</item>
</style>
<style name="Widget.ActionBar.Transparent">
<item name="android:background">#android:color/transparent</item>
</style>

Android: action overflow icon blue underline

I'm trying to remove the blue underline in the action bar overflow icon. Here is the screenshot:
I don't have tabs but I saw some similar answered questions about action bar tabs underline but nothing worked for me. My Base application theme is Theme.AppCompat.Light. Here are the applied styles:
<style name="AppThemeNoActionBar" parent="Theme.AppCompat.Light">
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<item name="android:activatedBackgroundIndicator">#drawable/nav_drawer_selection</item>
</style>
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:windowActionBar">true</item>
<item name="android:windowNoTitle">false</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:actionMenuTextColor">#color/white</item>
<item name="android:actionOverflowButtonStyle">#style/OverFlow</item>
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="actionMenuTextColor">#color/white</item>
<item name="actionOverflowButtonStyle">#style/OverFlow</item>
<item name="android:activatedBackgroundIndicator">#drawable/nav_drawer_selection</item>
</style>
<style name="MyActionBar"
parent="#style/Widget.AppCompat.ActionBar">
<item name="android:titleTextStyle">#style/MyActionBarTitleText</item>
<item name="android:background">#color/red</item>
<item name="titleTextStyle">#style/MyActionBarTitleText</item>
</style>
<style name="MyActionBarTitleText"
parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/white</item>
</style>
<style name="OverFlow"
parent="#style/Widget.AppCompat.ActionBar">
<item name="android:src">#drawable/ic_launcher</item>
</style>
Thanks for all the help! If you need more info about the app and code let me know :)
#nejc.m i think it's due to inheritance from the "Widget" parent. Try replacing "Widget.AppCompat.ActionBar" with "Theme.AppCompat.Light.DarkActionBar". Let me know if this works.
I played around and I found out that it's a very easy solution. I added <item name="android:background">#color/red</item> to <style name="OverFlow" parent="#style/Widget.AppCompat.ActionBar">

Android TextColor

Does anyone know the way in which i am meant to code the change i want to make to the color of the ActionBar? I have tried using android:textColor , and android:color , as well as various other things. It seems like a quite a hassle for me. Although there is most probably a simple solution for this. Does anyone have any ideas?
Note: i am trying to make the font color white - from what i can tell, Android does this from the "actionbar.solid.pp" style.
<style name="Theme.Pp" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarItemBackground">#drawable/selectable_background_pp</item>
<item name="android:popupMenuStyle">#style/PopupMenu.Pp</item>
<item name="android:dropDownListViewStyle">#style/DropDownListView.Pp</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabStyle.Pp</item>
<item name="android:actionDropDownStyle">#style/DropDownNav.Pp</item>
<item name="android:actionBarStyle">#style/ActionBar.Solid.Pp</item>
<item name="android:actionModeBackground">#drawable/cab_background_top_pp</item>
<item name="android:actionModeSplitBackground">#drawable/cab_background_bottom_pp</item>
<item name="android:actionModeCloseButtonStyle">#style/ActionButton.CloseMode.Pp</item>
</style>
<style name="ActionBar.Solid.Pp" parent="#android:style/Widget.Holo.Light.ActionBar.Solid">
<item name="android:background">#111</item>
<item name="android:color">#FFF</item>
<item name="android:textStyle">bold</item>
<item name="android:progressBarStyle">#style/ProgressBar.Pp</item>
</style>
<style name="ActionBar.Transparent.Pp" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#drawable/ab_transparent_pp</item>
<item name="android:progressBarStyle">#style/ProgressBar.Pp</item>
</style>
<style name="PopupMenu.Pp" parent="#android:style/Widget.Holo.Light.ListPopupWindow">
<item name="android:popupBackground">#drawable/menu_dropdown_panel_pp</item>
</style>
<style name="DropDownListView.Pp" parent="#android:style/Widget.Holo.Light.ListView.DropDown">
<item name="android:listSelector">#drawable/selectable_background_pp</item>
</style>
<style name="ActionBarTabStyle.Pp" parent="#android:style/Widget.Holo.Light.ActionBar.TabView">
<item name="android:background">#ffffff</item>
</style>
<style name="DropDownNav.Pp" parent="#android:style/Widget.Holo.Light.Spinner">
<item name="android:background">#drawable/spinner_background_ab_pp</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_pp</item>
<item name="android:dropDownSelector">#drawable/selectable_background_pp</item>
</style>
<style name="ProgressBar.Pp" parent="#android:style/Widget.Holo.Light.ProgressBar.Horizontal">
<item name="android:progressDrawable">#drawable/progress_horizontal_pp</item>
</style>
<style name="ActionButton.CloseMode.Pp" parent="#android:style/Widget.Holo.Light.ActionButton.CloseMode">
<item name="android:background">#drawable/btn_cab_done_pp</item>
</style>
<!-- this style is only referenced in a Light.DarkActionBar based theme -->
<style name="Theme.Pp.Widget" parent="#android:style/Theme.Holo">
<item name="android:popupMenuStyle">#style/PopupMenu.Pp</item>
<item name="android:dropDownListViewStyle">#style/DropDownListView.Pp</item>
</style>
Changing the action bar's text color is shown on the developer guide Styling the Action Bar
I think you can use this free tool to customize the style:
http://jgilfelt.github.io/android-actionbarstylegenerator/#name=example&compat=holo&theme=light&actionbarstyle=solid&texture=0&hairline=0&neutralPressed=1&backColor=E4E4E4%2C100&secondaryColor=D6D6D6%2C100&tabColor=33B5E5%2C100&tertiaryColor=F2F2F2%2C100&accentColor=33B5E5%2C100&cabBackColor=FFFFFF%2C100&cabHighlightColor=33B5E5%2C100

changing the titlebar settings(text, color)

I am trying to change color of the WindowsTitlebar. I looked/read around and understood as below(code below in styles.xls added for this change)
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
</style>
<style name="LargeTitleTheme" parent="AppBaseTheme">
<item name="android:windowTitleSize">50dp</item>
<item name="android:windowTitleStyle">#style/titleTextStyle</item>
<item name="android:windowTitleBackgroundStyle">#style/WindowTitleBackground</item>
</style>
<style name="titleTextStyle" >
<item name="android:textSize">30sp</item>
<item name="android:textColor">#FFFFFF</item>
<item name="android:gravity">center</item>
</style>
<style name="WindowTitleBackground">
<item name="android:background">#92D050</item>
</style>
And in androidmanifest.xml the rferece to thetheme below
android:theme="#style/LargeTitleTheme">
But this does not seem to be working
Not sure where am I going wrong here. Need help here.
I used this for custom title
<style name="CustomWindowTitleBackground">
<item name="android:background">#404040</item>
<item name="android:textColor">#FFFFFF</item>
</style>
<style name="CustomTheme" parent="android:Theme">
<item name="android:windowTitleSize">30dp</item>
<item name="android:windowTitleBackgroundStyle">#style/CustomWindowTitleBackground</item>
</style>
I got help from this link
changing parent to parent="android:Theme.light" solved the problem for now

Categories

Resources