I'm trying to make a similar status bar and navigation bar gradient as Google Now.
Image Reference: Rectangular area indicated as below
After trying the below option on Android Marshmallow,
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowTranslucentStatus">true</item>
I get the below behaviour
Image Reference:
Can anyone suggest me how to get gradient on both these ?
Is that a gradient or is that a shadow ?
It is a gradient being used as a scrim. To achieve this effect, the first thing you have to do is remove the semi-transparent underlay for the Status and Navigation bars. Another answer details how you can do this on lower platform devices; but on Android Lollipop and higher, you can do this simply by setting two style attributes to transparent:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme" parent="android:Theme.Material.Wallpaper.NoTitleBar">
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:navigationBarColor">#android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
</resources>
Then, to add the scrim, you can use a shape drawable:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:type="linear"
android:angle="270"
android:centerY="0.3"
android:startColor="#66000000"
android:centerColor="#33000000"
android:endColor="#00000000"/>
</shape>
Then you can just set this as the background to a View in your layout:
<View
android:layout_width="match_parent"
android:layout_height="72dp"
android:background="#drawable/scrim"/>
You can also set the android:rotation="180" attribute to use the same gradient for the bottom of the screen.
First add a style to make fully transparent action status bar:
<!-- Base application theme. -->
<style name="TransparentTheme" parent="android:Theme.Holo.Light">
<!-- Customize your theme here. -->
<item name="android:windowBackground">#null</item>
<item name="android:actionBarStyle">#style/ActionBarStyle.Transparent</item>
<item name="android:windowActionBarOverlay">true</item>
</style>
<style name="ActionBarStyle.Transparent" parent="android:Widget.ActionBar">
<item name="android:background">#null</item>
<item name="android:displayOptions">showHome|showTitle</item>
<item name="android:titleTextStyle">#style/ActionBarStyle.Transparent.TitleTextStyle</item>
</style>
<style name="ActionBarStyle.Transparent.TitleTextStyle" parent="#android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">#android:color/white</item>
</style>
and to add scrim to it create a drawable file and add this code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#88000000" />
<gradient
android:angle="90"
android:centerColor="#66000000"
android:centerY="0.3"
android:endColor="#00000000"
android:startColor="#CC000000"
android:type="linear" />
</shape>
and add this as background in your theme;
I'd like to change the background color of the option (overflow) menu in Android 4.2. I have tried all the methods but it is still showing the default color set by the theme. I used the following code & XML configs.
MainActivity.java
public class MainActivity extends Activity {
#SuppressLint("NewApi")
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getActionBar().setIcon(R.drawable.ic_launcher);
getActionBar().setTitle("Sample Menu");
getActionBar().setBackgroundDrawable(new
ColorDrawable(Color.parseColor("#33B5E5")));
int titleId = Resources.getSystem().getIdentifier("action_bar_title", "id", "android");
TextView titleText = (TextView)findViewById(titleId);
titleText.setTextColor(Color.parseColor("#ffffff"));
}
#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);
setMenuBackground();
return true;
}
protected void setMenuBackground(){
// Log.d(TAG, "Enterting setMenuBackGround");
getLayoutInflater().setFactory( new Factory() {
#Override
public View onCreateView(String name, Context context,
AttributeSet attrs) {
if ( name.equalsIgnoreCase( "com.android.internal.view.menu.IconMenuItemView" ) ) {
try { // Ask our inflater to create the view
LayoutInflater f = getLayoutInflater();
final View view = f.createView( name, null, attrs );
/* The background gets refreshed each time a new item is added the options menu.
* So each time Android applies the default background we need to set our own
* background. This is done using a thread giving the background change as runnable
* object */
new Handler().post( new Runnable() {
public void run () {
// sets the background color
view.setBackgroundResource( R.color.menubg);
// sets the text color
((TextView) view).setTextColor(Color.WHITE);
// sets the text size
((TextView) view).setTextSize(18);
}
} );
return view;
}
catch ( InflateException e ) {}
catch ( ClassNotFoundException e ) {}
}
return null;
}});
}
}
Menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/action_settings"
android:icon="#drawable/menu"
android:showAsAction="always"
android:title="#string/action_settings">
<menu>
<item
android:id="#+id/item1"
android:showAsAction="always"
android:title="#string/item1" />
<item
android:id="#+id/item2"
android:showAsAction="always"
android:title="#string/item2" />
<item
android:id="#+id/item3"
android:showAsAction="always"
android:title="#string/item3" />
<item
android:id="#+id/item4"
android:showAsAction="always"
android:title="#string/item4" />
</menu>
</item>
</menu>
color.xml
<color name="menubg">#33B5E5</color>
The above setMenuBackground is not taking any effect:
In the above picture, I want to change the menu background from black to the blue color in the Action Bar. How can I achieve this, and what I did do wrong?
In case people are still visiting for a working solution, here is what worked for me:-- This is for Appcompat support library.
This is in continuation to ActionBar styling explained here
Following is the styles.xml file.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- This is the styling for action bar -->
<item name="actionBarStyle">#style/MyActionBar</item>
<!--To change the text styling of options menu items</item>-->
<item name="android:itemTextAppearance">#style/MyActionBar.MenuTextStyle</item>
<!--To change the background of options menu-->
<item name="android:itemBackground">#color/skyBlue</item>
</style>
<style name="MyActionBar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="background">#color/red</item>
<item name="titleTextStyle">#style/MyActionBarTitle</item>
</style>
<style name="MyActionBarTitle" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/white</item>
</style>
<style name="MyActionBar.MenuTextStyle"
parent="style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/red</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">25sp</item>
</style>
</resources>
and this is how it looks--MenuItem background color is skyblue and MenuItem text color is pink with textsize as 25sp:--
The Action Bar Style Generator, suggested by Sunny, is very useful, but it generates a lot of files, most of which are irrelevant if you only want to change the background colour.
So, I dug deeper into the zip it generates, and tried to narrow down what are the parts that matter, so I can make the minimum amount of changes to my app. Below is what I found out.
In the style generator, the relevant setting is Popup color, which affects "Overflow menu, submenu and spinner panel background".
Go on and generate the zip, but out of all the files generated, you only really need one image, menu_dropdown_panel_example.9.png, which looks something like this:
So, add the different resolution versions of it to res/drawable-*. (And perhaps rename them to menu_dropdown_panel.9.png.)
Then, as an example, in res/values/themes.xml you would have the following, with android:popupMenuStyle and android:popupBackground being the key settings.
<resources>
<style name="MyAppActionBarTheme" parent="android:Theme.Holo.Light">
<item name="android:popupMenuStyle">#style/MyApp.PopupMenu</item>
<item name="android:actionBarStyle">#style/MyApp.ActionBar</item>
</style>
<!-- The beef: background color for Action Bar overflow menu -->
<style name="MyApp.PopupMenu" parent="android:Widget.Holo.Light.ListPopupWindow">
<item name="android:popupBackground">#drawable/menu_dropdown_panel</item>
</style>
<!-- Bonus: if you want to style whole Action Bar, not just the menu -->
<style name="MyApp.ActionBar" parent="android:Widget.Holo.Light.ActionBar.Solid">
<!-- Blue background color & black bottom border -->
<item name="android:background">#drawable/blue_action_bar_background</item>
</style>
</resources>
And, of course, in AndroidManifest.xml:
<application
android:theme="#style/MyAppActionBarTheme"
... >
What you get with this setup:
Note that I'm using Theme.Holo.Light as the base theme. If you use Theme.Holo (Holo Dark), there's an additional step needed as this answer describes!
Also, if you (like me) wanted to style the whole Action Bar, not just the menu, put something like this in res/drawable/blue_action_bar_background.xml:
<!-- Bonus: if you want to style whole Action Bar, not just the menu -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<stroke android:width="2dp" android:color="#FF000000" />
<solid android:color="#FF2070B0" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<stroke android:width="2dp" android:color="#FF2070B0" />
<solid android:color="#00000000" />
<padding android:bottom="2dp" />
</shape>
</item>
</layer-list>
Works great at least on Android 4.0+ (API level 14+).
There is an easy way to change the colors in Actionbar
Use ActionBar Generator and copy paste all file in your res folder and change your theme in Android.manifest file.
If you read this, it's probably because all the previous answers didn't work for your Holo Dark based theme.
Holo Dark uses an additional wrapper for the PopupMenus, so after doing what Jonik suggested you have to add the following style to your 'xml' file:
<style name="PopupWrapper" parent="#android:style/Theme.Holo">
<item name="android:popupMenuStyle">#style/YourPopupMenu</item>
</style>
Then reference it in your theme block:
<style name="Your.cool.Theme" parent="#android:style/Theme.Holo">
.
.
.
<item name="android:actionBarWidgetTheme">#style/PopupWrapper</item>
</style>
That's it!
My simple trick to change background color and color of the text in Popup Menu / Option Menu
<style name="CustomActionBarTheme"
parent="#android:style/Theme.Holo">
<item name="android:popupMenuStyle">#style/MyPopupMenu</item>
<item name="android:itemTextAppearance">#style/TextAppearance</item>
</style>
<!-- Popup Menu Background Color styles -->
<style name="MyPopupMenu"
parent="#android:style/Widget.Holo.ListPopupWindow">
<item name="android:popupBackground">#color/Your_color_for_background</item>
</style>
<!-- Popup Menu Text Color styles -->
<style name="TextAppearance">
<item name="android:textColor">#color/Your_color_for_text</item>
</style>
Within your app theme you can set the android:itemBackground property to change the color of the action menu.
For example:
<style name="AppThemeDark" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/drk_colorPrimary</item>
<item name="colorPrimaryDark">#color/drk_colorPrimaryDark</item>
<item name="colorAccent">#color/drk_colorAccent</item>
<item name="actionBarStyle">#style/NoTitle</item>
<item name="windowNoTitle">true</item>
<item name="android:textColor">#color/white</item>
<!-- THIS IS WHERE YOU CHANGE THE COLOR -->
<item name="android:itemBackground">#color/drk_colorPrimary</item>
</style>
I'm also struck with this same problem, finally i got simple solution. just added one line to action bar style.
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColorPrimary">#color/colorAccent</item>
<item name="android:colorBackground">#color/colorAppWhite</item>
</style>
"android:colorBackground" is enough to change option menu background
FAST way!
styles.xml
<style name="popupTheme" parent="Theme.AppCompat.Light">
<item name="android:background">#color/colorBackground</item>
<item name="android:textColor">#color/colorItem</item>
</style>
Then add this specific styles to your AppTheme styles
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="popupTheme">#style/popupTheme</item>
</style>
DONE!
You can apply styles and Themes in Overflow MenuItem as per below. OverFlow Menu is ListView so, we can apply theme as per listview.
Apply below code in styles.xml
<style name="AppTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:dropDownListViewStyle">#style/PopupMenuListView</item>
<item name="android:actionBarWidgetTheme">#style/PopupMenuTextView</item>
<item name="android:popupMenuStyle">#style/PopupMenu</item>
<item name="android:listPreferredItemHeightSmall">40dp</item>
</style>
<!-- Change Overflow Menu ListView Divider Property -->
<style name="PopupMenuListView" parent="#android:style/Widget.Holo.ListView.DropDown">
<item name="android:divider">#color/app_navigation_divider</item>
<item name="android:dividerHeight">1sp</item>
<item name="android:listSelector">#drawable/list_selector</item>
</style>
<!-- Change Overflow Menu ListView Text Size and Text Size -->
<style name="PopupMenuTextView" parent="#android:style/Widget.Holo.Light.TextView">
<item name="android:textColor">#color/app_white</item>
<item name="android:textStyle">normal</item>
<item name="android:textSize">18sp</item>
<item name="android:drawablePadding">25dp</item>
<item name="android:drawableRight">#drawable/navigation_arrow_selector</item>
</style>
<!-- Change Overflow Menu Background -->
<style name="PopupMenu" parent="android:Widget.Holo.Light.ListPopupWindow">
<item name="android:popupBackground">#drawable/menu_overflow_bg</item>
</style>
I was able to change colour of action overflow by just putting hex value at:
<!-- The beef: background color for Action Bar overflow menu -->
<style name="MyApp.PopupMenu" parent="android:Widget.Holo.Light.ListPopupWindow">
<item name="android:popupBackground">HEX VALUE OF COLOR</item>
</style>
Add following to your Styles.xml
<style name="Custom_Theme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:itemBackground">#color/white</item>
<item name="android:textColor">#color/colorPrimaryDark</item>
</style>
Change theme in activity_main.xml only.
android:theme="#style/Custom_Theme"
Try this code. Add this snippet to your res>values>styles.xml
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:actionBarWidgetTheme">#style/Theme.stylingactionbar.widget</item>
</style>
<style name="PopupMenu" parent="#android:style/Widget.Holo.ListPopupWindow">
<item name="android:popupBackground">#color/DarkSlateBlue</item>
<!-- for #color you have to create a color.xml in res > values -->
</style>
<style name="Theme.stylingactionbar.widget" parent="#android:style/Theme.Holo">
<item name="android:popupMenuStyle">#style/PopupMenu</item>
</style>
And in Manifest.xml add below snippet under application
<application
android:allowBackup="true"
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/AppTheme" >
<style name="customTheme" parent="any_parent_theme">
<item name="android:itemBackground">#424242</item>
<item name="android:itemTextAppearance">#style/TextAppearance</item>
</style>
<style name="TextAppearance">
<item name="android:textColor">#E9E2BF</item>
</style>
Following are the changes required in your theme for changing action bar & overflow menu background color. You need to configure "android:background" of actionBarStyle & popupMenuStyle
<application
android:name="...."
android:theme="#style/AppLightTheme">
<style name="AppLightTheme" parent="android:Theme.Holo.Light">
<item name="android:actionBarStyle">#style/ActionBarLight</item>
<item name="android:popupMenuStyle">#style/ListPopupWindowLight</item>
</style>
<style name="ActionBarLight" parent="android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#color/white</item>
</style>
<style name="ListPopupWindowLight"parent="#android:style/Widget.Holo.Light.ListPopupWindow">
<item name="android:background">#color/white</item>
</style>
I used this and it works just fine.
Apply this code in the onCreate() function
val actionBar: android.support.v7.app.ActionBar? = supportActionBar
actionBar?.setBackgroundDrawable(ColorDrawable(Color.parseColor("Your color code here")))
To alter the color of the app bar only, you just have to change the colorPrimary value inside the colors.xml file and the colorPrimaryDark if you want to change the battery bar color as well:
<resources>
<color name="colorPrimary">#B90C0C</color>
<color name="colorPrimaryDark">#B90C0C</color>
<color name="colorAccent">#D81B60</color>
</resources>
I want to change the color of the orange line below the ActionBar.
I've tried a few things but nothing has helped so far.
The current theme on my Galaxy S2 is an orange theme.
So changing the theme, also changes the line.
But I don´t know how to get access to that line, in order to change the color.
You can use This code for achieving your purpose.
background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#ff0000" />
</shape>
</item>
<item android:bottom="5dp">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</item>
</layer-list>
styles.xml
<resources>
<style name="AppTheme" parent="android:Theme.Holo">
<item name="android:actionBarStyle">#style/AppTheme.ActionBar</item>
<item name="android:background">#ffffff</item>
<item name="android:colorBackground">#ffffff</item>
</style>
<style name="AppTheme.ActionBar" parent="android:Widget.ActionBar">
<item name="android:background">#drawable/background</item>
</style>
</resources>
These codes are suitable when you have not any options menu like image shows in question, if you have options menu you must customize your option menu items background.
If you have Option menu below code is suitable:
<resources>
<style name="AppTheme" parent="android:Theme.Holo.Light">
<item name="android:actionBarStyle">#style/AppTheme.ActionBar</item>
<item name="android:popupMenuStyle">#style/AppTheme.PopUpMenu</item>
</style>
<style name="AppTheme.ActionBar" parent="android:Widget.ActionBar">
<item name="android:background">#drawable/background</item>
</style>
<style name="AppTheme.PopUpMenu" parent="android:Widget.Holo.Light.ListPopupWindow">
<item name="android:popupBackground">#drawable/background</item>
</style>
</resources>
There is A simpler way than this (Creating Bunch of Styles).
Refering to this . Just set
getActionBar().setBackgroundDrawable(null);
This will Remove the line from Your Action Bar
I used this ^_^ and it is 100% working:
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Drawable res = getResources().getDrawable(R.drawable.ab_transparent_example);
getActionBar().setBackgroundDrawable(res);
and JUST USE THIS
In my case, in my application, I used the Holo theme.
<style name="AppTheme" parent="android:Theme.Holo">
...
</style>
Background toolbar is set through the property.
<style name="AppTheme" parent="android:Theme.Holo">
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
</style>
<style name="ActionBarStyle" parent="#android:style/Widget.Holo.ActionBar">
<item name="android:background">#drawable/action_bar_background</item>
</style>
Standard Holo action bar background is nine-patch drawable like this:
nine patch drawable
So, if you want to change the color of the bottom line, you need to create a new nine-patch drawable.
Create Resizable Bitmaps (9-Patch files)
Put the file in the folder drawable (example drawable-xxhdpi) and specify the path to the file in the theme.
I want to remove short divider before ActionBar's MenuItem which has "withText" option in it.
I've tried many different theme setting with it, but failed.
Is there any solution to remove it?
This is my theme xml.
<style name="my_actionbar" parent="#style/Widget.Sherlock.Light.ActionBar.Solid">
<item name="android:background">#drawable/actionbar_bg</item>
<item name="background">#drawable/actionbar_bg</item>
<item name="android:actionBarDivider">#null</item>
<item name="actionBarDivider">#null</item>
<item name="android:showDividers">none</item>
<item name="android:dividerVertical">#null</item>
<item name="android:dividerPadding">0dp</item>
<item name="android:divider">#null</item>
</style>
The android:actionBarDivider attribute belongs to the theme, not to the action bar style. 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've solve this problem by set android:listDivider attribute on main theme to some transparent drawble. But I don't know side effects by this setting.
main theme:
<style name="Theme_Main" parent="#style/Theme.Sherlock.Light">
....
<item name="android:listDivider">#drawable/shape_blank</item>
</style>
shape_blank.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<solid android:color="#android:color/transparent"/>
</shape>
I removed divider line from tabbar with use of below magical lines.
mTabHost.getTabWidget().setDividerDrawable(null);
OR
mTabHost.getTabWidget().setDividerDrawable(R.Color.transperant);
Use the below code in your fragment/Activity
getSupportActionBar().setElevation(0);
adapter.addTab(getSupportActionBar().newTab().setText("Tab-1"),
Tab1.class, null);
adapter.addTab(getSupportActionBar().newTab().setText("Tab-2"),
Tab2.class, null);
adapter.addTab(getSupportActionBar().newTab().setText("Tab-3"),
Tab3.class, null);
As of now every Tab has its TextColor as white. I want it to be grey when not selected and white on selected. So, how can i change the text color in onTabSelected or onTabUnselected.
Or should i go with setCustomView for the tab?? Here again the TextSize and all needs to be taken care of
<style name="my_ActionBarTabStyle" parent="#style/Widget.Sherlock.ActionBar.TabView">
<item name="background">#drawable/tab_indicator_ab_wicfy</item>
<item name="android:background">#drawable/tab_indicator_ab_wicfy</item>
<item name="android:textColor">#color/black</item>
</style>
i tried to use
<item name="textColor">#color/black</item>
but it gives me error that textColor is not a valid attribute
Thank You
You should not change text color from the code. Use color state list resource instead.
Define the color selector in resources. Define a xml file in res/color/ directory. The file will contain:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- use when selected -->
<item android:state_selected="true" android:color="#fff" />
<!-- otherwise use -->
<item android:color="#888" />
</selector>
And then set the text color in a style:
<item name="android:textColor">#color/my_color_selector</item>
Edit:
You have to set the text color in the right place in the styles! Set the textColor in (android:)actionBarTabTextStyle. The theme has to contain:
<style name="MyTheme" parent="Theme.Sherlock.Light.DarkActionBar">
...
<!-- define text style for tabs -->
<item name="actionBarTabTextStyle">#style/MyTabTextStyle</item>
<item name="android:actionBarTabTextStyle">#style/MyTabTextStyle</item>
...
</style>
Then set the text color in the tab text style:
<style name="MyTabTextStyle" parent="Widget.Sherlock.ActionBar.TabText" >
<item name="android:textColor">#color/my_color_selector</item>
</style>