Develop Reference

MaterialButton doesn't look as a "MaterialButton" in Android 5.1.1 (API level 22)

I've encountered a strange behavior of the Material button. It looks fine when I try in Android 10 (API level 29) but it looks ugly (no border-radius, no hover, no ripple effect) in Android 5.1.1 (API level 22). Can you please tell me what is wrong with it?
fragment_log_in.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
android:paddingStart="24dp"
android:paddingEnd="24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textview.MaterialTextView
style="#style/PacificTextView"
android:text="#string/log_in"
android:textSize="32sp" />
<androidx.appcompat.widget.AppCompatAutoCompleteTextView
style="#style/EditTextStyle"
android:layout_marginTop="24dp"
android:hint="#string/email_or_username"
android:imeOptions="actionNext"
android:inputType="textEmailAddress" />
<EditText
style="#style/EditTextStyle"
android:layout_marginTop="16dp"
android:hint="#string/password"
android:imeOptions="actionDone"
android:inputType="textPassword"
tools:ignore="Autofill" />
<com.google.android.material.button.MaterialButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
app:backgroundTint="#color/teal_700"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
values\themes.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.Moviery" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/naturally_calm</item>
<item name="colorPrimaryVariant">#color/naturally_calm</item>
<item name="colorOnPrimary">#color/wet_asphalt</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/bright_grey</item>
<item name="colorSecondaryVariant">#color/bright_grey</item>
<item name="colorOnSecondary">#color/asphalt</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">#color/asphalt</item>
<!-- Customize your theme here. -->
<item name="android:background">#color/naturally_calm</item>
<item name="android:navigationBarColor" tools:targetApi="l">#color/asphalt</item>
</style>
<style name="PacificTextView">
<item name="android:textColor">#color/wet_asphalt</item>
<item name="fontFamily">#font/pacifico</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:padding">8dp</item>
</style>
<style name="SmallTextView">
<item name="android:textColor">#color/asphalt</item>
<item name="android:fontFamily">#font/rubik</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
</style>
<style name="SmallImageView">
<item name="android:layout_height">20dp</item>
<item name="android:layout_width">20dp</item>
<item name="android:src">#drawable/ic_down</item>
</style>
<style name="IncludeLanguage">
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_marginTop">8dp</item>
<item name="android:padding">8dp</item>
</style>
<style name="ViewSeparator">
<item name="android:layout_height">0.5dp</item>
<item name="android:layout_width">match_parent</item>
<item name="android:background">#color/asphalt</item>
</style>
<style name="EditTextStyle">
<item name="android:background">#drawable/edit_text_background</item>
<item name="android:layout_height">50dp</item>
<item name="android:layout_width">match_parent</item>
<item name="android:paddingStart">8dp</item>
<item name="android:paddingEnd">8dp</item>
<item name="android:textCursorDrawable">#null</item>
<item name="android:textSize">15sp</item>
</style>
</resources>
night\themes.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.Moviery" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/wet_asphalt</item>
<item name="colorPrimaryVariant">#color/wet_asphalt</item>
<item name="colorOnPrimary">#color/bright_grey</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/asphalt</item>
<item name="colorSecondaryVariant">#color/asphalt</item>
<item name="colorOnSecondary">#color/naturally_calm</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">#color/naturally_calm</item>
<!-- Customize your theme here. -->
<item name="android:background">#color/wet_asphalt</item>
<item name="android:navigationBarColor" tools:targetApi="l">#color/naturally_calm</item>
</style>
<style name="PacificTextView">
<item name="android:textColor">#color/bright_grey</item>
<item name="fontFamily">#font/pacifico</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:padding">8dp</item>
</style>
<style name="SmallTextView">
<item name="android:textColor">#color/naturally_calm</item>
<item name="android:fontFamily">#font/rubik</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
</style>
<style name="SmallImageView">
<item name="android:layout_height">20dp</item>
<item name="android:layout_width">20dp</item>
<item name="android:src">#drawable/ic_down_night</item>
</style>
<style name="ViewSeparator">
<item name="android:layout_height">0.5dp</item>
<item name="android:layout_width">match_parent</item>
<item name="android:background">#color/naturally_calm</item>
</style>
<style name="EditTextStyle">
<item name="android:background">#drawable/edit_text_background_night</item>
<item name="android:layout_height">50dp</item>
<item name="android:layout_width">match_parent</item>
<item name="android:paddingStart">8dp</item>
<item name="android:paddingEnd">8dp</item>
<item name="android:textCursorDrawable">#null</item>
<item name="android:textSize">15sp</item>
</style>
</resources>
Android 5.1.1 (API level 22)
Android 10 (API level 29)
Android Studio (Latest version)

