Changing spinner arrow, Appcompat v21 - android

i have activities which i themed with my custom theme, but for spinner i choosed to style it with Appcompat v21 but i got this :
So how to change the Spinner arrow to be black or blue if is there a way ?
i found this as similar question but doesn't have any answer : https://stackoverflow.com/questions/28561105/add-custom-spinner-arrow
here is my spinner :
<Spinner
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/spinner2"
android:layout_marginTop="10dp"
android:layout_centerInParent="true" />
i used this to style the spinner:
<style name="MyTheme.SpinnerAppTheme" parent="Widget.AppCompat.Spinner">
</style>
this is how i use the adapter
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(
getBaseContext(), R.array.listMedRes, android.R.layout.simple_spinner_item);
i just want to theme the spinner , thanks alot

Might be late but better late than never. To respond to your question: "Is there a way to use it only in spinner?". The answer is yes, refer to the code below.
Add this code to your theme or style file
<style name="customSpinnerTheme" parent="yourAppThemeThatUseAppCompat21">
<item name="colorControlNormal">#eaeaea</item>
<item name="colorControlActivated">#000000</item>
<item name="colorControlHighlight">#000000</item>
</style>
Then in your XML that use spinner you can add this line
android:theme="#style/customSpinnerTheme"
e.g.
<Spinner
android:theme="#style/customSpinnerTheme"
android:id="#+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:spinnerMode="dialog" />

Since you are using AppCompat-v21, you can take advantage of the new material design styles attributes:
colorPrimary: your app branding color for the app bar, applies to action bar
colorPrimaryDark: darker variant for the status bar and contextual app bars
colorAccent: lets you define bright complement to the primary branding color. By default, this is the color applied to framework controls (via colorControlActivated)
colorControlNormal: color applied to framework controls in their normal state
colorControlActivated: applied to framework controls in their activated
Here is an example for you
styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#color/primary</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#color/primary_dark</item>
<!-- colorAccent is used as the default value for colorControlActivated which is used to tint widgets -->
<item name="colorAccent">#color/accent</item>
<item name="colorControlNormal">#color/primary</item>
</style>
colors.xml
<resources>
<color name="primary">#ff0000ff</color>
<color name="primary_dark">#ff0000af</color>
<color name="accent">#870000ff</color>
<color name="white">#ffffffff</color>
</resources>
Here is how it looks
Hope this helps.

There is a way to change your arrow color... actually it's not color you can change this image with blue color image..
create a xml file myspinner_selector in your drawable folder
and paste
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item><layer-list>
<item><shape>
<gradient android:angle="90" android:endColor="#ffffff" android:startColor="#ffffff" android:type="linear" />
<stroke android:width="1dp" android:color="#504a4b" />
<corners android:radius="5dp" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape></item>
<item ><bitmap android:gravity="bottom|right" android:src="#drawable/blue_arrow" /> // you can use any other image here, instead of default_holo_dark_am
</item>
</layer-list></item>
</selector>
blue_arrow is an image, and add this style in your style file
<style name="spinner_style" >
<item name="android:background">#drawable/myspinner_selector</item>
<item name="android:layout_marginLeft">5dp</item>
<item name="android:layout_marginRight">5dp</item>
<item name="android:layout_marginBottom">5dp</item>
<item name="android:paddingLeft">5dp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
</style>
finally add this style in your spinner
<Spinner
android:id="#+id/spinner1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/spinner_style"
/>
it look like this. you need to customize

look at below code.
create spinner_bg.xml under drawable folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item><layer-list>
<item><shape>
<gradient android:angle="270" android:centerColor="#d0d0d0" android:endColor="#c5c6c6" android:startColor="#dbdadb" android:type="linear" />
<stroke android:width="1dp" android:color="#7a7a7a" />
<corners android:radius="1dp" />
<padding android:left="3dp" android:right="3dp" />
</shape></item>
<item><bitmap android:gravity="center|right" android:src="#drawable/dropdown_icon_black" />
</item>
</layer-list></item>
</selector>
write down below code in styles.xml
<style name="spinner_style">
<item name="android:background">#drawable/spinner_bg</item>
</style>
Apply style to spinner
<Spinner
android:id="#+id/spinner"
style="#style/spinner_style"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:focusable="true"
android:overlapAnchor="false"
android:paddingRight="10dp"
android:spinnerMode="dropdown"
android:textColor="#android:color/white" />
use this image for spinner drawable

