how to set border bottom in action bar? - android

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.

Related

RadioButton focus background shape

I want to add focus ripple effect to whole RadioButton, but there is something strange is happening to it when I try to use ripple effect with highlight. In the picture, left is what I get and right is what I want:
background_drawable:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/colorAccent">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
</shape>
</item>
</ripple>
styles.xml
<style name="RadioButtonStyle" parent="Widget.AppCompat.CompoundButton.RadioButton">
<item name="android:background">#drawable/radio_button_background</item>
</style>
This happens only If I try to use ripple effect and not if I try to use only shape with selector and state_focused=true as background. For now my workaround is to use warpper View class for RadioButton and set background into it. Is there any way to get background as in the picture but without any additional code? Thanks.
The solution is to set the button attribute to null and set the drawableStart attribute in styles for the radio button:
<style name="RadioButtonStyle" parent="Widget.AppCompat.CompoundButton.RadioButton">
<item name="android:button">#null</item>
<item name="android:drawableStart">#drawable/radio_button_selector</item>
<item name="android:drawablePadding">4dp</item>
<item name="android:background">#drawable/radio_button_background</item>
<item name="android:gravity">center_vertical</item>
<item name="android:paddingStart">8dp</item>
<item name="android:paddingEnd">8dp</item>
<item name="android:paddingTop">11dp</item>
<item name="android:paddingBottom">11dp</item>
</style>
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Customize your theme here. -->
<item name="radioButtonStyle">#style/RadioButtonStyle</item>
<item name="android:radioButtonStyle">#style/RadioButtonStyle</item>
</style>
After that focus works as aspected and You can add background to the radio button as You want

Google Now gradient/shadow on status bar & navigation bar

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;

Android android:buttonStyle not applied

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

ActionBarSherlock - actionbar custom background with divider

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>

How to add rounded corners to Translucent background of activity?

I have a simple Activity and I would like to have the a rounded rectangle shape. The activity uses a translucent Drawable. I have seen popup windows by other developers that are translucent (not a dialog theme) with rounded corners and I am trying to replicate that. Any help would be appreciated.
Here is the code I currently have that produces a rectangular translucent window in the middle of the screen.
<style name="Theme.TranslucentDialog">
<item name="android:colorBackgroundCacheHint">#null</item>
<item name="android:windowIsTranslucent">true</item>
<!-- Note that we use the base animation style here (that is no
animations) because we really have no idea how this kind of
activity will be used. -->
<item name="android:windowBackground">#drawable/translucent_background</item>
<item name="android:windowNoTitle">true</item>
<item name="android:colorForeground">#fff</item>
<item name="android:windowIsFloating">true</item>
<item name="android:backgroundDimEnabled">false</item>
<item name="android:windowAnimationStyle">#android:style/Animation.Translucent</item>
</style>
<drawable name="translucent_background">#60000000</drawable>
I was not able to do this by generating a custom shape in the code. I had to accomplish this by creating my own 9-Patch png file. Here is the final Theme that I created:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme" parent="android:Theme">
</style>
<style name="Theme.TranslucentDialog">
<item name="android:colorBackgroundCacheHint">#null</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowNoTitle">true</item>
<item name="android:colorForeground">#ffffff</item>
<item name="android:windowIsFloating">true</item>
<item name="android:backgroundDimEnabled">false</item>
<item name="android:windowAnimationStyle">#android:style/Animation.Translucent</item>
<item name="android:windowBackground">#drawable/notification_panel</item>
</style>
</resources>
Please note the line:
<item name="android:windowBackground">#drawable/notification_panel</item>
This is the line that sets the background of the activity to the 9-Patch image that I created. This image could be anything, an image, a 9-patch or a custom shape. I used a 9-Patch so that I could have a nice border and rounded corners while retaining a very translucent activity window (showing everything behind it but leaving a nice hue of grey where the activity window is located).
The 9-patch notification_panel.9.png is located in my drawable folder. At first I was a little bit intimidated to create my own 9-patch image, but it turns out that by using Inkscape and the android draw9patch.bat utility program, I was able to do this with satisfactory results.
Let me know if anyone has any questions.
You need to make a custom shape. Here's an example xml file (white rectangle with rounded corners):
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#ffffff"
android:endColor="#ffffff"/>
<corners
android:radius="8dp"/>
</shape>
Although this question is nearly 10 years old, to achieve this, you have to make a xml file in drawable folder. In this file define a shape like this :
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#0f000000"
android:endColor="#0f000000"/>
<corners
android:radius="10dp"/>
</shape>
In Style.xml create a new style, and in it create an item for background and define #drawable/yourFileNameInDrawbaleFolder.xml
<style name="AppTheme.customTheme">
<item name="android:windowIsTranslucent">true</item>
<item name="windowNoTitle">true</item>
<item name="android:background">#drawable/dialogbg</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:radius">15dp</item>
</style>

Categories

Resources