style.xml
<style name="Widget.AppTheme.ConfirmButton" parent="Widget.MaterialComponents.Button.UnelevatedButton">
<item name="android:backgroundTint">?colorSecondary</item>
<item name="android:textColor">?colorOnSecondary</item>>
<item name="cornerRadius">2dp</item>
<item name="android:paddingTop">#dimen/margin_12</item>
<item name="android:paddingBottom">#dimen/margin_12</item>
<item name="android:letterSpacing">-0.02</item>
</style>
fragment_log_in.xml
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_allow"
style="#style/Widget.AppTheme.ConfirmButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginEnd="#dimen/margin_20"
android:layout_marginBottom="#dimen/margin_16"
android:text="#string/str_continue" />

The problem is in the "Theme.Moviery" style android: background attribute.

Android Material Edit Text endIcon

I've added an EditText view from Google's material library and set the endIcon mode to clear_text. However, the endIcon is too big (it fits the text view entirely), whereas, from looking at the documentation, I believe it should be a little smaller. I tried to play around with the layout XML but can't seem to find out why this is. I've also looked at the endIcon attributes in the Material repository and there seems to be no endIconSize attribute. I'd appreciate it if someone could point out where I made the mistake.
TextView XML
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/descriptionTextField"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:boxBackgroundColor="#android:color/white"
app:boxStrokeColor="#color/colorSecondaryLight"
app:boxStrokeWidth="2dp"
app:endIconMode="clear_text"
app:errorEnabled="false"
app:layout_constraintBottom_toBottomOf="#+id/taskConfirmedBtn"
app:layout_constraintEnd_toStartOf="#+id/taskConfirmedBtn"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/taskConfirmedBtn">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/descriptionInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif"
android:inputType="textCapSentences"
android:singleLine="true"
android:textColor="#color/colorOnSurface" />
Styles xml
<resources>
<!-- Base application theme -->
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<item name="android:colorBackground">#color/background</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryVariant">#color/colorPrimaryLight</item>
<item name="colorOnPrimary">#color/colorOnPrimary</item>
<item name="colorSecondary">#color/colorSecondary</item>
<item name="colorSecondaryVariant">#color/colorSecondaryLight</item>
<item name="colorOnSecondary">#color/colorOnSecondary</item>
<item name="toolbarStyle">#style/Widget.Taskeroo.Toolbar</item>
<item name="actionBarTheme">#style/Widget.Taskeroo.ActionBar</item>
<item name="floatingActionButtonStyle">#style/Widget.Taskeroo.FloatingActionButton</item>
<item name="imageButtonStyle">#style/Widget.Taskeroo.ImageButton</item>
<item name="materialCardViewStyle">#style/Widget.Taskeroo.CardView</item>
<item name="bottomSheetDialogTheme">#style/CustomBottomSheetDialog</item>
<item name="android:textViewStyle">#style/SanSerifLightTextView</item>
<item name="android:buttonStyle">#style/SansSerifLightButton</item>
<item name="android:radioButtonStyle">#style/SansSerifLightButton</item>
</style>
<!-- Themes -->
<style name="SplashScreenTheme" parent="AppTheme.NoActionBar">
<item name="android:windowBackground">#drawable/splash_screen_bitmap</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="AppTheme.NoActionBar.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.NoActionBar.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<!-- Widgets -->
<style name="Widget.Taskeroo.ActionBar" parent="Widget.MaterialComponents.ActionBar.Primary">
<item name="android:colorControlNormal">#color/colorOnPrimary</item>
<item name="android:iconTint">#color/colorOnPrimary</item>
</style>
<style name="Widget.Taskeroo.Toolbar" parent="Widget.MaterialComponents.Toolbar.Primary">
<item name="titleTextColor">#color/colorOnPrimary</item>
</style>
<style name="Widget.Taskeroo.FloatingActionButton" parent="Widget.MaterialComponents.FloatingActionButton">
<item name="android:backgroundTint">#color/colorSecondaryLight</item>
<item name="tint">#color/colorOnSecondary</item>
</style>
<style name="Widget.Taskeroo.CardView" parent="Widget.MaterialComponents.CardView">
<item name="cardBackgroundColor">#color/colorSurface</item>
<item name="cardElevation">10dp</item>
<item name="android:elevation">8dp</item>
</style>
<style name="DividerStyle">
<item name="android:background">#color/colorSecondary</item>
</style>
<style name="Widget.Taskeroo.ImageButton" parent="Widget.AppCompat.Button.Borderless.Colored">
<item name="tint">#color/colorSecondary</item>
</style>
<!-- Components -->
<style name="CustomBottomSheetDialog" parent="#style/ThemeOverlay.MaterialComponents.BottomSheetDialog">
<item name="bottomSheetStyle">#style/CustomBottomSheet</item>
</style>
<style name="CustomBottomSheet" parent="Widget.MaterialComponents.BottomSheet">
<item name="shapeAppearanceOverlay">#style/CustomShapeAppearanceBottomSheetDialog</item>
<item name="backgroundTint">#color/colorSurface</item>
</style>
<style name="CustomShapeAppearanceBottomSheetDialog" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopRight">16dp</item>
<item name="cornerSizeTopLeft">16dp</item>
<item name="cornerSizeBottomRight">0dp</item>
<item name="cornerSizeBottomLeft">0dp</item>
</style>
<!-- Fonts -->
<style name="SanSerifLightTextView" parent="android:Widget.TextView">
<item name="android:fontFamily">sans-serif-light</item>
</style>
<style name="SansSerifLightButton" parent="android:Widget.Holo.Button">
<item name="android:fontFamily">sans-serif-light</item>
</style>
<style name="SansSerifLightRadioButton" parent="android:Widget.Holo.CompoundButton.RadioButton">
<item name="android:fontFamily">sans-serif-light</item>
</style>
<style name="AppTheme.NoActionBar.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
</resources>

