switching to Theme.MaterialComponents from Theme.AppCompat shows white blank labels & buttons

问题

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

"Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"

this line was causing crash while using appCompact Theme.

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.?

回答1:

Change the to white primary color to something else, what is not the same color like the background.

来源：https://stackoverflow.com/questions/60850751/switching-to-theme-materialcomponents-from-theme-appcompat-shows-white-blank-lab