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;
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 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
I'm working on an android app and I'm facing some problems in designing my actionbar. I'm using the dark actionbar with white icons on it. I have a dropdown menu popped when I click the overflow icon. Everything is good but I need light background for the dropdown menu with red colored text. I have tried editing the theme in styles.xml but I can only change the background color of dropdown menu when I'm using the light colored theme.
I can get the light colored dropdown menu when I change the Theme.Base.AppCompat.Light.DarkActionBar to Theme.Base.AppCompat.Light but other icons like 'Search' turn very light and hardly visible (see 2nd picture). How can I change the text color on the drop down menu from black to red and make the 'Search' icon visible.
Here is the code for more insight
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.Base.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:popupMenuStyle">#style/MyPopUpMenu</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="#android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/gloryred</item>
</style>
<style name="MyPopUpMenu"
parent="#android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:popupMenuStyle">#color/white</item>
</style>
menu_actions.xml
<?xml version="1.0" encoding="utf-8"?>
<item android:id="#+id/action_search"
android:title="#string/action_search"
android:icon="#drawable/ic_action_search"
com.example.unitedstates.app:showAsAction="ifRoom"
com.example.unitedstates.app:actionViewClass="android.widget.SearchView"/>
<item android:id="#+id/action_overflow"
android:title="#string/action_overflow"
android:icon="#drawable/ic_action_overflow"
com.example.unitedstates.app:showAsAction="ifRoom">
<menu>
<item
android:id="#+id/action_help"
android:title="#string/action_help"
android:icon="#drawable/ic_action_help"
android:showAsAction="never"/>
<item
android:id="#+id/action_about"
android:title="#string/action_about"
android:icon="#drawable/ic_action_about"
android:showAsAction="never"/>
<item
android:id="#+id/action_feedback"
android:title="#string/action_feedback"
android:icon="#drawable/ic_action_feedback"
android:showAsAction="never"/>
</menu>
</item>
You can change the background color and text color of the dropdown menu in the actionbar like this.
Set the style for the popup menu in styles.xml.
<style name="PopupMenuStyle" parent="Theme.AppCompat.Light">
<item name="android:background">#color/YourColor</item>
<item name="android:textColor">#Color/YourColor</item>
</style>
Now set this style as the popupTheme for your toolbar.
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
// rest of your code
app:popupTheme="#style/PopupMenuStyle" />
Here's my solution for thoses who are using Material theme with androidx.appcompat:
as of appcompat:1.2.0
you need to create a res/drawable/mtrl_popupmenu_background.xml and set it a custom color :
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="?attr/colorPrimaryDark"/>
<corners
android:bottomLeftRadius="4dp"
android:bottomRightRadius="4dp"
android:topLeftRadius="4dp"
android:topRightRadius="4dp"/>
<padding
android:bottom="8dp"
android:top="8dp"/>
</shape>
Then create a dedicated theme :
<style name="YouTheme.PopupMenuStyle">
<item name="actionOverflowMenuStyle">#style/YouThemePopupMenu.Overflow</item>
</style>
<style name="YouThemePopupMenu" parent="#style/Widget.MaterialComponents.PopupMenu"/>
<style name="YouThemePopupMenu.Overflow" parent="#style/Widget.MaterialComponents.PopupMenu.Overflow">
<item name="android:dropDownSelector">?attr/listChoiceBackgroundIndicator</item>
<item name="android:popupBackground">#drawable/mtrl_popupmenu_background</item>
</style>
Then use it inside your Toolbar :
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/YourTheme.PopupMenuStyle"/>
If you want to use black back ground you can to easy way go to res > drawable-hdpi > menu_dropdown_panel_example.9.png
this is the nine patch image other then black lines replace its color to black or glory red if you want
as same you have to do in
res>drawable-mdpi>menu_dropdown_panel_example.9.png
res>drawable-xhdpi>menu_dropdown_panel_example.9.png
res>drawable-xxhdpi>menu_dropdown_panel_example.9.png
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.
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.