I'm implementing ActionBarsherlock and I want to change the actionbar background.
I override the properties but the blue divider dissapear. How can I use custom background with the blue divider?
<style name="Theme.MyTheme" parent="Theme.Sherlock.ForceOverflow">
<item name="actionBarStyle">#style/Widget.MyTheme.ActionBar</item>
<item name="android:actionBarStyle">#style/Widget.MyTheme.ActionBar</item>
</style>
<style name="Widget.MyTheme.ActionBar" parent="Widget.Sherlock.ActionBar">
<item name="android:background">#ff3e3f3d</item>
<item name="background">#ff3e3f3d</item>
</style>
For anyone who (like me) doesn't enjoy playing around with 9-patch images, you can get the divider at the bottom of the action bar using an xml drawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Bottom Line -->
<item>
<shape android:shape="rectangle">
<solid android:color="#color/action_bar_line_color" />
</shape>
</item>
<!-- Color of your action bar -->
<item android:bottom="2dip">
<shape android:shape="rectangle">
<solid android:color="#color/action_bar_color" />
</shape>
</item>
</layer-list>
Save this as drawable/action_bar_background.xml, Then apply it in your theme:
<style name="Widget.MyTheme.ActionBar" parent="Widget.Sherlock.ActionBar">
<item name="android:background">#drawable/action_bar_background</item>
<item name="background">#drawable/action_bar_background</item>
</style>
http://jgilfelt.github.io/android-actionbarstylegenerator/
This project can be used to generate ActionBar style you need.
The blue divider is the background by default. It's a 9-patch drawable which will ensure the line always appears at the bottom of the action bar regardless of its height.
For your situation I would copy the default background .pngs from Android and then modify them so that the expandable section of the 9-patch is your target background color. This will fill the action bar with your desired color while maintaining the blue border at the bottom.
Just an update on the answer provided by DanielGrech. It's also possible to use your own custom graphic at the bottom of the actionbar. Like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Bottom Line with custom graphic instead of a solid color-->
<item android:drawable="#drawable/bar">
<shape android:shape="rectangle"/>
</item>
<!-- Color of your action bar -->
<item android:bottom="2dip">
<shape android:shape="rectangle">
<solid android:color="#color/action_bar_color" />
</shape>
</item>
</layer-list>
Related
Simple TabLayout. No tab indicator. Arggh!
<com.google.android.material.tabs.TabLayout
android:id="#+id/my_tabs"
style="#style/MyTabLayout"
android:theme="#style/MyThemeOverlay"
android:layout_width="match_parent"
android:layout_height="50dp"/>
<style name="MyTabLayout" parent="Widget.MaterialComponents.TabLayout">
<item name="android:background">#color/red</item>
<item name="tabTextAppearance">#style/MyTextAppearance</item>
<item name="tabMinWidth">100dp</item>
<item name="tabMaxWidth">100dp</item>
<item name="tabIndicator">#drawable/tab_indicator_rounded_top_corners</item>
<item name="tabIndicatorColor">#color/color_white</item>
<item name="tabIndicatorHeight">5dp</item>
<item name="tabIndicatorFullWidth">false</item>
<item name="tabTextColor">#color/color_accent_dark</item>
<item name="tabGravity">center</item>
</style>
<style name="MyThemeOverlay">
<item name="android:background">#color/blue</item>
</style>
tab_indicator_rounded_top_corners.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners
android:topLeftRadius="2dp"
android:topRightRadius="2dp" />
</shape>
</item>
</layer-list>
And this is what pops out. There should be a white bar under the selected tab.
I am almost sure that this relates to this line in the theme overlay:
<item name="android:background">#color/blue</item>
Because when I do not override the background color, I can see the tab indicators. Problem is that I need to change that background color in some cases using theme overlays.
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 have the following code in my styles.xml:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:buttonStyle">#style/ButtonStyle</item>
</style>
<style name="ButtonStyle" parent="#android:style/Widget.Button">
<item name="android:background">#FF00FF</item>
<item name="android:textColor">#color/material_deep_teal_500</item>
</style>
This is supposed to print the button background in Pink (#FF00FF) and text in teal, but it not applies to my buttons.
I had two kind of views, normal Button () and ButtonLinearLayout, that gets the current them default Button backgroundm, and apply it to LinearLayout.
But it's not changed when i try to apply it to my views / default button.
The simplest way is to create a res/drawable/button_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:color="#color/material_deep_teal_500" > //text color when button is pressed
<shape>
<solid
android:color="#ff00ff"/> //background color when button is pressed
</shape>
</item>
<item android:color="#color/material_deep_teal_500"> //text color when button is normal
<shape>
<solid android:color="#ff00ff"/> //background color when button is normal
</shape>
</item>
</selector>
Now put android:background="#drawable/button_selector" in xml having button
how can i draw an actionbar bottom border like this :
i try using margin :
<style name="MyActionBar"
parent="#android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:titleTextStyle">#style/TitleTextStyle</item>
<item name="android:background">#088A29</item>
<item name="android:backgroundStacked">#088A29</item>
<item name="android:backgroundSplit">#0B3B0B</item>
<item name="android:layout_marginBottom">5dp</item>
but the margin is white and i don't understand how change color
thanks!
For me the following solution worked perfectly and smooth.
<style name="MyActionBar"
parent="#android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:titleTextStyle">#style/TitleTextStyle</item>
<item name="android:background">#drawable/custom_background_bar</item>
<item name="android:layout_marginBottom">5dp</item>
And of course I built the custom_background_bar that I saved into drawable forlder.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<solid android:color="#ffff0000" />
</shape>
</item>
<item android:top="-3dp" android:right="-3dp" android:left="-3dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="2dp"
android:color="#ff00ff00" />
</shape>
</item>
</layer-list>
You are free to change #ffff0000 (the background bar color) and #ff00ff00 (the bottom border color) with the values you prefer.
You can change also then thickness and style of the border or add other shape and elements inside the layer-list.
You can also set again another drawable as background and give shade or transparency as you prefer.
I hope it will help.
Play Newsstand uses a custom 9-patch with a small drop shadow for its ActionBar background.
But generally the shadow below the ActionBar can be altered by applying Drawable to your theme using the windowContentOverlay attribute.
Here's an example:
<style name="Your.Theme" parent="#android:style/Theme.Holo">
<item name="android:windowContentOverlay">#drawable/your_drawable</item>
</style>
Here are the 9-patches Play Newsstand uses:
MDPI -
HDPI-
XHDPI-
Alternatively, you could use the Action Bar Style Generator, which will automagically add it for you to your ActionBar background Drawable.
Button selectors allows to define a background for each state of the button, but how can the button's text style be defined for each state? My objective is to grey out a button when disabled. So I set a greyed out background to the disable state of the button, but the only way I found to also grey out the text is to change it's color dynamically when I disable the button...
Anybody can help?
Thanks
<style name="srp_button" parent="#android:style/Widget.Button">
<item name="android:background">#drawable/btn_default</item>
<item name="android:textColor">#ffffff</item> <!-- How to specify different color for different state? -->
<!-- more stuff -->
</style>
drawable/btn_default.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true"><shape>
<solid android:color="#color/pink" />
<corners android:radius="6dp" />
</shape></item>
<item><shape>
<solid android:color="#000000" />
<corners android:radius="6dp" />
</shape></item>
</selector>
Well!
You can define the Text color for all 4 state, similarly as you defined background for the Button. For example:
file name: /res/color/text_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:color="#440000"/>
<item android:state_focused="true" android:color="#004400"/>
<item android:state_pressed="true" android:color="#000044"/>
<item android:color="#444"/>
</selector>
Take this file into your Button Style like this:
<style name="srp_button" parent="#android:style/Widget.Button">
<item name="android:background">#drawable/btn_default</item>
<item name="android:textColor">#color/text_color</item> <!-- Here is specified text color -->
</style>