Styling Actionbar Appcompat devider - android

I am working on an app where I have to modify the app Actionbar. I am able to design it according to the requirement, but facing problem in designing the white line beneath the action bar. Well, I have got some hack where I can take the view and design it. But I want it to style it using style.xml.
EDIT
Now google has released toolbar that you can modify easily.

You can style your action bar like the below code -
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<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/actionbar_background</item>
</style>
and also please check the link - https://developer.android.com/training/basics/actionbar/styling.html to get more information. Hope it helped you.

Related

How to set custom color in toolbar in android

I created android application. I created custom theme for my app. I want to change the toolbar color. How to do. I wrote some code but its not working. Please anyone fix it.
Here my code:
<style name="CustomActionBarTheme"
parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:colorPrimary">#color/myPrimaryColor</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="colorPrimary">#color/myPrimaryColor</item>
</style>
<!-- general styles for the action bar -->
<style name="MyActionBar"
parent="#android:style/Widget.Holo.ActionBar">
<item name="android:titleTextStyle">#style/TitleTextStyle</item>
<!-- Support library compatibility -->
<item name="titleTextStyle">#style/TitleTextStyle</item>
</style>
<!-- action bar title text -->
<style name="TitleTextStyle"
parent="#android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">#color/myAccentColor</item>
</style>
Thanks in advance
i'm suggesting you to use material design in your app, then you can add toolbar which replaces actionbar and its very easy to customize toolbar. For more info on material design backward compatability follow :
http://antonioleiva.com/material-design-everywhere/ ,
http://www.truiton.com/2015/02/android-material-design-backward-compatibility/
if you still want to customize actionbar then follow this link :http://stackoverflow.com/questions/19977081/how-to-change-the-color-of-the-android-actionbar-without-using-any-image-resourc it worked for me.
hope these links help you !

Styling the popup menu in Android 5.0