Your issue is here:
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<item name="imageButtonStyle">#style/Widget.Taskeroo.ImageButton</item>
</style>
<style name="Widget.Taskeroo.ImageButton" parent="Widget.AppCompat.Button.Borderless.Colored">
<item name="tint">#color/colorSecondary</item>
</style>
You are using Widget.AppCompat.Button.* instead of Widget.AppCompat.ImageButton.
The style Widget.AppCompat.Button.Borderless.Colored has a custom dimens.

Change the code like this :
<com.google.android.material.textfield.TextInputLayout
app:endIconDrawable="#drawable/customDrawable">
...
</com.google.android.material.textfield.TextInputLayout>
where custom drawable, is a vector/png image of any shape and size you will define.
If this still doesn't solve your problem, try downgrading to :
implementation 'com.google.android.material:material:1.0.0'
Most probably it will solve your problem.

try this-->
Add dependency:
Gradle:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
dependency:
implementation 'com.github.HITGIF:TextFieldBoxes:1.4.3'
Use app:endIcon in xml or setEndIcon(Int resourceID) to set the icon of the ImageButton that is shown at the end of the field if you want there to be one.
<studio.carbonylgroup.textfieldboxes.TextFieldBoxes
...
app:endIcon="#drawable/ic_mic_black_24dp"
>
in java:
final TextFieldBoxes textFieldBoxes = findViewById(R.id.text_field_boxes);
textFieldBoxes.getEndIconImageButton().setOnClickListener(new
View.OnClickListener() {
#Override
public void onClick(View view) {
// What you want to do when it's clicked
}
});

Try this solution in your_view.xml
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/til_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true"
app:hintEnabled="false"
app:passwordToggleDrawable="#drawable/show_password_selector" <-- add this line
app:endIconMode="password_toggle" <-- add this line
app:passwordToggleEnabled="true"> <-- add this line
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/et_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_password"
android:inputType="textPassword"/>
</com.google.android.material.textfield.TextInputLayout>
You can also use this solution for the start icon
I hope help

android:style not applying in xml layout

I need to apply a custom style to a Spinner.
These are my styles in styles.xml:
<style name="spinnerItemStyle">
<item name="android:textColor">#color/font</item>
<item name="android:textSize">#dimen/small_text</item>
</style>
<style name="spinnerDropDownItemStyle">
<item name="android:padding">10dp</item>
<item name="android:textColor">#color/font</item>
<item name="android:textSize">#dimen/small_text</item>
<item name="android:background">#color/unpressed2</item>
</style>
And I'm doing this in the layout:
android:spinnerItemStyle="#style/spinnerItemStyle"
android:spinnerDropDownItemStyle="#style/spinnerDropDownItemStyle"
<Spinner
android:id="#+id/songSpinner"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="30dp"
android:layout_marginRight="30dp"
android:textSize="#dimen/small_text"
android:entries="#array/songs_array"
android:spinnerItemStyle="#style/spinnerItemStyle"
android:spinnerDropDownItemStyle="#style/spinnerDropDownItemStyle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent="0.18"
app:layout_constraintTop_toBottomOf="#+id/musicSeekBar"
app:layout_constraintWidth_percent="0.5" />
The problem is that Spinner is ignoring the styles applied.
And also I disscovered that it works perfectly if I do this in my custom app theme inside styles.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="colorButtonNormal">#color/unpressed2</item>
<item name="android:buttonStyle">#style/ButtonColor</item>
<item name="android:textColor">#color/font</item>
<!-- spinner styles -->
<item name="android:spinnerItemStyle">
#style/spinnerItemStyle
</item>
<item name="android:spinnerDropDownItemStyle">
#style/spinnerDropDownItemStyle
</item>
</style>
Why works with my second approach and not with the first?