you could tint it with the attribute tint color.
<Spinner android:id="#+id/spinner"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:backgroundTint="#color/white"
/>

Related

how to customize searchview edittext?

I want to customize my searchview edittext which expanded when I click on searchview icon to be like this image
And I tried the custom style to do that but I got this result in this image
The problems:
There is a blue vertical bar at the start of the edittext I need to remove it and make it appears only on a search query and after the querytext also I want to change the color of this vertical bar
I need to add a white search icon with specific padding of the hint and text query currently the white icon in the result screen disappears on search query
How I got this result?
I define searchViewStyle
<style name="SearchViewStyle" parent="Widget.AppCompat.SearchView">
<item name="searchIcon">#drawable/ic_baseline_dark_search_24</item>
<item name="closeIcon">#null</item>
<item name="goIcon">#drawable/ic_baseline_dark_search_24</item>
<item name="commitIcon">#drawable/ic_baseline_dark_search_24</item>
<item name="android:editTextColor">#color/white</item>
<item name="android:textColorHint">#color/white</item>
<item name="android:textColorHighlight">#color/red</item>
<item name="queryBackground">#drawable/radius_drawable</item>
<item name="searchHintIcon">#drawable/ic_baseline_search_24</item>
<item name="queryHint">"search_hint"</item>
</style>
I define searchview like this in my fragment layout
<androidx.appcompat.widget.SearchView
android:id="#+id/searchView"
style="#style/SearchViewStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
</androidx.appcompat.widget.SearchView>
I define a custom drawable background for searchview
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="18dp"
/>
<solid
android:color="#4F4F4F"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="270dp"
android:height="60dp"
/>
</shape>
While I do not clearly understand what your requirements are exactly, I would like to point out one thing though.
For Applying a style to a SearchView we have to use the theme attribute, your code seems okay, maybe your changes are not being applied for now I believe. So try using the android:theme attribute for your style as follows. The rest of your requirements should easily come by to you with some trial and error I believe. Thanks.
<androidx.appcompat.widget.SearchView
android:id="#+id/searchView"
android:theme="#style/SearchViewStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
Here is how I would recommend you to update your style to get as close as possible to your design.
<style name="SearchViewStyle" parent="Widget.AppCompat.SearchView">
<item name="searchIcon">#drawable/ic_baseline_dark_search_24</item>
<item name="queryBackground">#android:color/transparent</item>
<item name="queryHint">"search_hint"</item>
<item name="iconifiedByDefault">false</item>
<item name="android:textColorHint">#color/white</item>
<item name="android:background">#drawable/radius_drawable</item>
</style>
And you can modify your drawable and get rid of the padding and size since you are using wrap_content in your layout
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#4F4F4F" />
<corners android:radius="18dp" />
</shape>
You can use custom searchview in AppCompat SearchView . Copy searchview from this link searchview.xml
Then edit the xml or remove the extra margin from xml.
Add custom searchview layout like this:
<androidx.appcompat.widget.SearchView
android:id="#+id/search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:gravity="center"
app:layout="#layout/custom_search_view"
app:iconifiedByDefault="true"
app:queryBackground="#android:color/transparent"
app:queryHint="Search"
app:searchIcon="#drawable/search" />

Change checked radio button color in Android Studio [duplicate]