I'm making my app ready for Android 5.0, I'm using the latest compatibility library, here is what my style looks like.
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/theme_accent</item>
<item name="colorAccent">#color/theme_accent_secondary</item>
</style>
<style name="AppThemeDark" parent="Theme.AppCompat">
<item name="colorPrimary">#color/theme_accent</item>
<item name="colorAccent">#color/theme_accent_secondary</item>
</style>
</resources>
(The ActionBar color is being set programmatically.)
Now, I want the overflow/popup menu to have the dark background like it had in the holo implementation, but I can't get it to work, here is what it looks like:
I have tried setting the popupMenuStyle but it didn't work.
How can I make the popup menu darker?
Stop using the ActionBar. If you want a ToolBar to be set up like an ActionBar, follow this guide on the android-developers blog.
It actually mentions your use case at Dark Action Bar and provides this code:
<android.support.v7.widget.Toolbar
android:layout_height=”wrap_content”
android:layout_width=”match_parent”
android:minHeight=”#dimen/triple_height_toolbar”
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
Not a full answer but what I found so far:
In past versions you needed to specify a drawable (Check https://github.com/StylingAndroid/StylingActionBar code and tutorials)
Apparently, now that is a color. To modify it you need to do specify the following theme:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar">
<item name="android:actionBarPopupTheme">#style/popupNew</item>
</style>
<style name="popupNew" parent="android:ThemeOverlay.Material.Light">
<item name="android:colorBackground">#color/red</item>
</style>
</resources>
This works correctly if the theme applied to the app is just this.
If I add android:actionBarPopupTheme to my existing theme, it doesn't work. I am trying to figure out why.
Solved my problem by using this style:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/theme_accent</item>
<item name="colorAccent">#color/theme_accent_secondary</item>
<item name="actionBarStyle">#style/AbStyle</item>
<item name="actionModeBackground">#color/actionmode_bg</item>
</style>
<style name="AbStyle" parent="Widget.AppCompat.Toolbar">
<item name="elevation">2dp</item>
<item name="displayOptions">homeAsUp|showTitle</item>
<!--showHome-->
</style>
<style name="AppThemeDark" parent="Theme.AppCompat">
<item name="colorAccent">#color/theme_accent_secondary</item>
<item name="actionBarStyle">#style/AbStyle</item>
</style>
I had to use Widget.AppCompat.Toolbar as the parent actionBarStyle
Add the property popupTheme to your toolbar:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/color_primary"
app:theme="#style/Theme.AppCompat.Light"
app:popupTheme="#style/Theme.AppCompat" />
Or define a new style for your toolbar:
<style name="MyToolBarStyle" parent="Widget.AppCompat.Toolbar">
<item name="android:background">#color/green</item>
<item name="popupTheme">#style/Theme.AppCompat.Light</item>
<item name="theme">#style/Theme.AppCompat</item>
</style>
This question has already been answered for styling via XML, but I'm adding an explanation here of how to work out the solution to this and similar styling questions yourself.
First, this is the solution when using AppCompat. To your App's style.xml add actionBarPopupTheme to your theme:
<style name="Theme.MyTheme" parent="#style/Base.Theme.AppCompat.Light.DarkActionBar">
...other stuff here
<item name="actionBarPopupTheme">#style/Theme.MyTheme.ActionBarPopupTheme</item>
</style>
<style name="Theme.MyTheme.ActionBarPopupTheme" parent="#style/ThemeOverlay.AppCompat.Light">
<item name="android:textColor">#android:color/white</item>
<item name="android:background">#android:color/black</item>
</style>
Here's the steps I took to arrive at this solution (it takes a bit of detective work as the Android documentation is poor):
Open your App's style.xml in Android Studio
On the line where you App's theme is defined, put your screen cursor in the parent theme (e.g. click in #style/Base.Theme.AppCompat.Light.DarkActionBar) then press F4. This should take you to the source code for the style in the appcompat library.
Within this style I saw this line:
< item name="actionBarPopupTheme">#style/ThemeOverlay.AppCompat.Light< /item>
This looked like a possible place to change the theme of the popup. I searched for "actionBarPopupTheme" in the poor
Android developers documentation and found "Reference to a theme that should be used to
inflate popups shown by widgets in the action bar". So this was worth playing with.
I copied the appcompat line containing "actionBarPopupTheme" to my style.xml then in this line replaced the item's theme reference (the bit in bold above) with Theme.MyTheme.ActionBarPopupTheme.
In my style.xml I created my new style named Theme.MyTheme.ActionBarPopupTheme. I used the same parent that was used in the style I copied from the appcompat source (the bit in bold above).
To ensure my new popup style was working, I changed the parent style to ThemeOverlay.AppCompat.Dark then ran and tested the code on a device. The popup style changed, so now I knew my overriding of actionBarPopupTheme was the correct thing to do. Then I changed back to ThemeOverlay.AppCompat.Light.
The next challenge is to work out what item names to override in Theme.MyTheme.ActionBarPopupTheme. I changed the text and background colours. To find the correct item names that change the style of something can be tricky in some cases. One way to find less obvious style item names is to look through the style definitions in the appcompat xml file (the one you opened when pressing F4 in the 2nd step above), continually descending into parent styles (F4 again!) until you find something that may do what you want. Google searches will help here too.

ActionBar padding between elements:

I am trying to put padding between items in the action bar - specially my logo and the Navigation drawer icon, following is the style I am using:
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#android:color/transparent</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:icon">#drawable/logo_header</item>
<item name="android:actionButtonStyle">#style/MyActionButtonStyle</item>
</style>
<style name="MyActionButtonStyle" parent="#android:style/Widget.ActionButton">
<item name="android:minWidth">32dip</item>
<item name="android:padding">12dp</item>
</style>
</resources>
However these two dont seem to work:
<item name="android:minWidth">32dip</item>
<item name="android:padding">12dp</item>
Any idea what I am missing here?
I'd make the logo into a drawable layer list instead and that way i can set its padding something like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="#drawable/my_main_icon"
android:right="20dp"/>
</layer-list>
And if you use this please update your manifest to use this drawable as the main icon instead of the current.
update: it might be better to use this icon as a logo as per reading on stackOverFlow.
so in your manifest in application tag set android:logo="my_main_icon" , researching this still.
update: if you use logo i think you have to turn it on in the actionbar...
setDisplayUseLogoEnabled() Enables the use of an alternative image (a
"logo") in the Action Bar, instead of the default application icon. A
logo is often a wider, more detailed image that represents the
application
i think the correct syntax here would be:
<item
...
android:layout_padding="12dp"
...
/>

Can i use Holo Theme with Custom title bar

I am using custom title bar and its shows content as Theme.light. I tried to change it Theme.Holo but it doesn't work. can anyone help me?
<resources>
<style name="CustomWindowTitleBackground" >
<item name="android:background">#DDDDDD</item>
</style>
<style name="CustomTheme" parent="android:Theme.Holo">
<item name="android:windowTitleSize">73dip</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowTitleBackgroundStyle">#style/CustomWindowTitleBackground</item>
</style>
Provide some more details. Are you using the support action bar? When using the app compat action bar (from the support library) you can only use Theme.AppCompat / Theme.AppCompat.Light and related ones for your activity.

How to change the color of TabText using styles?

I am using styles for customizing the appearance of tabs in my app. I have managed to change the color and appearance of the background of the tabs based on whether the tab is selected with no problems.
However, when I am trying to change the color of the TabText to white (#ffffff), nothing seems to be happening.
I am doing this by extending the parent#style/Widget.AppCompat.ActionBar.TabText and setting the android:textColor to my own color: #color/tab_text_color. I have followed the instructions and examples for doing this but the text color just seems to be unaffected.
All I want is for the text color of the tabs to be white all the time as it is only the background of the tabs that will change when selected. I have followed the way many examples do this but for some reason nothing is happening.
Would anyone be able to suggest what I am missing or the way to change the color of text in tabs in an xml style?
Thanks in advance.
The two files involved are below:
themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CustomActionBarTheme"
parent="#style/Theme.AppCompat.Light.DarkActionBar">
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="actionBarTabStyle">#style/MyActionBarTabs</item>
<item name="actionBarTabTextStyle">#style/TabTextStyle</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<!-- Support library compatibility -->
<item name="background">#drawable/actionbar_background</item>
</style>
<!-- ActionBar tabs styles -->
<style name="MyActionBarTabs"
parent="#style/Widget.AppCompat.ActionBar.TabView">
<!-- tab indicator -->
<item name="android:background">#drawable/actionbar_tab_indicator</item>
<!-- Support library compatibility -->
<item name="background">#drawable/actionbar_tab_indicator</item>
</style>
<!-- action bar tab text -->
<style name="TabTextStyle"
parent="#style/Widget.AppCompat.ActionBar.TabText">
<item name="android:textColor">#color/tab_text_color</item>
</style>
tab_text_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#ffffff" />
</selector>
I managed to solve my problem, here is what was needed for anyone who is stuck on this in future:
Creating my own actionBarTabText style seems to be the right way to go. Even though I set the theme of the application in the AndroidManifest as: android:theme="#style/CustomActionBarTheme" , the actual text was being created in a TextView within a linear layout which meant that the style was not being applied to it.
This explains why the other style elements such as the tabs and actionbar backgrounds were being styled but the text was not as they were not created in the layout. To solve this, in my TextView I just set the style attribute to that of the "TabTextStyle" I had created in themes.xml.
I still do not fully understand why I had to apply the particular style manually even though it should have been set as part of the "CustomActionBarTheme" in the AndroidManifest. Anyway, this fix works so here is the code below:
<TextView
android:id="#+id/friend_tab_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-10dp"
android:layout_gravity="center"
android:text="FRIENDS"
style="#style/TabTextStyle"/>

Categories

Resources