Change default design theme to customized color - android

I am very new to Android Studio. As a beginner I have created a simple app just for testing purpose and to view the appearance of Android studio material theme. I am currently working with latest version ie. L preview - Studio 0.8.2 version.
Here, I have just created textview, edittext, radio buttons and checkboxes. When I select male or female, it appears sky blue color. Could I be able to change sky blue color as a green or yellow color?
I do not know what is the name for that. From the picture can able to see edittext, radio buttons and checkboxes selected state as a sky blue color. When I try to click or select anything then those checkboxes or radio buttons need to change from default color to other colors like green or yellow!
Code
In res/values/styles.xml,
<resources>
<!-- Base application theme. -->
<color name="custom_theme_color">#b0b0ff</color>
<style name="CustomTheme" parent="android:Theme.Material">
<item name="android:colorBackground">#color/custom_theme_color</item>
</style>
</resources>
In Android Studio Manifest.xml,
android:theme="#style/CustomTheme" >
Is there any other possible to change from default sky blue color to green or yellow or purple?
Is there any other way to change default sky blue color theme to other colors like pink or green?
How could I do this?

First Method:
In res/values-v21/styles.xml,
<style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar">
<item name="android:colorAccent">#color/custom_theme_color</item>
<item name="android:colorPrimaryDark">#color/custom_theme_color</item>
<item name="android:colorPrimary">#color/custom_theme_color</item>
</style>
The above code is simple and working well. In Android studio, it could be able to change from default sky blue color to any other colors like pink or green!
Second Method:
Create 3 files under xml ie. res/xml such as checked.xml, unchecked.xml and custom_checkbox.xml
checked.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2px" android:color="#FF00FF" />
<size android:height="20dp" android:width="20dp"/>
</shape>
unchecked.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2px" android:color="#ffc0c0c0" />
<size android:height="20dp" android:width="20dp"/>
</shape>
custom_checkbox.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:drawable="#xml/checked" />
<item android:state_pressed="true"
android:drawable="#xml/checked" />
<item android:drawable="#xml/unchecked" />
</selector>
From above second method, it (customized file) also could be able to create any shapes and colors based on our requirements. Even we can be able to customize the style, shapes and themes for a widget by using 2nd method.
Above two methods are working fine for me!

Also in from v23 with AppCompat you can use android.support.v7.widget.AppCompatCheckBox and change CheckBox style like this:
<android.support.v7.widget.AppCompatCheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:theme="#style/CheckBox"
/>
where in style.xml:
<style name="CheckBox" parent="Widget.AppCompat.CompoundButton.CheckBox">
<item name="colorControlNormal">#color/checkbox_normal</item> <!-- border color -->
<item name="colorControlActivated">#color/checkbox_activated</item> <!-- fill color -->
<item name="colorControlHighlight">#color/checkbox_highlight</item> <!-- animation color -->
</style>

Related

How to make a shadowless coloured button in Android

I've been trying various ways to do this through styles but cannot get what I want. It seems I can have a coloured button with a shadow or a button with no shadow for which I can only change the text and pressed colours.
Here's what I have in my styles.xml:
<style name="PrimaryFlatButton" parent="Theme.AppCompat.Light">
<item name="colorControlHighlight">#color/colorPrimary</item>
<item name="colorButtonNormal">#color/colorPrimaryLight</item>
</style>
and here is what I have in my layout:
<Button
android:id="#+id/btn_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/pc_large_padding"
android:theme="#style/PrimaryFlatButton"
style="#style/Widget.AppCompat.Button"
android:text="Search"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
Which gives me a coloured button which darkens when pressed but has a shadow.
If I change the button to have a style of:
style="#style/Widget.AppCompat.Button.Borderless"
Then I successfully lose the shadow but get no background colour unless the button is pressed. I presume Android's idea of "borderless" means having nothing to indicate a border at all - just plain text - rather than making a flat button.
All I want is the standard themed button, with a background colour, which changes colour when pressed, and has no shadow.
You should be able to get a colored button complete with the ripple effect by creating a selector drawable and specifying it as the button's background. Something like this:
some_layout.xml
<Button
style="#style/Theme.Flat.Button"
<!-- Any other properties you want to set -->
/>
style.xml
<style name="Theme.Flat.Button" parent="#style/Widget.AppCompat.Button.Borderless">
<item name="android:background">#drawable/ripple_selector</item>
<!-- Any other items you want to add -->
</style>
ripple_selector.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/colorPrimary">
<item>
<selector>
<item android:state_enabled="false">
<color android:color="#color/colorPrimaryLight" />
</item>
<item android:state_enabled="true" android:state_pressed="false">
<color android:color="#color/colorPrimaryLight" />
</item>
<item android:state_enabled="true" android:state_pressed="true">
<color android:color="#color/colorPrimary" />
</item>
</selector>
</item>
</ripple>
You can remove the elevation/shadow by adding android:stateListAnimator="#null" to your button's XML properties.
Full button XML:
<Button
android:id="#+id/btn_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/pc_large_padding"
android:theme="#style/PrimaryFlatButton"
style="#style/Widget.AppCompat.Button"
android:text="Search"
android:stateListAnimator="#null"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
You can also drop this line into your styles.xml in order to avoid adding it to every single one of your buttons
styles.xml:
<style name="PrimaryFlatButton" parent="Theme.AppCompat.Light">
<item name="colorControlHighlight">#color/colorPrimary</item>
<item name="colorButtonNormal">#color/colorPrimaryLight</item>
<item name="android:stateListAnimator">#null</item>
</style>
Michael's answer is also technically correct. If you would like more fine-tuned control over the styling and states of your buttons (including elevation/shadows), you can look into creating your own StateListDrawable resources for your buttons. Since you seem more interested in using the default button styling with only slight modifications, I won't go into further detail about StateListDrawables here. However, if you're interested, you can read Michael's answer as well as the StateListDrawable documentation here.