styles.xml File
Add below xml code in your styles.xml File.
<style name="CustomSpinner" parent="AppTheme">
<item name="android:spinnerItemStyle">#style/spinnerItemStyle</item>
<item name="android:spinnerDropDownItemStyle">#style/spinnerDropDownItemStyle</item>
</style>
yourlayout.xml
In Spinner use this styles
For E.g:-
<Spinner
android:id="#+id/songSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/CustomSpinner">
</Spinner>

Style is not applying

I have been trying to apply style to a EditText and a Toolbar and it seems not to work, it's the first time that is happening to me, here is my code for styles:
<resources>
<style name="WifiHome" parent="#style/Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">#color/light_blue</item>
<item name="android:textAppearance">#style/WifiHomeTextAppearance</item>
<item name="android:textViewStyle">#style/MyTextViewStyle</item>
<item name="android:textColor">#color/dark_blue</item>
</style>
<style name="WifiHomeBarStyle" parent="#style/Widget.AppCompat.Toolbar">
<item name="android:background">#color/dark_blue</item>
<item name="colorControlNormal">#color/white</item>
<item name="colorControlActivated">#color/white</item>
<item name="colorControlHighlight">#color/white</item>
<item name="background">#color/dark_blue</item>
</style>
<style name="EditTextStyle" parent="#style/Widget.AppCompat.EditText">
<item name="colorControlNormal">#color/dark_blue</item>
<item name="colorControlActivated">#color/dark_blue</item>
<item name="colorControlHighlight">#color/dark_blue</item>
</style>
<style name="MyTextViewStyle" parent="android:Widget.TextView">
<item name="android:textAppearance">#style/WifiHomeTextAppearance</item>
</style>
<style name="WifiHomeTextAppearance" parent="#android:style/TextAppearance.Medium">
<item name="android:textColor">#color/dark_blue</item>
<item name="android:textSize">15dp</item>
</style>
<style name="WifiHomeTextAppearance.Large" parent="#style/WifiHomeTextAppearance">
<item name="android:textSize">18dp</item>
<item name="android:textStyle">bold</item>
</style>
Here the declaration of EditText:
<EditText
style="#style/EditTextStyle"
android:id="#+id/txtPass"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:textColor="#color/dark_blue"
android:layout_below="#id/lblPass"/>
And the declaration of toolbar:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/WifiHomeBarStyle"
android:id="#+id/app_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/dark_blue"
android:minHeight="?attr/actionBarSize" />
Simply it doesn't work, no effect.

Try changing your code like this,
<style name="WifiHome" parent="#style/Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">#color/light_blue</item>
<item name="android:textAppearance">#style/WifiHomeTextAppearance</item>
<item name="android:textViewStyle">#style/MyTextViewStyle</item>
<item name="android:textColor">#color/dark_blue</item>
<item name="colorControlNormal">#color/dark_blue</item>
<item name="colorControlActivated">#color/dark_blue</item>
<item name="colorControlHighlight">#color/dark_blue</item>
</style>
OR something like this in your EditText definition,
style="#style/Widget.AppCompat.EditText

How to use parent style in android xml

How to use parent style in android xml. Code is here. its not working.
And i have added layout.xml and style.xml.
Please advise for this.
layout.xml
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginRight="25dp"
android:orientation="horizontal">
<TextView
style="#style/textbold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Catering: "/>
<TextView
style="#style/textwhiteitalic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Veg, 20-50, Lunch, Wedding, 15 Oct, Breakfast ..."/>
</LinearLayout>
style.xml
<resources>
<style name="textbold">
<item name="android:textSize">16sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">#fff</item>
</style>
<style name="textwhite">
<item name="android:textColor">#fff</item>
<item name="android:textSize">16sp</item>
</style>
<style name="textwhiteitalic" parent="#style/textwhite">
<item name="android:textStyle">italic</item>
</style>

try this you directly add parent like parent="#style/textwhite"
<style name="textwhiteitalic" parent="#style/textwhite">
<item name="android:textStyle">italic</item>
</style>
For more details go to http://developer.android.com/guide/topics/ui/themes.html
Update: try this way
<style name="txt_style_row" parent="android:Widget.TextView">
<item name="android:textColor">#fff</item>
<item name="android:textSize">16sp</item>
<item name="android:textStyle">italic</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textStyle">italic</item>
</style>
and set style to your TextView like
style="#style/txt_style_row"

For this what you need to do is ::
<style name="textwhite">
<item name="android:textColor">#fff</item>
<item name="android:textSize">16sp</item>
</style>
<style name="textwhite.textwhiteitalic" >
<item name="android:textStyle">italic</item>
</style>
--
<TextView
style="#style/textwhite.textwhiteitalic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Veg, 20-50, Lunch, Wedding, 15 Oct, Breakfast ..."/>