I'm trying to use a MaterialButtonToggleGroup inside my BottomSheetDialog. However the style for the button is being overriden by the current theme I'm using for the BottomSheet
In a regular fragment:
Using the attribute
style="?attr/materialButtonOutlinedStyle"
I have this blue outline on my Material Button inside my ToggleGroup
<com.google.android.material.button.MaterialButtonToggleGroup
android:id="#+id/toggle_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:checkedButton="#+id/btnOne"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"
app:selectionRequired="true"
app:singleSelection="true">
<com.google.android.material.button.MaterialButton
android:id="#+id/btnOne"
style="?attr/materialButtonOutlinedStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1"
android:minHeight="0dp"
android:textSize="12sp"/>
<com.google.android.material.button.MaterialButton
android:id="#+id/btnTwo"
style="?attr/materialButtonOutlinedStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="0dp"
android:text="Button 2"
android:textSize="12sp"/>
</com.google.android.material.button.MaterialButtonToggleGroup>
But when using it inside my BottomSheet I get this:
The theme for bottom sheet I'm using:
<style name="Theme.TestApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
...
<item name="bottomSheetDialogTheme">#style/AppBottomSheetDialogTheme</item>
</style>
<style name="AppBottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">#style/BottomSheetRoundedCorners</item>
</style>
<style name="BottomSheetRoundedCorners" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">#drawable/bgr_bottomsheet_round_corners</item>
</style>
How can I keep the style
style="?attr/materialButtonOutlinedStyle"
for the MaterialButton while using the BottomSheet's theme?
Edit:______________________________
I've tried adding
<item name="materialButtonStyle">#style/Widget.MaterialComponents.Button.OutlinedButton</item> to my BottomSheet's theme but it doesn't do anything.
<style name="AppBottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">#style/BottomSheetRoundedCorners</item>
<item name="materialButtonStyle">#style/Widget.MaterialComponents.Button.OutlinedButton</item>
</style>
Have also tried it with
<item name="materialButtonStyle">?attr/materialButtonOutlinedStyle</item>
you can use this theme:
<style name="BottomSheet" parent="Theme.MaterialComponents.DayNight.BottomSheetDialog"/>
<style name="Theme.TestApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
...
<item name="bottomSheetDialogTheme">#style/BottomSheet</item>
DO NOT USE THEME.DESIGN.LIGHT
Why would I not be able to add margin to the end of this button?
<!--Buttons-->
<androidx.constraintlayout.widget.ConstraintLayout android:id="#+id/arqo_llButtons" android:layout_width="match_parent"
android:layout_height="98dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"
android:background="#color/white" >
<!--Pay Button-->
<android.widget.Button android:id="#+id/arqo_btnQuickApplyPayment" style="#style/CustomButtonStyle.Success"
android:layout_width="200dp" android:layout_height="60dp" android:layout_marginEnd="16dp"
android:enabled="false" android:text="#string/button_pay" app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<style name="CustomButtonStyle">
<item name="android:layout_height">55dp</item>
<item name="android:layout_width">332dp</item>
<item name="android:layout_margin">5dp</item>
<item name="android:textSize">18sp</item>
<item name="android:gravity">center</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
<item name="android:paddingEnd">10dp</item>
<item name="android:paddingStart">10dp</item>
<item name="android:clickable">true</item>
<item name="android:drawablePadding">5dp</item>
<item name="android:textColor">#color/border_button_text</item>
<item name="android:background">#drawable/button_border</item>
</style>
<style name="CustomButtonStyle.Success" parent="#style/CustomButtonStyle">
<item name="android:background">#drawable/button_success</item>
</style>
The button here just sits on the very right edge of the constraint layout...
If you want to customize your button with a custom style, your custom style should inherit a button's style.
Something like this :
<style name="CustomStyle" parent="Widget.MaterialComponents.Button">
<!-- Style your custom button here -->
</style>
For more info : Material Button theming
Material3 Button Theming
Removing this line from the CustomButtonStyle in Styles.xml solved the issue:
<item name="android:layout_margin">5dp</item>
I am trying to customize materials TextInpuLayout.OutlinedBox and TextInputEditText.
My current state is like following image
What I want to do is remove the background of the hint label so that it doesn't create that ugly cutout. Like this:
Or if that isn't possible moving the label above the input would also do the trick:
It would be nice if this was achievable using styles so that I could easily apply this to other text input elements as well.
I'm pretty new to android so please be considerate.
Here's the code for the styling:
<style name="MyTheme" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="android:textSize">14sp</item>
<item name="boxCornerRadiusTopStart">#dimen/textInputCornerRadius</item>
<item name="boxCornerRadiusTopEnd">#dimen/textInputCornerRadius</item>
<item name="boxCornerRadiusBottomStart">#dimen/textInputCornerRadius</item>
<item name="boxCornerRadiusBottomEnd">#dimen/textInputCornerRadius</item>
<item name="boxBackgroundColor">#color/primaryDarkColorBackground</item>
<item name="boxStrokeColor">#color/text_input_box_stroke</item>
</style>
<style name="EditTextStyle" parent="Widget.AppCompat.EditText">
<item name="android:background">#null</item>
<item name="android:paddingStart">30dp</item>
</style>
And here is how I define my input in the layout:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/username_layout"
style="#style/MyTheme"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="48dp"
android:layout_marginEnd="48dp"
android:hint="#string/email_or_username"
app:boxBackgroundMode="outline"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.10">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/username"
style="#style/EditTextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
I don't think you can obtain it with the TextInputLayout.OutlinedBox style.
It is not exactly what you are looking for:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox.Rounded"
..>
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="30dp"
/>
</com.google.android.material.textfield.TextInputLayout>
With:
<style name="Widget.MaterialComponents.TextInputLayout.FilledBox.Rounded" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="shapeAppearanceOverlay">#style/Rounded_ShapeAppearanceOverlay.MaterialComponents.TextInputLayout</item>
<item name="boxStrokeColor">#color/input_text_no_underline</item>
</style>
<style name="Rounded_ShapeAppearanceOverlay.MaterialComponents.TextInputLayout" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>
The selector is used to remove the underline:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
<item android:alpha="0" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
<item android:alpha="0" android:color="?attr/colorOnSurface"/>
</selector>
Note: it requires the version 1.1.0 of the library.
Try setting on the TextInputEditText:
android:background="#android:color/transparent"
I am using android design library's TextinputLayout. But couldn't customize the hint color, label color and the underline color of EditText inside TextinputLayout. Please help.
Change bottom line color:
From this answer
<item name="colorControlNormal">#c5c5c5</item>
<item name="colorControlActivated">#color/accent</item>
<item name="colorControlHighlight">#color/accent</item>
Change hint color when it is floating
<style name="MyHintStyle" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/main_color</item>
</style>
and use it like this:
<android.support.design.widget.TextInputLayout
...
app:hintTextAppearance="#style/MyHintStyle">
Change hint color when it is not a floating label:
<android.support.design.widget.TextInputLayout
...
app:hintTextAppearance="#style/MyHintStyle"
android:textColorHint="#c1c2c4">
Thanks to #AlbAtNf
With the Material Components Library you can use the com.google.android.material.textfield.TextInputLayout.
You can apply a custom style to change the colors.
To change the hint color you have to use these attributes:
hintTextColor and android:textColorHint.
<style name="Custom_textinputlayout_filledbox" parent="#style/Widget.MaterialComponents.TextInputLayout.FilledBox">
<!-- The color of the label when it is collapsed and the text field is active -->
<item name="hintTextColor">?attr/colorPrimary</item>
<!-- The color of the label in all other text field states (such as resting and disabled) -->
<item name="android:textColorHint">#color/selector_hint_text_color</item>
</style>
You should use a selector for the android:textColorHint. Something like:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.38" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
<item android:alpha="0.6" android:color="?attr/colorOnSurface"/>
</selector>
To change the bottom line color you have to use the attribute: boxStrokeColor.
<style name="Custom_textinputlayout_filledbox" parent="#style/Widget.MaterialComponents.TextInputLayout.FilledBox">
....
<item name="boxStrokeColor">#color/selector_stroke_color</item>
</style>
Also in this case you should use a selector. Something like:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorPrimary" android:state_focused="true"/>
<item android:alpha="0.87" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
<item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
<item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
</selector>
You can also apply these attributes in your layout:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox"
app:boxStrokeColor="#color/selector_stroke_color"
app:hintTextColor="?attr/colorPrimary"
android:textColorHint="#color/selector_hint_text_color"
...>
Based on Fedor Kazakov and others answers, I created a default config.
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="Widget.Design.TextInputLayout" parent="AppTheme">
<item name="hintTextAppearance">#style/AppTheme.TextFloatLabelAppearance</item>
<item name="errorTextAppearance">#style/AppTheme.TextErrorAppearance</item>
<item name="counterTextAppearance">#style/TextAppearance.Design.Counter</item>
<item name="counterOverflowTextAppearance">#style/TextAppearance.Design.Counter.Overflow</item>
</style>
<style name="AppTheme.TextFloatLabelAppearance" parent="TextAppearance.Design.Hint">
<!-- Floating label appearance here -->
<item name="android:textColor">#color/colorAccent</item>
<item name="android:textSize">20sp</item>
</style>
<style name="AppTheme.TextErrorAppearance" parent="TextAppearance.Design.Error">
<!-- Error message appearance here -->
<item name="android:textColor">#ff0000</item>
<item name="android:textSize">20sp</item>
</style>
</resources>
activity_layout.xml
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Text hint here"
android:text="5,2" />
</android.support.design.widget.TextInputLayout>
Focused:
Without focus:
Error message:
Add this attribute in Edittext tag and enjoy:
android:backgroundTint="#color/colorWhite"
This Blog Post describes various styling aspects of EditText and AutoCompleteTextView wrapped by TextInputLayout.
For EditText and AppCompat lib 22.1.0+ you can set theme attribute with some theme related settings:
<style name="StyledTilEditTextTheme">
<item name="android:imeOptions">actionNext</item>
<item name="android:singleLine">true</item>
<item name="colorControlNormal">#color/greyLight</item>
<item name="colorControlActivated">#color/blue</item>
<item name="android:textColorPrimary">#color/blue</item>
<item name="android:textSize">#dimen/styledtil_edit_text_size</item>
</style>
<style name="StyledTilEditText">
<item name="android:theme">#style/StyledTilEditTextTheme</item>
<item name="android:paddingTop">4dp</item>
</style>
and apply them on EditText:
<EditText
android:id="#+id/etEditText"
style="#style/StyledTilEditText"
For AutoCompleteTextView things are more complicated because wrapping it in TextInputLayout and applying this theme breaks floating label behaviour.
You need to fix this in code:
private void setStyleForTextForAutoComplete(int color) {
Drawable wrappedDrawable = DrawableCompat.wrap(autoCompleteTextView.getBackground());
DrawableCompat.setTint(wrappedDrawable, color);
autoCompleteTextView.setBackgroundDrawable(wrappedDrawable);
}
and in Activity.onCreate:
setStyleForTextForAutoComplete(getResources().getColor(R.color.greyLight));
autoCompleteTextView.setOnFocusChangeListener((v, hasFocus) -> {
if(hasFocus) {
setStyleForTextForAutoComplete(getResources().getColor(R.color.blue));
} else {
if(autoCompleteTextView.getText().length() == 0) {
setStyleForTextForAutoComplete(getResources().getColor(R.color.greyLight));
}
}
});
If you want to change the bar/line color and the hint text color of the TextInputLayout (what the accent color normally is), then just create this style:
<style name="MyStyle">
<item name="colorAccent">#color/your_color</item>
</style>
Then apply it to your TextInputLayout as a theme:
<android.support.design.widget.TextInputLayout
...
app:theme="#style/MyStyle" />
This basically sets a theme (not style) to one view (as opposed to the whole activity).
A TextinputLayout is not a view, but a Layout, as very nicely described by Dimitrios Tsigouris in his blog post here. Therefore, you don't need a Style, which is for Views only, but use a Theme. Following the blog post, I ended up with the following solution:
Start in your styles.xml with
<style name="TextInputLayoutAppearance" parent="Widget.Design.TextInputLayout">
<!-- reference our hint & error styles -->
<item name="android:textColor">#color/your_colour_here</item>
<item name="android:textColorHint">#color/your_colour_here</item>
<item name="colorControlNormal">#color/your_colour_here</item>
<item name="colorControlActivated">#color/your_colour_here</item>
<item name="colorControlHighlight">#color/your_colour_here</item>
</style>
And in your layout add
<com.google.android.material.textfield.TextInputLayout
android:theme="#style/TextInputLayoutAppearance"
...
<style name="Widget.Design.TextInputLayout" parent="android:Widget">
<item name="hintTextAppearance">#style/TextAppearance.Design.Hint</item>
<item name="errorTextAppearance">#style/TextAppearance.Design.Error</item>
</style>
You can override this style for layout
And also you can change inner EditText-item style too.
<style name="EditScreenTextInputLayoutStyle" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorControlNormal">#color/actionBar_background</item>
<item name="colorControlActivated">#color/actionBar_background</item>
<item name="colorControlHighlight">#color/actionBar_background</item>
<item name="colorAccent">#color/actionBar_background</item>
<item name="android:textColorHint">#color/actionBar_background</item>
</style>
apply this style to TextInputLayout
I used all of the above answers and none worked. This answer works for API 21+. Use app:hintTextColor attribute when text field is focused and app:textColorHint attribute when in other states. To change the bottmline color use this attribute app:boxStrokeColor as demonstrated below:
<com.google.android.material.textfield.TextInputLayout
app:boxStrokeColor="#color/colorAccent"
app:hintTextColor="#color/colorAccent"
android:textColorHint="#android:color/darker_gray"
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
It works for AutoCompleteTextView as well. Hope it works for you:)
Works for me. If you trying EditText with Label and trying change to underline color use this. Change to TextInputEditText instead EditText.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/editTextTextPersonName3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_16sdp"
android:layout_marginLeft="#dimen/_16sdp"
android:layout_marginTop="#dimen/_16sdp"
android:layout_marginEnd="#dimen/_8sdp"
android:layout_marginRight="#dimen/_8sdp"
android:textColorHint="#color/white"
app:layout_constraintEnd_toStartOf="#+id/guideline3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:backgroundTint="#color/white"
android:hint="Lastname"
android:textSize="#dimen/_14sdp"
android:inputType="textPersonName"
android:textColor="#color/white"
android:textColorHint="#color/white" />
</com.google.android.material.textfield.TextInputLayout>
Change line color of TextInputLayout + TextInputEditText
colors.xml
<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#color/lineColor</color>
styles.xml
<style name="TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.FilledBox.Dense">
<item name="boxStrokeColor">#color/lineColor</item>
<item name="android:textColorHint">#color/hintColor</item>
<item name="boxStrokeWidth">1dp</item>
<item name="boxBackgroundColor">#color/backgroundColor</item>
</style>
<style name="TextInputEditText" parent="ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox.Dense">
<item name="android:textColor">#color/black</item>
</style>
layout.xml
<com.google.android.material.textfield.TextInputLayout
style="#style/TextInputLayout"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<com.google.android.material.textfield.TextInputEditText
style="#style/TextInputEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text" />
</com.google.android.material.textfield.TextInputLayout>
You can change the label color of TextInputLayout by using app:hintTextAppearance attribute in TextInputLayout.
<android.support.design.widget.TextInputLayout
android:id="#+id/inputlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:hintTextAppearance="#style/TextAppearance.App.TextInputLayout">
<EditText
android:id="#+id/mail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:hint="#string/email"
android:inputType="textEmailAddress"
android:maxLines="1"
android:paddingStart="5dp"
android:singleLine="true"/>
</android.support.design.widget.TextInputLayout>
Style:
<style name="TextAppearance.App.TextInputLayout"
parent="#android:style/TextAppearance">
<item name="android:textColor">#android:color/black</item>
<item name="android:textSize">20sp</item>
</style>
To change edittext underline color, you can use android:backgroundTint
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Underline color change"
android:backgroundTint="#android:color/holo_red_light" />
Create style as mentioned below
<style name="text_input_layout_style">
<item name="colorControlNormal">#color/primary</item>
<item name="colorControlActivated">#color/primary</item>
<item name="colorControlHighlight">#color/primary</item>
</style>
and apply it to your TextInputLayout as android:theme="#style/text_input_layout_style"
And definitely will work for you all.
I needed to change the bottom line color of a TextInputEditText inside a TextInputLayout and then the other answers didn't work out. I finally solved it by setting the colorOnSurface for the TextInputLayouts theme. I'll leave my code here in case it helps someone else.
XML:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme=""#style/TextInputLayoutStyle"">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.te`tfield.TextInputLayout>
Style:
<style name="TextInputLayoutStyle">
<item name="colorOnSurface">#0ff</item>
</style>
XML
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/activity_profile_textInputLayout_mobile"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:layout_marginRight="20dp"
android:hint="Mobile Number"
app:theme="#style/EditBoxColor">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/activity_profile_textInputEditText_mobile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:imeOptions="actionNext"
android:inputType="number"
android:maxLength="10"
android:textSize="15sp" />
</com.google.android.material.textfield.TextInputLayout>
Style
<style name="EditBoxColor" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="colorPrimary">#color/colorPurple</item>
<item name="colorPrimaryDark">#color/colorPurple3</item>
</style>
At the moment, I feel a little bit stupid.
Here's my problem :
I actually want to apply different styles for some buttons, different from my default button's style.
My styles.xml :
<!-- Base application 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>
</style>
<style name="CustomTheme" parent="AppTheme">
<item name="android:actionBarStyle">#style/CustomTheme.ActionBarStyle</item>
<item name="cardViewStyle">#style/CustomTheme.CardViewStyle</item>
<item name="buttonStyle">#style/CustomTheme.StandardButton</item>
</style>
<...>
<style name="CustomTheme.StandardButton" parent="Base.Widget.AppCompat.Button.Colored">
<item name="background">#drawable/ripple_button</item>
<item name="android:tint">#color/white</item>
<item name="android:elevation">8dp</item>
</style>
<style name="CustomTheme.ConfirmButton" parent="Base.Widget.AppCompat.Button.Colored">
<item name="background">#drawable/ripple_button_confirm</item>
<item name="android:tint">#color/white</item>
<item name="android:elevation">8dp</item>
</style>
<style name="CustomTheme.CancelButton" parent="Base.Widget.AppCompat.Button.Colored">
<item name="background">#drawable/ripple_button_cancel</item>
<item name="android:tint">#color/white</item>
<item name="android:elevation">8dp</item>
</style>
</resources>
In fact, I tried a lot of things with inheritance of my CustomTheme.ConfirmButton and CustomTheme.CancelButton.
What's changing from CustomTheme.StandardButton : the shape's color.
The ripple_button.xml is orange.
Then, I created two other ripple buttons, the first one is red (CancelButton), the second one is green (ConfirmButton).
By default, the <item name="buttonStyle">#style/CustomTheme.StandardButton</item> is applied.
But, in my activity, even when I declare a specific theme to my buttons, the default style is the only one applied.
Note : the both buttons are always visible in these activity.
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/btn_confirm_reset"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/lbl_confirm"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/btn_cancel_reset"
android:layout_marginBottom="8dp"
style="#style/CustomTheme.ConfirmButton"/>
<Button
android:id="#+id/btn_cancel_reset"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/lbl_cancel"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#id/btn_confirm_reset"
android:layout_marginBottom="8dp"
style="#style/CustomTheme.CancelButton"/>
</android.support.constraint.ConstraintLayout>
I tried to apply the "default" StandardButton theme manually for each button (and then by removing the line <item name="buttonStyle">#style/CustomTheme.StandardButton</item> from my styles.xml but I still get the same behavior : all my buttons are always orange (and using StandardButton theme).
So I'm wondering where I fail / what I don't understand, or even if it's possible.
If a peaceful soul has an idea, some tips, I will be grateful (I can thank my hero with a french craft beer).
Have a great day, and thanks for reading.
Update your Button Style as below:
style.xml
<style name="CustomTheme.StandardButton" parent="Base.Widget.AppCompat.Button.Colored">
<item name="android:backgroundTint">#color/orange</item>
<item name="android:colorButtonNormal">#color/gray</item>
<item name="android:colorControlHighlight">#color/blue</item>
<item name="android:elevation">8dp</item>
</style>
<style name="CustomTheme.ConfirmButton" parent="Base.Widget.AppCompat.Button.Colored">
<item name="android:backgroundTint">#color/orange</item>
<item name="android:colorButtonNormal">#color/gray</item>
<item name="android:colorControlHighlight">#color/blue</item>
<item name="android:elevation">8dp</item>
</style>
<style name="CustomTheme.CancelButton" parent="Base.Widget.AppCompat.Button.Colored">
<item name="android:backgroundTint">#color/orange</item>
<item name="android:colorButtonNormal">#color/gray</item>
<item name="android:colorControlHighlight">#color/blue</item>
<item name="android:elevation">8dp</item>
</style>
You missed to append android: in item background.
To set Ripple effect you have to use android:colorControlHighlight because android:backgroundTint will take only color as input and drawable will not work. Here android:colorButtonNormal will give no effect because we have set backgroundTint. If you will remove backgroundTint, it will take color from android:colorButtonNormal
You have to set the theme in Button instead of style.
your_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="wrap_content">
<Button
android:id="#+id/btn_confirm_reset"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/lbl_confirm"
android:textColor="#color/white"
android:theme="#style/CustomTheme.ConfirmButton"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/btn_cancel_reset"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btn_cancel_reset"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/lbl_cancel"
android:textColor="#color/white"
android:theme="#style/CustomTheme.CancelButton"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#id/btn_confirm_reset"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Hope it will work!!