How to apply backgroundTint to AppCompatButton in Dialog? - android

I have a DialogFragment that contains a Button:
<Button
android:id="#+id/btn_wishlist_rename"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:theme="#style/WishlistDialogButton"
android:text="#string/rename" />
The theme is defined like this:
<style name="WishlistDialogButton" parent="Widget.AppCompat.Button">
<item name="android:textColor">#color/white</item>
<item name="colorButtonNormal">#color/default_blue</item>
<item name="backgroundTint">#color/default_blue</item>
</style>
When I just embed the Fragment within the layout of my Activity everything works fine: I get a Material Design raised button with white text and blue background.
However, when the Fragment is used as a dialog the backgroundTint is not applied anymore: I get a Material Design raised button with white text but with grey background.
Is there a way to fix this - preferably without creating all the drawables from scratch or importing some third party library?

Related

How to color button background when it is disabled

I want to color my button that is defined in a fragment. I created new style (which I use as a theme in the button) and defined "colorAccent" for enabled state, "colorButtonNormal" for disabled and parent of this style is "Widget.AppCompat.Button". I want it to be coloured exactly as it is written in colorButtonNormal when button is disabled.
<style name="Material.Button.Primary" parent="#style/Widget.AppCompat.Button">
<item name="android:colorButtonNormal">#color/color_disabled</item>
<item name="colorAccent">#color/color_primary</item>
</style>
<Button
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/button_text"
android:textAppearance="#style/AppTheme.Text"
android:theme="#style/Material.Button.Primary" />
When the button is enabled it has correct color from colorAccent. When user clicks on it, it becomes disabled and should be gray (#b2b2b2) but it becomes a little bit lighter (#E7E7E7). It seems like it takes color that I defined and mixes with white color.
I tried to change style's parent and did some changes in style and button's attributes as it is written in some guides from the internet but nothing worked. My current solution is to set colorButtonNormal to #000000. When button is disabled, it becomes #B9B9B9.
Forgive me if I am wrong but as far I understand correctly, you want to achieve different colours for enabled/disabled states.
UPDATE
For keeping the material effect you can use styling with Widget.AppCompat.Button.Colored and create theme with specified colours:
<Button
.
.
.
style="#style/Widget.AppCompat.Button.Colored"
android:theme="#style/CustomButton"/>
And create theme, where colorButtonNormal is for disabled state
<style name="CustomButton" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#color/color_disabled</item>
<item name="colorAccent">#color/color_enabled</item>
</style>
Old without material effect
You can try using selector like:
custom_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="#color/color_disabled" />
<item android:state_enabled="true" android:drawable="#color/color_enabled/>
</selector>
and then in your xml for button:
<Button
.
.
.
android:background="#drawable/custom_button" />

EditText with custom theme shows underline under selection handle

i am trying to modify the underline color of a EditText by applying a theme.
Style:
<style name="MyTheme.EditText" parent="Widget.AppCompat.EditText">
<item name="colorControlActivated">#color/green</item>
</style>
EditText:
<EditText
android:id="#+id/editText_amount"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_enter_amount"
android:theme="#style/MyTheme.EditText"/>
Basically it works, but when i try to select or move the cursor the selection handle is also underlined. You can see this in the screenshot.
Does someone know how to fix this?
You can use this style as a
<EditText
style="#style/MyTheme.EditText"/>
Or, you can separate your theme for referencing the editTextStyle attribute.
<style name="MyEditTextStyle" parent="Widget.AppCompat.EditText">
<item name="colorControlActivated">#color/green</item>
</style>
<style name="MyTheme.EditText">
<item name="editTextStyle">#style/MyEditTextStyle</item>
</style>
<EditText
android:theme="#style/MyTheme.EditText"/>
Alright, but where are these underlines come from?
android:theme is an attribute of View and when you set a style as android:theme, that style will be wrapped by ContextThemeWrapper with context theme while in inflation of view.
So that means, if you set android:theme property with style that contains android:background item like
<item name="android:background">#color/green</item>
every child view of this theme owner will be have a green background.
"Widget.AppCompat.EditText" is a style and references ?attr/editTextBackground as a "android:background". And in v21/values-21.xml file #drawable/abc_edit_text_material is defined as editTextBackground.
So, for your example, #drawable/abc_edit_text_material becomes a background of your EditText and SelectionHandlers.
You should remove parent attribute. This is caused only API 23 device.
<style name="MyTheme.EditText">
<item name="colorControlActivated">#color/green</item>
</style>
I had the same issue.
My layout shows a Edittext inside a blue box. There i wanted to have a white text and a white underline and a white selection control.
I've set all in my AppTheme. All fine!
But i also had a Recyclerview blow the blue box. The RecyclerView has white cards that contains Edittext. White text, underline and control makes no sense in white cards. :)
So i tried to change the color of the text, underline and controls to dark gray. But with no success. I had the same issues with the control like in this question.
I tried using the solved answer, but this didn't helped me.
Maybe my fault, don't know.
So i post here my solution, even the question already answered.
Inside the styles.xml i added:
<style name="RecyclerEditText">
<item name="colorAccent">#color/darkGray</item>
<item name="colorControlNormal">#color/darkGray</item>
<item name="colorControlActivated">#color/darkGray</item>
</style>
and in the layout xml i added inside edittext:
android:textColor="#color/darkGray"
android:textColorHint="#color/darkGray"
android:theme="#style/RecyclerEditText"
--
Now i have no offset in control icon, and no double underline.
Thanks a lot #litmon !
You pushed me to the "remove parent" idea.