I want to change the color of the circle of RadioButton in one of my projects, but I could not understand which property to set. The background color is black, so it gets invisible. I want to set the color of the circle to white.
It is simpler just setting the buttonTint color (only works on API level 21 or above):
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/radio"
android:checked="true"
android:buttonTint="#color/your_color"/>
In your values/colors.xml file, put your color, in this case a reddish one:
<color name="your_color">#e75748</color>
Result:
If you want to do it by code (also API 21 and above):
if(Build.VERSION.SDK_INT >= 21)
{
ColorStateList colorStateList = new ColorStateList(
new int[][]
{
new int[]{-android.R.attr.state_enabled}, // Disabled
new int[]{android.R.attr.state_enabled} // Enabled
},
new int[]
{
Color.BLACK, // disabled
Color.BLUE // enabled
}
);
radio.setButtonTintList(colorStateList); // set the color tint list
radio.invalidate(); // Could not be necessary
}
Update:
use this one instead
<android.support.v7.widget.AppCompatRadioButton
android:id="#+id/rbtn_test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:buttonTint="#color/primary" />
Then add this line into parent layout or Alt + Enter in Android Studio to auto-add
xmlns:app="http://schemas.android.com/apk/res-auto"
A minimum example should look like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.AppCompatRadioButton
android:id="#+id/rbtn_test"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:buttonTint="#color/primary" />
</LinearLayout>
In your program, you should call it like this:
AppCompatRadioButton radioButton = (AppCompatRadioButton) view.findViewById(R.id.rbtn_test);
Basically, this kind of pattern can be applied for all AppCompact types such as AppCompatCheckBox, AppCompatButton, and so on.
Old Answer:
In order to support below android API 21, you can use AppCompatRadioButton. Then use setSupportButtonTintList method to change the color. This is my code snippet to create a radio button.
AppCompatRadioButton rb;
rb = new AppCompatRadioButton(mContext);
ColorStateList colorStateList = new ColorStateList(
new int[][]{
new int[]{-android.R.attr.state_checked},
new int[]{android.R.attr.state_checked}
},
new int[]{
Color.DKGRAY
, Color.rgb (242,81,112),
}
);
rb.setSupportButtonTintList(colorStateList);
Tested result at API 19:
See the Android reference link for more detail.
<android.support.v7.widget.AppCompatRadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:buttonTint="#color/Color" />
This is working on API pre 21 as well as post 21.
In your styles.xml put:
<!-- custom style -->
<style name="radionbutton"
parent="Base.Widget.AppCompat.CompoundButton.RadioButton">
<item name="android:button">#drawable/radiobutton_drawable</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowIsFloating">false</item>
<item name="android:backgroundDimEnabled">true</item>
</style>
Your radio button in XML should look like:
<RadioButton
android:layout_width="wrap_content"
style="#style/radionbutton"
android:checked="false"
android:layout_height="wrap_content"
/>
Now all you need to do is make a radiobutton_drawable.xml in your drawable folder. Here is what you need to put in it:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/radio_unchecked" android:state_checked="false" android:state_focused="true"/>
<item android:drawable="#drawable/radio_unchecked" android:state_checked="false" android:state_focused="false"/>
<item android:drawable="#drawable/radio_checked" android:state_checked="true" android:state_focused="true"/>
<item android:drawable="#drawable/radio_checked" android:state_checked="true" android:state_focused="false"/>
</selector>
Your radio_unchecked.xml file:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:width="1dp" android:color="#color/colorAccent"/>
<size android:width="30dp" android:height="30dp"/>
</shape>
Your radio_checked.xml file:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke android:width="1dp" android:color="#color/colorAccent"/>
<size android:width="30dp" android:height="30dp"/>
</shape>
</item>
<item android:top="5dp" android:bottom="5dp" android:left="5dp" android:right="5dp">
<shape android:shape="oval">
<solid android:width="1dp" android:color="#color/colorAccent"/>
<size android:width="10dp" android:height="10dp"/>
</shape>
</item>
</layer-list>
Just replace #color/colorAccent with the color of your choice.
Declare a custom style in your styles.xml file.
<style name="MyRadioButton" parent="Theme.AppCompat.Light">
<item name="colorControlNormal">#color/indigo</item>
<item name="colorControlActivated">#color/pink</item>
</style>
Apply this style to your RadioButton via the android:theme attribute.
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Radio Button"
android:theme="#style/MyRadioButton"/>
But only if your activity extends AppCompatActivity.
For under API 21
Create a custom style RadioButton:
File style.xml
<style name="RadioButton" parent="Theme.AppCompat.Light">
<item name="colorAccent">#color/green</item>
<item name="android:textColorSecondary">#color/mediumGray</item>
<item name="colorControlNormal">#color/red</item>
</style>
In the layout, use the theme:
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/RadioButton" />
For API 21 and higher
Just use buttonTint:
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:buttonTint="#color/green" />
You can change the color of radio button's unchecked and checked state by using style in XML.
<RadioButton
android:id="#+id/rb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/RadioButtonStyle" />
In style.xml
<style name="RadioButtonStyle" parent="Theme.AppCompat.Light">
<item name="colorAccent">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
</style>
You can set the desired colors in this style.
You have to use this code:
<android.support.v7.widget.AppCompatRadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Radiobutton1"
app:buttonTint="#color/black" />
Using app:buttonTint instead of android:buttonTint and also android.support.v7.widget.AppCompatRadioButton instead of Radiobutton!
Set the buttonTint property. For example, android:buttonTint="#99FF33".
I made it the short way like this (working on API pre 21 as well as post 21):
Your radio button in XML should look like this
<RadioButton android:id="#+id/radioid"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:button="#drawable/radiodraw" />
In file radiodraw.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" >
<shape android:shape="oval" >
<stroke android:width="1dp" android:color="#000"/>
<size android:width="30dp" android:height="30dp"/>
<solid android:color="#android:color/transparent"/>
</shape>
</item>
<item android:state_checked="true">
<layer-list>
<item>
<shape android:shape="oval">
<stroke android:width="1dp" android:color="#000"/>
<size android:width="30dp" android:height="30dp"/>
<solid android:color="#android:color/transparent"/>
</shape>
</item>
<item android:top="5dp" android:bottom="5dp" android:left="5dp" android:right="5dp">
<shape android:shape="oval">
<solid android:width="1dp" android:color="#000"/>
<size android:width="10dp" android:height="10dp"/>
</shape>
</item>
</layer-list>
</item>
</selector>
You have to add color transparent for drawing the unchecked status; else it draws a solid black oval.
For those who want to change disable, checked and enabled states you can do the following steps:
<!-- Or androidX radio button or material design radio button -->
<android.support.v7.widget.AppCompatRadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:buttonTint="#color/black"
android:text="Radiobutton1"
app:buttonTint="#color/radio_button_color" />
Then in the color res folder, make a file named "radio_button_color.xml":
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/yellow900" android:state_selected="true" />
<item android:color="#color/yellow800" android:state_checked="true" />
<item android:color="#color/gray800" android:state_enabled="false" />
<item android:color="#color/yellow800" android:state_enabled="true" />
</selector>
Sometimes you just need to override colorControlNormal like this:
<style name="RadioButtonStyle" parent="AppTheme">
<item name="colorControlNormal">#color/pink</item>
<item name="colorAccent">#color/colorPrimary</item>
<item name="android:textColorSecondary">#color/black</item>
</style>
And you will get a button like this:
colorControlNormal is used for the unchecked state and colorAccent for checked.
There is an XML attribute for it:
android:buttonTint="yourcolor"
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/radio"
android:buttonTint="#color/my_color"/>
All buttons will change color, the circle box and the central check.
Just use the android:buttonTint="#color/colorPrimary" attribute on the <RadioButton> tag.
RadioButton by default takes the colour of colorAccent in res/values/colors.xml file.
So go to that file and change the value of
<color name="colorAccent">#3F51B5</color>
to the colour you want.
You can do it this way in XML with the android:buttonTint attribute:
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/radio"
android:checked="false"
android:padding="5dp"
android:buttonTint="#color/radio_color"/>
You can do it this way in Java using android:buttonTint:
// RadioButton ColorStateList
ColorStateList colorStateList = new ColorStateList(
new int[][]{
new int[]{-android.R.attr.state_checked}, // Unchecked
new int[]{android.R.attr.state_checked} // Checked
},
new int[]{
DataUtils.getColorResource(mContext, R.color.colorBlack), // Unchecked
DataUtils.getColorResource(mContext, R.color.colorPrimary) // Checked
}
);
RadioButton radio = findViewById(R.id.radio);
radio.setButtonTintList(colorStateList);
The easiest way is to change colourAccent color in values->colours.xml
but be aware that it will also change other things like edit text cursor color etc..
< color name="colorAccent">#75aeff</color >
I had this problem. If your app has a black background and you have a lot of RadioButtons that are invisible due to the background, it is complicated to edit the android:buttonTint attribute of each one. The best solution is to change the parent theme in your styles.xml file
I changed
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
to
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
So the RadioButtons' circles became a lighter shade of gray and now they are visible even with a black background.
This is my style.xml file:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
</resources>
To change the radio button color programmatically you can use following:
yourradio button name.buttonDrawable?.setColorFilter(Color.parseColor( color_value), PorterDuff.Mode.SRC_ATOP)
If you have android:buttonTint it wont work and you have to change it to app:buttonTint.
I had to do this after uprading to androidx.
use app:buttonTint instead of android:buttonTint like this:
<com.google.android.material.radiobutton.MaterialRadioButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="English"
android:checked="true"
app:buttonTint="#FF0000"
android:textAppearance="#style/TextAppearance.Material3.TitleSmall"
android:layout_marginHorizontal="16dp"
android:layoutDirection="rtl"
/>
or
<RadioButton
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="English"
android:checked="true"
app:buttonTint="#FF0000"
android:textAppearance="#style/TextAppearance.Material3.TitleSmall"
android:layout_marginHorizontal="16dp"
android:layoutDirection="rtl"
/>
create a drawable file my_compound_button_color_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/text_app_color"/>
<item android:state_checked="true" android:color="#color/text_app_color"/>
<item android:color="#color/gray"/> </selector>
add style in style.xml file
<style name="AppRadioAppStyle" parent="Widget.AppCompat.CompoundButton.RadioButton">
<item name="android:textColor">#drawable/my_compound_button_color_selector</item>
<item name="drawableTint">#drawable/my_compound_button_color_selector</item>
</style>
layout file
<RadioButton
android:id="#+id/radio1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="#null"
android:drawableBottom="?android:attr/listChoiceIndicatorSingle"
android:gravity="center_horizontal|bottom"
android:background="#drawable/app_border_0"
android:padding="#dimen/_15sdp"
android:text="#string/no"
android:fontFamily="#font/poppins_medium"
style="#style/AppRadioAppStyle"
android:layout_marginStart="#dimen/_10sdp"/>
should be add android:button="#null" in your radiobutton
For different colors according to checked and unchecked states please try this -
Create a color resource file #color/radio_button -
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/grey" android:state_enabled="false" />
<item android:color="#color/grey" android:state_checked="false" />
<item android:color="#color/green" android:state_enabled="true" />
<item android:color="#color/green" android:state_checked="true" />
</selector>
And then use it like this -
<androidx.appcompat.widget.AppCompatRadioButton
android:id="#+id/radio_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:buttonTint="#color/radio_button" />
This kotlin Extension
fun RadioButton.setLangRadioColor(isCheck: Boolean) {
val color = if (isCheck) {
intArrayOf(
ContextCompat.getColor(rootView.context, R.color.light_red),
ContextCompat.getColor(rootView.context, R.color.light_red)
)
} else {
intArrayOf(
ContextCompat.getColor(rootView.context, R.color.sortRadioUnselectColor),
ContextCompat.getColor(rootView.context, R.color.sortRadioUnselectColor)
)
}
val colorStateList = ColorStateList(
arrayOf(
intArrayOf(-android.R.attr.state_enabled), // disabled
intArrayOf(android.R.attr.state_enabled) // enabled
),
color
)
this.buttonTintList = colorStateList
}
If you want to set different color for a clicked and unclicked radio button, just use:
android:buttonTint="#drawable/radiobutton" in the XML content of the radiobutton and your radiobutton.xml file will be:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#1E88E5"/>
<item android:state_checked="true" android:color="#00e676"/>
<item android:color="#ffffff"/>
</selector>
#jh314 is correct.
In file AndroidManifest.xml,
<application
android:allowBackup="true"
android:icon="#drawable/icon"
android:label="#string/app_name"
android:theme="#style/AppTheme"></application>
In file style.xml:
<!-- Application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorAccent">#color/red</item>
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
</style>
The item name must be colorAccent. It decides the application's widgets default color.
But if you want to change the color in code, maybe #aknay's answer is correct.

