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!!
Related
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 have one button and letterspacing is not working with it. Please check my following snippet code
<style name="ButtonText_v2" parent="TextAppearance.AppCompat">
<item name="fontFamily">#font/silka_regular</item>
<item name="android:letterSpacing">0.1</item>
<item name="android:textSize">#dimen/dimen_14dp</item>
</style>
<style name="PrimaryButton_v2" parent="Widget.AppCompat.Button">
<item name="android:background">#drawable/button_selector_primary</item>
<item name="android:textColor">#color/white</item>
<item name="textAllCaps">true</item>
<item name="textAppearance">#style/ButtonText_v2</item>
</style>
layout.xml File
<Button
android:text="Button"
android:layout_height="56dp"
android:layout_width="200dp"
style="#style/PrimaryButton_v2"
android:layout_margin="15dp"
/>
You can't apply letter spacing in button/custom button because their is some limitation in button component in which you can't make text appearance and background customization and more limitation
the solution for this is instead of button you can use text view and make custom text view it will also work similar to button and customize it according to requirement.
for example :-
https://stackoverflow.com/questions/9477336/how-to-make-a-custom-textview#:~:text=Create%20a%20Custom%20View%20for%20Textview.%20Make%20the,values%20Make%20entries%20of%20all%20fonts%20in%20strings.xml
Add android:letterSpacing in PrimaryButton_v2 it will work perfectly.
<style name="ButtonText_v2" parent="TextAppearance.AppCompat">
<item name="fontFamily">#font/silka_regular</item>
<item name="android:textSize">#dimen/dimen_14dp</item>
</style>
<style name="PrimaryButton_v2" parent="Widget.AppCompat.Button">
<item name="android:background">#drawable/button_selector_primary</item>
<item name="android:textColor">#color/white</item>
<item name="textAllCaps">true</item>
<item name="textAppearance">#style/ButtonText_v2</item>
<item name="android:letterSpacing">0.1</item>
</style>
layout.xml File
<Button
android:text="Button"
android:layout_height="56dp"
android:layout_width="200dp"
style="#style/PrimaryButton_v2"
android:layout_margin="15dp"
/>
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 BottomNavigationView but observing a strange issue.
When used with the theme "Theme.AppCompat.Light.DarkActionBar", Text and Icon Resize animation works fine on each item when clicked.
But When used with theme "Theme.MaterialComponents.Light.DarkActionBar",
it's not working, No Resize animation happening.
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#212121"
app:itemIconTint="#color/nav_item_color_state"
app:itemTextColor="#color/nav_item_color_state"
app:menu="#menu/bottom_menu_main"/>
nav_item_color_state.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/action_nav_feed"
android:icon="#android:drawable/ic_input_add"
android:checked="true"
android:title="List"/>
<item
android:id="#+id/action_nav_info"
android:icon="#android:drawable/ic_notification_overlay"
android:title="Info"/>
<item
android:id="#+id/action_nav_profile"
android:icon="#android:drawable/ic_delete"
android:title="Profile"/>
</menu>
style.xml
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<!-- Theme.AppCompat.Light.DarkActionBar -->
Try using the properties app:itemTextAppearanceActive and app:itemTextAppearanceInactive
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#212121"
app:itemIconTint="#color/nav_item_color_state"
app:itemTextAppearanceActive="#style/BottomNavigationView.Active"
app:itemTextAppearanceInactive="#style/BottomNavigationView"
app:itemTextColor="#color/nav_item_color_state"
app:menu="#menu/bottom_menu_main"/>
In styles.xml
<style name="BottomNavigationView"
parent="#style/TextAppearance.AppCompat.Caption">
<item name="android:textSize">10sp</item>
</style>
<style name="BottomNavigationView.Active"
parent="#style/TextAppearance.AppCompat.Caption">
<item name="android:textSize">15sp</item>
</style>
There's no need to set theme for this View, these styles will do the thing.
Created custom style for button when apply the style for button it is partially. Here is the style code snippet.
Manifest.xml
<application android:theme="#style:AppTheme">
styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:buttonStyle">#style/back_button_style</item>
<item name="buttonStyle">#style/back_button_style</item>
</style>
<style name="back_button_style" parent="Widget.AppCompat.Button">
<item name="background">#drawable/back_button_shape</item>
<item name="android:layout_height">40dp</item>
<item name="android:textColor">#ffffff</item>
<item name="android:textSize">16sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textAlignment">center</item>
<item name="android:textAllCaps">true</item>
<item name="android:layout_marginStart">72dp</item>
<item name="android:layout_marginEnd">72dp</item>
<item name="android:fontFamily">sans-serif</item> //sans-serif nothing but robot regular
</style>
layout.xml
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="continue"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.501"
android:layout_marginBottom="8dp" />
After applying the style only the text color changes to white since i given the text color as white in style but other credentials are not applied background, before applying the button text color was black.
So I not getting why it is partially applying the style.
I tried like this also but it is not working
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="continue"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.501"
android:layout_marginBottom="8dp"
android:theme="#style/back_button_style/>
I am not getting what and where is the bug in the code.
Rectify Button android:theme section .
Don't
android:theme="#style/back_button_style
Do
style="#style/back_button_style"
Then Clean-Rebuild-Run .