RadioButton focus background shape - android

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

Related

Keep AlertDialog default layout params using custom window background

I need a dialog with custom background color and rounded corners. How can I keep default layout params using custom window background for AlertDialog?
Currently, my dialog has smaller left-right margin than in regular dialog. Also, dialog buttons such as positive and neutral have more shift from the edge of dialog.
<style name="DialogStuffTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:windowBackground">#drawable/bg_custom</item>
<item name="android:windowAnimationStyle">#android:style/Animation.Dialog</item>
<item name="android:gravity">center</item>
</style>
bg_custom.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:angle="270"
android:startColor="#color/Cyan200"
android:endColor="#color/Green200"
android:type="linear" />
<corners
android:radius="#dimen/dialog_corner_radius" />
</shape>
</item>
</selector>
Should use this when creating AlertDialog: new AlertDialog.Builder(context, R.style.MyDialog)
<style name="DialogBarButton" parent="Widget.AppCompat.Button.ButtonBar.AlertDialog">
<item name="android:textColor">#color/button_bar_enabled_selector</item>
</style>
<style name="DialogBase" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:windowMinWidthMajor">#dimen/dialog_min_width_major</item>
<item name="android:windowMinWidthMinor">#dimen/dialog_min_width_minor</item>
<item name="android:windowAnimationStyle">#style/Animation.AppCompat.Dialog</item>
<item name="android:buttonBarButtonStyle">#style/DialogBarButton</item>
</style>
<style name="MyDialog" parent="DialogBase">
<item name="android:windowBackground">#drawable/bg_custom</item>
</style>
values/dimens.xml:
<dimen name="dialog_min_width_major">65%</dimen>
<dimen name="dialog_min_width_minor">85%</dimen>
color/button_bar_enabled_selector.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/colorAccent" android:state_enabled="true" />
<item android:color="#color/TextDisabled"/>
</selector>
I don't know why color of dialog bar buttons had changed in this case. To fix this issue I have to use selector with colors for enabled and disabled states.

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

Android: Change color of line below ActionBar

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.

Style android spinner

I'm trying to get my android app a bit more stylish and have made some progress but the spinner dropdown are giving me trouble. I've got a screenshot to show you the problem:
What I want is the white box in the background to be transparent, as in the same grey overlay over the back screen as the rest of the screen outside the dropdown.
Android 4.0, API 15 if I recall correctly.
As requested here's how I do it so far. These are snippets I think are relevant but I might have missed something.
Here's the xml for spinner:
<Spinner
android:id="#+id/edit_countrySpinner"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:entries="#array/edit_countryArray"
android:gravity="center"
android:prompt="#string/country_prompt" />
In my values/style.xml. If I change the color of the background here the background in the dialog do change, but all the rest of the backgrounds as well. I haven't figure out how to jus change the background in the dropdown dialog.
<style name="appcin" parent="#android:style/Theme.NoTitleBar.Fullscreen">
<item name="android:spinnerStyle">#style/spinnerStyle</item>
<item name="android:spinnerItemStyle">#style/SpinnerItem</item>
<item name="android:spinnerDropDownItemStyle">#style/SpinnerDropDownItem</item> -->
<item name="android:background">#FFFFFF</item>
</style>
<style name="spinnerStyle">
<item name="android:background">#drawable/pink_white_dropdown</item>
<item name="android:clickable">true</item>
</style>
<style name="SpinnerItem">
<item name="android:textColor">#993399</item>
<item name="android:background">#drawable/pink_white_dropdown</item>
<item name="android:maxHeight">10dip</item>
</style>
<style name="SpinnerDropDownItem">
<item name="android:textColor">#993399</item>
<item name="android:background">#FFFFFF</item>
</style>
I've tried adding this to the app theme but none of them made any difference, the background was still white.
<...theme....>
<item name="android:dropDownListViewStyle">#style/DropDownStyle</item>
<item name="android:dropDownSpinnerStyle">#style/DropDownStyle</item>
<item name="android:dropDownSelector">#style/DropDownStyle</item>
</... theme ...>
<style name="DropDownStyle">
<item name="android:background">#FFF000</item>
<item name="android:popupBackground">#FFF000</item>
<item name="android:cacheColorHint">#FFF000</item>
</style>
In drawable/pink_white_dropdown, just showing the same image for all the cases. pink_white_arrow is a 9patch image I've made. There are lots of guides, here's one I found by 30sec on google.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false" android:state_enabled="true"
android:drawable="#drawable/pink_white_arrow"/>
<item android:state_window_focused="false" android:state_enabled="false"
android:drawable="#drawable/pink_white_arrow"/>
<item android:state_pressed="true"
android:drawable="#drawable/pink_white_arrow"/>
<item android:state_pressed="false"
android:drawable="#drawable/pink_white_arrow"/>
<item android:state_focused="true" android:state_enabled="true"
android:drawable="#drawable/pink_white_arrow"/>
<item android:state_enabled="true"
android:drawable="#drawable/pink_white_arrow"/>
<item android:state_focused="true"
android:drawable="#drawable/pink_white_arrow"/>
<item
android:drawable="#drawable/pink_white_arrow"/>
</selector>
Somewhere in these files I figure something should be made transparent, but I don't know where.
Remove the SpinnerStyle background attribute.
Remove this:
<style name="spinnerStyle">
<item name="android:background">#drawable/whitish_rectangle</item>
</style>
which is what draws the background white rectangle.
Building on the code in your question, here is a basic example on how you can style your Spinner:
The styles.xml file sets styles for the SpinnerItem and SpinnerDropDownItem:
<resources>
<style name="customtheme" parent="#android:style/Theme.Light">
<item name="android:spinnerItemStyle">#style/SpinnerItem</item>
<item name="android:spinnerDropDownItemStyle">#style/SpinnerDropDownItem</item>
</style>
<style name="SpinnerItem">
<item name="android:textColor">#993399</item>
<item name="android:background">#drawable/my_rectangle</item>
</style>
<style name="SpinnerDropDownItem">
<item name="android:textColor">#993399</item>
<item name="android:background">#drawable/my_rectangle</item>
</style>
</resources>
For testing, I've created a bright-colored drawable shape, called my_rectangle.xml. Replace this with your own drawable:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#ff0000" />
<stroke
android:width="1dp"
android:color="#888888" />
</shape>
Add the Spinner to the Activity's layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="40dip">
<Spinner
android:id="#+id/edit_countrySpinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="#array/location_names"/>
</LinearLayout>
This produces:
with no white square in the background.
add
<item name="android:popupBackground">#null</item>
to your spinner style.
style android spinner
Spinner Widget requires two different custom layouts, one for the view to be displayed and another for the drop down list!
In this example blog on Custom Spinner Android, we will guide you how to create a custom spinner in android studio which will have:
Customized Background for Selected Item
Custom Selected Item Text Color
Text Color for Dropdown
Background for Drop down List
Spinner Animation
Link here: https://androiddvlpr.com/custom-spinner-android/
I had the same problem, and the below code worked for me:
<item name="android:popupBackground">#null</item>

Categories

Resources