How to have Material design buttons with different colors in API 21?

Coming from this thread: Android Material Design Button Styles
I couldn't understand how to individually change the colors of the buttons, so that not all buttons are with the same color.
<item name="android:colorButtonNormal">#color/blue</item>
This solution works nice, but it changes the color of all buttons.
In API 22, we can change the color of the different buttons by using the backgroundTint, like so:
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="3dp"
android:backgroundTint="#color/orange"
android:text="#string/button1_text"
android:textAllCaps="true"
android:textColor="#color/white"
android:textSize="18sp" />
How can we do it in API 21 ?
That's the styles.xml that I have:
<style name="AppTheme" parent="#android:style/Theme.Material.Light">
<item name="android:actionBarStyle">#style/actionBarCustomization</item>
<item name="android:spinnerDropDownItemStyle">#style/mySpinnerDropDownItemStyle</item>
<item name="android:spinnerItemStyle">#style/mySpinnerItemStyle</item>
<item name="android:colorButtonNormal">#color/myDarkBlue</item>
</style>
<style name="actionBarCustomization" parent="#android:style/Widget.Material.Light.ActionBar">
<item name="android:background">#color/white</item>
<item name="android:titleTextStyle">#style/actionBarTextColor</item>
</style>
<style name="actionBarTextColor" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/black</item>
</style>
Okay, I figured it out. Here is the way I solved it, I hope it helps someone else too (I am not saying that it's perfect).
I created a drawable material_ripple_effect.xml that looks like that:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/black">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="2dp" />
<solid android:color="#color/myOrange" />
</shape>
</item>
</ripple>
And then in the layout, where I have the button, I just set the ripple drawable as a background. In activity_main.xml:
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="3dp"
android:backgroundTint="#color/orange"
android:background="#drawable/material_ripple_effect"
android:text="#string/button1_text"
android:textAllCaps="true"
android:textColor="#color/white"
android:textSize="18sp" />

Android - Change Custom Spinner's DropDownItem style

I got a custom spinner, and I'm trying to replace the 9-patch background / the triangle in the DropDownSelector.
I just can't get it to work right though. I end up with (the white box is a test asset):
the new 9 patch gets shown, but it messes up the padding, and it looks like a Spinner inside a Spinner.
Here's what it looks like without the 9 patch added:
This is what I want it to look like, but then with the new 9patch instead of the old one, not the Spinner in Spinner effect.
Here's my code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Spinner xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/spinner2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:gravity="center_horizontal"/>
</RelativeLayout>
I add this RelativeLayout to the Actionbar, and set a custom spinner adapter:
SpinnerAdapter mSpinnerAdapter = (new SpinnerCustomAdapterDark(this, R.layout.customSpinnerTitleLayout, categoryNames ));
spinner = findViewById(R.id.spinner2);
categorySpinnerMenuitem = (Spinner) spinner;
categorySpinnerMenuitem.setAdapter(mSpinnerAdapter);
This is the CustomSpinnerTitleLayout set to the adapter:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
style="?android:attr/spinnerDropDownItemStyle"
android:paddingRight="0dp" >
<ImageView
android:id="#+id/spinner_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
android:layout_gravity="center"
android:paddingRight="0dp"
/>
</LinearLayout>
This is the Theme where I add the 9 patch
<resources>
<style name="CustomTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:spinnerDropDownItemStyle">#style/customActionBarDropDownStyle</item>
</style>
<style name="customActionBarDropDownStyle" parent="#android:style/Widget.Holo.Light.ListView" >
<item name="android:background">#drawable/spinner9patch</item>
</style>
</resources>
I'm obviously doing something wrong, but what? I've tried to set the spinnerDropDownItemStyle and the spinnerStyle at the Spinner in the first layout file, what didn't do anything. What am I doing wrong here?
Thanks in advance!!
Create an XML in drawable folder with any name for example spinner_bg.xml and add the following lines
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item><layer-list>
<item><shape>
<gradient android:angle="90" android:endColor="#ffffff" android:startColor="#ffffff" android:type="linear" />
<stroke android:width="1dp" android:color="#504a4b" />
<corners android:radius="5dp" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape></item>
<item ><bitmap android:gravity="bottom|right" android:src="#drawable/spinner_ab_default_holo_dark_am" /> // you can use any other image here, instead of default_holo_dark_am
</item>
</layer-list></item>
</selector>
Add the following lines to your styles.xml which is inside values folder
<style name="spinner_style" >
<item name="android:background">#drawable/spinner_bg</item>
<item name="android:layout_marginLeft">10dp</item>
<item name="android:layout_marginRight">10dp</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
Now add this style to your spinner as
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/spinner_style"
android:popupBackground="#cccccc" />
I really recommended you check this out online Generator just make your custom spinner then download file http://jgilfelt.github.io/android-actionbarstylegenerator/

Android : change button text and background color

How can I change both text and background colors when my button is pressed, with xml ?
To change text color I can do :
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="mycolor"/>
<item android:color="mycolor2"/>
</selector>
To change the background I can do (using it in a selector/item with drawable reference) :
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FF0079FF" />
</shape>
But how can I do both ? Let's say I want to have :
Default : black text / white background
Pressed : white text / blue background
EDIT : answer
I totaly forgot that the background and text color are managed separately, so this is how I did it :
<Button
android:textColor="#color/filtersbuttoncolors"
android:background="#drawable/mybackgroundcolors" />
In mybackgroundcolors.xml I manage the background and in filtersbuttoncolors.xml I manage the text color. In both xml files I manage the status (pressed, selected, default)
Since API level 21 you can use :
android:backgroundTint="#android:color/white"
you only have to add this in your xml
Here is an example of a drawable that will be white by default, black when pressed:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape>
<solid
android:color="#1E669B"/>
<stroke
android:width="2dp"
android:color="#1B5E91"/>
<corners
android:radius="6dp"/>
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp"/>
</shape>
</item>
<item>
<shape>
<gradient
android:angle="270"
android:endColor="#1E669B"
android:startColor="#1E669B"/>
<stroke
android:width="4dp"
android:color="#1B5E91"/>
<corners
android:radius="7dp"/>
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp"/>
</shape>
</item>
</selector>
I think doing this way is much simpler:
button.setBackgroundColor(Color.BLACK);
And you need to import android.graphics.Color; not: import android.R.color;
Or you can just write the 4-byte hex code (not 3-byte) 0xFF000000 where the first byte is setting the alpha.
Just complementing #Jonsmoke's answer.
For API level 21 and above you can use :
android:backgroundTint="#android:color/white"
in XML for the button layout.
For API level below 21 use an AppCompatButton using app namespace instead of android for backgroundTint.
For example:
<android.support.v7.widget.AppCompatButton
android:id="#+id/my_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Button"
app:backgroundTint="#android:color/white" />
add below line in styles.xml
<style name="AppTheme.Gray" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorButtonNormal">#color/colorGray</item>
</style>
in button, add android:theme="#style/AppTheme.Gray", example:
<Button
android:theme="#style/AppTheme.Gray"
android:textColor="#color/colorWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#android:string/cancel"/>
When you create an App, a file called styles.xml will be created in your res/values folder. If you change the styles, you can change the background, text color, etc for all your layouts. That way you don’t have to go into each individual layout and change the it manually.
styles.xml:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme.AppBaseTheme" parent="#android:style/Theme.Light">
<item name="android:editTextColor">#295055</item>
<item name="android:textColorPrimary">#295055</item>
<item name="android:textColorSecondary">#295055</item>
<item name="android:textColorTertiary">#295055</item>
<item name="android:textColorPrimaryInverse">#295055</item>
<item name="android:textColorSecondaryInverse">#295055</item>
<item name="android:textColorTertiaryInverse">#295055</item>
<item name="android:windowBackground">#drawable/custom_background</item>
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
</style>
parent="#android:style/Theme.Light" is Google’s native colors. Here is a reference of what the native styles are:
https://android.googlesource.com/platform/frameworks/base/+/refs/heads/master/core/res/res/values/themes.xml
name="Theme.AppBaseTheme" means that you are creating a style that inherits all the styles from parent="#android:style/Theme.Light".
This part you can ignore unless you want to inherit from AppBaseTheme again. = <style name="AppTheme" parent="AppBaseTheme">
#drawable/custom_background is a custom image I put in the drawable’s folder. It is a 300x300 png image.
#295055 is a dark blue color.
My code changes the background and text color. For Button text, please look through Google’s native stlyes (the link I gave u above).
Then in Android Manifest, remember to include the code:
<application
android:theme="#style/Theme.AppBaseTheme">
Just use a MaterialButton and the app:backgroundTint and android:textColor attributes:
<MaterialButton
app:backgroundTint="#color/my_color"
android:textColor="#android:color/white"/>
add below lines in the styles.xml
<style name="AppTheme.Gray" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorGray</item>
</style>
and in button, add android:theme="#style/AppTheme.Gray", example:
<Button
android:theme="#style/AppTheme.Gray"
android:textColor="#color/colorWhite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#android:string/cancel"/>

Categories

Resources