I was using Material design 1.1.0
.
For tabs with viewpager2 I updated it to '1.2.0-alpha05' Material library version it was working fine for single module but was crashing for another module where I've developed my custom material designed TextInputLayout. I changed theme from 'Theme.AppCompat.Light.NoActionBar' to Theme.MaterialComponents.Light.NoActionBar
and crash fixed. After fixing crash and upgrading theme it is showing me white floating label , buttons , indiators etc anyone please guide me where am I doing wrong.?
GITHUb Issue Ticket Link : https://github.com/material-components/material-components-android/issues/1207
TextInputLayout
Style.xml (Old File)
<!-- your app branding color for the app bar -->
<item name="colorPrimary">@color/white</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="colorPrimaryDark">@color/colorPrimary_New</item>
<!-- theme UI controls like checkboxes and text fields also known as secondary color -->
<item name="colorAccent">@color/a465661</item>
</style>
old file had conflict with material while using AppCompact with parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
after updating to 1.2.0-alpha05 it was resolved but style background is not working now
Library
materialVersion = '1.2.0-alpha05'
"com.google.android.material:material:$materialVersion"
.XML (Design)
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/textInputLayout"
style="@style/contentInputLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/_8dp"
android:paddingStart="5dp"
android:paddingLeft="5dp"
app:helperTextEnabled="true"
android:layout_marginLeft="@dimen/_8dp"
android:layout_marginEnd="@dimen/_8dp"
android:layout_marginRight="@dimen/_8dp"
app:errorEnabled="false"
app:layout_constraintBottom_toTopOf="@+id/errorTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:hint="@string/EnterMobileNumber">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/textInputEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="phone"
android:gravity="start"
android:textDirection="anyRtl"
tools:text="0335510023"
android:background="@null"
android:paddingEnd="@dimen/inputFieldPadding_36dp"
android:paddingRight="@dimen/inputFieldPadding_36dp" />
</com.google.android.material.textfield.TextInputLayout>
Style.xml
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar" >
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/white</item>
<item name="colorPrimaryDark">@color/green</item>
<item name="colorAccent">@color/a465661</item>
</style>
<style name="contentInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">@color/border_stroke_grey</item>
<item name="android:textColor">@color/black</item>
<item name="android:textStyle">normal</item>
<item name="errorTextAppearance">@style/error_label</item>
<item name="counterOverflowTextAppearance">@style/AppTheme.TextFloatLabelAppearance</item>
<item name="android:actionOverflowButtonStyle">@style/AppTheme.TextFloatLabelAppearance
</item>
<item name="hintTextAppearance">@style/text_label</item>
</style>
<style name="text_label" parent="TextAppearance.Design.Hint">
<item name="android:textSize">@dimen/title_heading_12sp</item>
<item name="colorControlNormal">@color/black</item>
<item name="colorControlActivated">@color/black</item>
<item name="colorControlHighlight">@color/black</item>
</style>
<style name="text_label_green" parent="TextAppearance.Design.Hint">
<item name="android:textSize">@dimen/title_heading_12sp</item>
<item name="colorControlNormal">@color/green_field</item>
<item name="android:background">@null</item>
<item name="colorControlActivated">@color/green_field</item>
<item name="colorControlHighlight">@color/green_field</item>
</style>
<style name="AppTheme.TextFloatLabelAppearance" parent="text_label">
<!-- Floating label appearance here -->
<item name="android:textColor">@color/label_title_black</item>
<item name="android:textSize">@dimen/title_heading_12sp</item>
<item name="android:background">@android:color/transparent</item>
<item name="colorControlNormal">@color/label_title_black</item>
<item name="colorControlHighlight">@color/label_title_black</item>
<item name="colorControlActivated">@color/label_title_black</item>
</style>
<style name="material_edit_text" parent="Widget.AppCompat.EditText">
<item name="android:paddingStart">50dp</item>
<item name="android:paddingLeft">50dp</item>
<item name="android:background">@null</item>
<item name="android:textSize">16sp</item>
</style>
<style name="error_label" parent="TextAppearance.Design.Hint">
<item name="android:textSize">0sp</item>
<item name="android:textColor">@color/red</item>
<item name="android:visibility">gone</item>
</style>
<style name="BtnCustomStyle">
<item name="android:background">@drawable/btn_confirm_selector</item>
<item name="android:textColor">@android:color/white</item>
<item name="android:textSize">15dp</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">46dp</item>
<item name="android:layout_marginStart">10dp</item>
<item name="android:layout_marginEnd">10dp</item>
<item name="android:textAllCaps">false</item>
<item name="android:foreground">android:attr/selectableItemBackground</item>
</style>
Style(v27).xml (deleted file)
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/white</item>
<item name="colorPrimaryDark">@color/colorPrimary_New</item>
<item name="colorAccent">@color/a465661</item>
<item name="android:windowLayoutInDisplayCutoutMode">never</item>
</style>
Update
Read topic on material design UI update. According to this document I've to add few attributes that are below!
<!-- New MaterialComponents attributes. -->
<item name="colorOnPrimary">@color/whitee</item>
<item name="colorOnSecondary">@color/colorPrimary_New</item>
<item name="colorOnSurface">@color/a465661</item>-->
<item name="colorSurface">@color/a465661</item>-->
<item name="colorOnBackground">#212121</item>-->
<item name="android:colorBackground">@color/background</item>
<item name="colorError">#F44336</item>-->
<item name="colorOnError">#FFFFFF</item>
but , I tried changing color for TextInputLayout its working fine but for button its not. anyone please guide me how to handle this with new material design.?