Android Button Ripple on Lollipop and highlight on pre lollipop

Hi so I am little confused and wondering if anyone could point me in the right direction.
Go and use Google Play Store on Lollipop and pre-lollipop
You will see on lollipop that selectable views have the ripple effect.
On pre-lollipo, you get this highlight effect.
How is this done?
At the moment in my app, I have a drawable-v21 directory that contains this selector
It basically does the ripple on top of my background
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:id="#android:id/mask" android:drawable="#android:color/white"/>
<item android:drawable="#color/colorAccentWith92PercentOpacity"/>
</ripple>
However, other answers say to use
android:background="?attr/selectableItemBackground"
To get the highlight effect on pre-lollipop but this overrides my background. How could i set this on top of my current background?
Also do i have to create a ripple drawable (in drawble-v21) for every kind of button in my app? How would I do this for recycler view items?
What makes this question unique
I do not want ripple for pre-lollipop I am asking how devs efficiently make their button do ripple on lollipop and a hight light effect on pre
Option 1
Define colorControlHighlight in your theme and as long you're using default appcompat-v7 buttons the highlight color should work out-of-the-box.
Option 2
This is an example of how I backported Material button style with a bit of crossfade animation and shadows without using external libraries. May it help you on your way.
Provided the button will be white text over dark background (#color/control_normal) with light highlight:
values/themes.xml
Here I'll override default button style for the whole theme:
<style name="AppTheme" parent="Base.AppTheme">
<item name="buttonStyle">#style/Widget.AppTheme.Button</item>
</style>
values/integers.xml
<!-- Some numbers pulled from material design. -->
<integer name="button_pressed_animation_duration">100</integer>
<integer name="button_pressed_animation_delay">100</integer>
values-v21/styles.xml
Button style for Lollipop which understands theme overlays and uses ripple by default. Let's just have it color the ripple with appropriate paint:
<style name="Widget.AppTheme.Button" parent="Widget.AppCompat.Button">
<!-- On Lollipop you can define theme via style. -->
<item name="android:theme">#style/ThemeOverlay.AppTheme.Button</item>
</style>
<style name="ThemeOverlay.AppTheme.Button" parent="ThemeOverlay.AppCompat.Dark">
<!-- The magic is done here. -->
<item name="colorButtonNormal">#color/control_normal</item>
</style>
values/styles.xml
Before Lollipop it gets tricky.
<style name="Widget.AppTheme.Button" parent="Widget.AppCompat.Button">
<item name="android:background">#drawable/button_normal_background</item>
</style>
drawable/button_normal_background.xml
Thi is the composite drawable of the whole button.
<inset
xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="#dimen/abc_button_inset_horizontal_material"
android:insetTop="#dimen/abc_button_inset_vertical_material"
android:insetRight="#dimen/abc_button_inset_horizontal_material"
android:insetBottom="#dimen/abc_button_inset_vertical_material">
<layer-list>
<!-- Shadow. -->
<item
android:drawable="#drawable/button_shadow"
android:top="-0dp"
android:bottom="-1dp"
android:left="-0dp"
android:right="-0dp"/>
<item
android:drawable="#drawable/button_shadow_pressable"
android:top="-0dp"
android:bottom="-3dp"
android:left="-1dp"
android:right="-1dp"/>
<!-- Background. -->
<item android:drawable="#drawable/button_shape_normal"/>
<!-- Highlight. -->
<item>
<selector
android:enterFadeDuration="#integer/button_pressed_animation_duration"
android:exitFadeDuration="#integer/button_pressed_animation_duration">
<item
android:drawable="#drawable/button_shape_highlight"
android:state_focused="true"
android:state_enabled="true"/>
<item
android:drawable="#drawable/button_shape_highlight"
android:state_pressed="true"
android:state_enabled="true"/>
<item
android:drawable="#drawable/button_shape_highlight"
android:state_selected="true"
android:state_enabled="true"/>
<item android:drawable="#android:color/transparent"/>
</selector>
</item>
<!-- Inner padding. -->
<item android:drawable="#drawable/button_padding"/>
</layer-list>
</inset>
drawable/button_shadow.xml
This is the shadow when not pressed.
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="3dp"
android:bottomRightRadius="3dp"
android:topLeftRadius="2dp"
android:topRightRadius="2dp"/>
<solid android:color="#2000"/>
</shape>
drawable/button_shadow_pressable.xml
This is the extended shadow in pressed state. The result effect will look crude when you look up close but it's good enough from distance.
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:ignore="UnusedAttribute"
android:enterFadeDuration="#integer/button_pressed_animation_duration"
android:exitFadeDuration="#integer/button_pressed_animation_duration">
<item
android:state_pressed="true"
android:state_enabled="true">
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="3dp"
android:topRightRadius="3dp"/>
<solid android:color="#20000000"/>
</shape>
</item>
<item android:drawable="#android:color/transparent"/>
</selector>
drawable/button_shape_normal.xml
This is the main button shape.
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="#dimen/abc_control_corner_material"/>
<solid android:color="#color/control_normal"/>
</shape>
drawable/button_padding.xml
Just additional padding to be absolutely consistent with the Material button.
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/transparent"/>
<padding
android:left="#dimen/abc_button_padding_horizontal_material"
android:top="#dimen/abc_button_padding_vertical_material"
android:right="#dimen/abc_button_padding_horizontal_material"
android:bottom="#dimen/abc_button_padding_vertical_material"/>
</shape>
drawable/button_shape_highlight.xml
This is the highlight button shape drawn over normal button shape.
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="#dimen/abc_control_corner_material"/>
<solid android:color="#color/control_highlight"/>
</shape>
#color/control_highlight can point to
#color/ripple_material_dark - translucent white, use over dark background
#color/ripple_material_light - translucent black, use over light background
Any other color you define.
You can set a background of your views in this way:
android:background="#drawable/touch_selector"
Create a version without ripple for pre lollipop:
drawable/touch_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- State when a row is being pressed, but hasn't yet been activated (finger down) -->
<item android:state_pressed="true"
android:drawable="#color/grey"
/>
<!-- For ListView in SINGLE_CHOICE_MODE, it flags the active row -->
<item android:state_activated="true"
android:drawable="#color/light_green" />
<!-- Default, "just hangin' out" state. -->
<item android:drawable="#android:color/transparent" />
</selector>
Now do the same for lollipop and above,
but with ripple effect:
crete drawable-v21/touch_selector.xml
It will look like:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- State when a row is being pressed, but hasn't yet been activated (finger down) -->
<item android:state_pressed="true">
<ripple android:color="#color/grey" />
</item>
<!-- For ListView, when the view is "activated". In SINGLE_CHOICE_MODE, it flags the active row -->
<item android:state_activated="true"
android:drawable="#color/light_green" />
<!-- Default, "just hangin' out" state. -->
<item android:drawable="#android:color/transparent" />
</selector>
That's it.
Now you are having ripple effect at lollipop and above devices and highlight at pre lollipop.
Edit:
In case of using in a ListView - use created above as a background of ListView item

Android spinner with underline appcompat

I am using a appcompat theme for my application. Need to know how i can show underline to spinner. It is just showing anchor. I tried setting up underline using android:background but it makes the anchor disappear.
Update your support library and in XML use
Please add this style to your Spinner
style="#style/Base.Widget.AppCompat.Spinner.Underlined"
This is hacky (and not perfect) way to change spinner and underline color in appcompat theme. Main point that I customized Android support library images and xml files to change color.
1) go to support library package and copy 2 images (or download my custom from the bottom of this post)
/your-app/build/intermediates/exploded-aar/com.android.support/appcompat-v7/23.1.0/res/drawable-hdpi/abc_spinner_mtrl_am_alpha.9.png
and
/your-app/build/intermediates/exploded-aar/com.android.support/appcompat-v7/23.1.0/res/drawable-hdpi/abc_textfield_default_mtrl_alpha.9.png
2) Make a copy of those images
3) Change color of abc_spinner_mtrl_am_alpha.9.png (warning: leave black borders as they are, it's for 9 patch)
4) Change color of second bottom line of abc_textfield_default_mtrl_alpha.9.png (you can see in attached small image below)
5) Save and move files to your project drawables
6) Create bottom_line_color.xml drawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-6dp" android:left="-6dp" android:right="-6dp">
<shape>
<stroke android:color="#color/brown" android:width="6dp"/>
</shape>
</item>
7) Create spinner_bottom_line.xml
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="#dimen/abc_control_inset_material"
android:insetTop="#dimen/abc_control_inset_material"
android:insetBottom="#dimen/abc_control_inset_material"
android:insetRight="#dimen/abc_control_inset_material">
<selector>
<item android:state_checked="false" android:state_pressed="false">
<layer-list>
<item android:drawable="#drawable/my_custom_abc_textfield_default_mtrl_alpha" />
<item android:drawable="#drawable/my_custom_abc_spinner_mtrl_am_alpha" />
</layer-list>
</item>
<item>
<layer-list>
<item android:drawable="#drawable/my_custom_abc_textfield_default_mtrl_alpha" />
<item android:drawable="#drawable/my_custom_abc_spinner_mtrl_am_alpha" />
</layer-list>
</item>
</selector>
</inset>
P.S. I couldn't achieve same visual style as default spinner (visual changes shown below). If you start using this custom spinner theme you should use it in all project.
So add to values/styles.xml
<style name="My.Spinner.Style" parent="Base.Widget.AppCompat.Spinner.Underlined">
<item name="android:background">#drawable/spinner_bottom_line</item>
</style>
And use it in application like this:
<Spinner
android:id="#+id/account_spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/My.Spinner.Style"
/>
Important:
You should resize spinner and place to various drawables folders. You can find size in same path as I showed above.
There are few popular sizes:
drawables-mdpi 20x26
drawables-hdpi 29x38
drawables-xhdpi 38x50
drawables-xxhdpi 74x98
You can take my customized images from here:
my_custom_abc_spinner_mtrl_am_alpha:
my_custom_abc_textfield_default_mtrl_alpha:
Spinner example is (xxhdpi), line is mdpi (because we don't need various lines in various drawable folders, so we can have only 1).
Visual difference (from android studio xml preview window) is shown here:
First line is my custom underline spinner, second is default Base.Widget.AppCompat.Spinner.Underlined
Applying style="#style/Base.Widget.AppCompat.Spinner.Underlined" didn't show any difference .Then gave android:backgroundTint and android:backgroundTintMode to spinner and it worked.
<Spinner
android:id="#+id/spBookingType"
android:spinnerMode="dropdown"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Base.Widget.AppCompat.Spinner.Underlined"
android:backgroundTint="#ff000000"
android:backgroundTintMode="src_in" />
in styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:spinnerStyle">#style/holoSpinner</item>
</style>
<style name="holoSpinner" parent="Widget.AppCompat.Spinner.Underlined">
<item name="android:textSize">16sp</item>
<item name="android:textColor">#color/colorPrimary</item>
</style>
========================
in Layout
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<Spinner
android:id="#+id/spinCountry"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/edit_text_bottom_border"
android:paddingBottom="10dp" />
</android.support.design.widget.TextInputLayout>
===============================================
edit_text_bottom_border.xml file in Drawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="1dp"
android:left="-3dp"
android:right="-3dp"
android:top="-3dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#535353" />
<!--android:color="#535353" />-->
</shape>
</item>
</layer-list>

EditText underline below text property

I would like to change the blue colour below the edit text, i don't know what property it is.
I tried using a different background colour for it but it didn't work.
I've attached an image below:
It's actually fairly easy to set the underline color of an EditText programmatically (just one line of code).
To set the color:
editText.getBackground().setColorFilter(color, PorterDuff.Mode.SRC_IN);
To remove the color:
editText.getBackground().clearColorFilter();
Note: when the EditText has focus on, the color you set won't take effect, instead, it has a focus color.
API Reference:
Drawable#setColorFilter
Drawable#clearColorFilter
Use android:backgroundTint="" in your EditText xml layout.
For api<21 you can use AppCompatEditText from support library thenapp:backgroundTint=""
You have to use a different background image, not color, for each state of the EditText (focus, enabled, activated).
http://android-holo-colors.com/
In the site above, you can get images from a lot of components in the Holo theme. Just select "EditText" and the color you want. You can see a preview at the bottom of the page.
Download the .zip file, and copy paste the resources in your project (images and the XML).
if your XML is named: apptheme_edit_text_holo_light.xml (or something similar):
Go to your XML "styles.xml" and add the custom EditText style:
<style name="EditTextCustomHolo" parent="android:Widget.EditText">
<item name="android:background">#drawable/apptheme_edit_text_holo_light</item>
<item name="android:textColor">#ffffff</item>
</style>
Just do this in your EditText:
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/EditTextCustomHolo"/>
And that's it, I hope it helps you.
This works fine for old and new version of Android (works fine even on API 10!).
Define this style in your styles.xml:
<style name="EditText.Login" parent="Widget.AppCompat.EditText">
<item name="android:textColor">#android:color/white</item>
<item name="android:textColorHint">#android:color/darker_gray</item>
<item name="colorAccent">#color/blue</item>
<item name="colorControlNormal">#color/blue</item>
<item name="colorControlActivated">#color/blue</item>
</style>
And now in your XML, set this as theme and style (style to set textColor, and theme to set all other things):
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
style="#style/EditText.Login"
android:theme="#style/EditText.Login"/>
Edit
This solution causes a tiny UI glitch on newer Android versions (Lollipop or Marshmallow onwards) that the selection handles are underlined.
This issue is discussed in this thread. (I haven't tried this solution personally)
you can change Underline of EditText color specifying it in styles.xml. In your app theme styles.xml add the following.
<item name="android:textColorSecondary">#color/primary_text_color</item>
As pointed out by ana in comment section
<item name="android:colorControlActivated">#color/black</item>
setting this in theme style works well for changing color of an edittext underline.
So, you need to create a new .xml file in your drawable folder.
In that file paste this code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="8dp"
android:left="-3dp"
android:right="-3dp"
android:top="-3dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/white"/>
</shape>
</item>
</layer-list>
And in your EditText, set
android:background="#drawable/your_drawable"
You can play with your drawable xml, set corners, paddings, etc.
In your app style define the property colorAccent. Here you find an example
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/action_bar</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/action_bar</item>
</style>
You can change the color of EditText programmatically just using this line of code easily:
edittext.setBackgroundTintList(ColorStateList.valueOf(yourcolor));
To change bottom line color, you can use this in your app theme:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorControlNormal">#c5c5c5</item>
<item name="colorControlActivated">#ffe100</item>
<item name="colorControlHighlight">#ffe100</item>
</style>
To change floating label color write following theme:
<style name="TextAppearence.App.TextInputLayout" parent="#android:style/TextAppearance">
<item name="android:textColor">#4ffd04[![enter image description here][1]][1]</item>
</style>
and use this theme in your layout:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
app:hintTextAppearance="#style/TextAppearence.App.TextInputLayout">
<EditText
android:id="#+id/edtTxtFirstName_CompleteProfileOneActivity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:capitalize="characters"
android:hint="User Name"
android:imeOptions="actionNext"
android:inputType="text"
android:singleLine="true"
android:textColor="#android:color/white" />
</android.support.design.widget.TextInputLayout>
Use below code to change background color of edit-text's border.
Create new XML file under drawable.
abc.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#00000000" />
<stroke android:width="1dip" android:color="#ffffff" />
</shape>
and add it as background of your edit-text
android:background="#drawable/abc"
If you don't have to support devices with API < 21, use backgroundHint in xml, for example:
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:hint="Task Name"
android:ems="10"
android:id="#+id/task_name"
android:layout_marginBottom="15dp"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textColorLink="#color/blue"
android:textColorHint="#color/blue"
android:backgroundTint="#color/lighter_blue" />
For better support and fallbacks use #Akariuz solution.
backgroundHint is the most painless solution, but not backward compatible, based on your requirements make a call.
change your colorAccent which color you need that color set on colorAccent and run you get the output
Simply change android:backgroundTint in xml code to your color
You can do it with AppCompatEditText and color selector:
<androidx.appcompat.widget.AppCompatEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:backgroundTint="#color/selector_edittext_underline" />
selector_edittext_underline.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/focused_color"
android:state_focused="true" />
<item android:color="#color/hint_color" />
</selector>
NOTE: Put this selector file in res/color folder, not res/drawable. ususually res/color does not exist and we may have to create it.

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