Styling Android EditText

I'm trying to style edit text widgets in my app. Right now if I use this:
<style name="MyEditText" parent="#android:style/Widget.EditText">
<item name="android:textColor">#color/input_text</item>
<item name="android:gravity">left</item>
</style>
It will show black background on phone I use for testing. I'd like to get something that looks the same everywhere. I think I will be OK with this style (I also believe this is "standard"). How do I pull this stale or should I make my own somehow?
EDIT:
Here is my code for TextEdit
<EditText
style="#style/MyEditText"
android:id="#+id/et_serverURL" android:layout_width="fill_parent" android:layout_height="wrap_content" android:maxLength="25"
android:imeOptions="actionNext" android:singleLine="true" android:inputType="textUri"
android:hint="#string/str_login_activity_server_url_hint"
/>
The style shown in your image is called Holo. You can use it like so
<style name="MyEditText" parent="#android:style/Widget.Holo.EditText">
<!-- Your custom attributes here -->
</style>
EDIT
If you want your app to use your themes as you have them right now but have your EditText be Holo then you can override the <item name="android:editTextStyle"></item>under your current theme to use MyEditText instead of the default parent style. Then set your theme either to your activity, or to your application.

Borderless Button on Pre-Lollipop with Support Library

I am making borderless flat button using support library (23.0.1). It works normal on Lollipop. However on pre-Lollipop when I press button Its color changes to colorButtonNormal color like it's a normal button.
I don't think so it's a normal behaviour and focused color should be grey like on Lollipop.
Here's the screenshot from Lollipop and Pre-lollipop.
First normal behaviour on Lollipop:
Borderless button in normal state and focused state on Lollipop
Not normal behaviour on Pre-Lollipop (Desire color is gray like above but it's not):
Borderless button in normal state and focused state on Pre-lollipop
Theme
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
//other stuff
<item name="colorButtonNormal">#color/orangeColor</item>
<item name="buttonBarButtonStyle">#style/BorderlessButtonStyle</item>
</style>
<style name="BorderlessButtonStyle" parent="Widget.AppCompat.Button.Borderless">
<item name="android:textColor">#color/blueTextColor</item>
</style>
And now button in layout:
<Button
android:id="#+id/btnForgotPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/forgot_your_password"
style="?attr/buttonBarButtonStyle"
/>
Any way to get it write using AppCompat Theme and styles without of making separate Drawables.
Borderless Button works on both Post and Pre Lollipop version with Support Library but there's a small difference between their onPressed color.
Pre-Lollipop: By default onPressed color is same as default Button color set using colorButtonNormal.
Lollipop: By default onPressed color is light grey, which is ideal.
You can make a Borderless Button like this:
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Name"
style="#style/Widget.AppCompat.Button.Borderless"/>
Now If you want to have the same onPressed color on all versions then you can set colorControlHighlight in a new theme and set that theme on Button.
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Name"
android:theme="#style/BorderlessButton"
style="#style/Widget.AppCompat.Button.Borderless"/>
And theme in your style:
<style name="BorderlessButton" parent="Theme.AppCompat.Light">
<item name="colorControlHighlight">YOUR COLOR</item>
</style>
Updated: You can use android:theme attribute for a View since Android 5.0 Lollipop and AppCompat v22.1.0 (and higher).
Adding style="?borderlessButtonStyle" to the Button worked fine for me.
why do you worry with some things just go with this and be free
<Button
android:id="#+id/btnForgotPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/forgot_your_password"
android:background="#drawable/abc_btn_borderless_material"
/>
and now careless about api stuff
You are using the android implemented style of "buttonBarButtonStyle" since you are calling it via ?atr - use style="#style/BorderlessButtonStyle instead.
Edit: Leave your xml as it is, but you can change it to your wanted behaviour like this:
AppCompatButton button = (AppCompatButton) findViewById(R.id.btnForgotPassword);
ColorStateList colorStateList = new ColorStateList(new int[][] {{0}}, new int[] {0xFF969696});
//969696 is your wanted grey color, just change it
button.setSupportBackgroundTintList(colorStateList);

TextView style in dialog, can not see text in froyo but can see in ics

I have a dialog box that I create to display messages in android. It basically contains a text view in a scrollview like this
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/about_msg"
android:text="#string/about_msg"
android:autoLink="web"
android:padding="10dip"
style="#style/DialogTextSmall" />
</ScrollView>
As you can see I have applied a style to TextView the style looks like this
<style name="DialogTextSmall">
<item name="android:textSize">#dimen/text_size_small</item>
</style>
The application theme set is like this
<style name="AppTheme" parent="android:Theme.Light">
The Problem:
On ICS api-15 it shows fine black text on white background of TextView.
The problem is When I show dialogbox in Froyo its the text does'nt seem to show even though it seems to have taken space - My guess is the color of text is same as background (greyish black)
I know I can quick fix by hard-coding black background and white text, but Is it not possible to have the default colors of platform for the text color and background of the TextView to appear, without me having to hardcode them ?
You can inherit a parent style and then only change the values you want to change. Try changing your XML to this:
<style name="DialogTextSmall" parent="#android:style/Widget.TextView>
<item name="android:textSize">#dimen/text_size_small</item>
</style>
The list of styles you can inherit can be found in the AOSP source on Github here.
EIDT:
By default text views have black text and transparent background, so you will need to set one or the other if the background behind the text view (which, again, is transparent) is black.
Inheritance from Textview style did not really help. It is a little quirky problem and here is one way to do it
http://blog.andromo.com/2011/fixing-text-colours-on-an-alertdialog-when-using-theme-light/
In my case I did it another way
Solved it for theme I inherited it from default android theme
<style name="Theme" parent="android:Theme"></style>
<style name="Theme.AppTheme" parent="#android:style/Theme.Light"/>
and
<style name="DialogTextSmall">
<item name="android:textSize">#dimen/text_size_small</item>
<item name="android:textColor">#android:color/white</item>
</style>
This way for all platforms , froyo, gingerbread and above, the dialog boxes are black and text is white on them

Categories

Resources