App style changed after adding this library

[meashumishra]

I have added this library in my app which has a black background but it's changed the background colours of views (ex. Textinputlayout) and sizes of a button. Please help me to resolve this issue. This is the theme used in the app

` <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/dark_selected</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/selected</item>
        <item name="android:popupMenuStyle">@style/PopupMenu</item>
        <item name="android:itemBackground">@color/unselected</item>
        <item name="android:dropDownListViewStyle">@style/PopupMenu</item>
        <item name="android:textSize">17dp</item>
    </style>`

[nikhilpanju]

Synth won't change anything in your app. It only has control over its own widgets. Maybe the issue is somewhere else? If the issue persists only because of Synth, you can try removing the library or any of the views used in the layout to see where the issue is. We would also need more information like layout/activity files to understand what the issue is

[meashumishra]

After removing Synth it was working as expected that's why I have created an issue here. code is as below which is used in the layout . `<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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="match_parent" android:background="@color/background">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="500dp"
    android:layout_centerInParent="true"
    android:gravity="center"
    android:orientation="vertical">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/text_input_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/etPasswordLayout"
        android:layout_centerHorizontal="true"
        android:textColorHint="@color/white_fifty"
        app:boxStrokeColor="@color/selected"
        app:boxStrokeWidth="2dp">

        <EditText
            android:id="@+id/id"
            style="@style/ButtonTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:backgroundTint="@color/white"
            android:ems="10"
            android:hint="Mobile/Email"
            android:textAlignment="textStart"
            android:textColorHint="@color/white_fifty" />
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/etPasswordLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/enter"
        android:layout_centerHorizontal="true"
        android:textColorHint="@color/white_fifty"
        app:passwordToggleEnabled="true"
        app:passwordToggleTint="@color/unselected_text"

        >

        <EditText
            android:id="@+id/passcode"
            style="@style/ButtonTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="8dp"
            android:backgroundTint="@color/white"
            android:ems="10"
            android:hint="Passcode"
            android:inputType="textPassword"
            android:textAlignment="textStart"
            android:textColorHint="@color/white_fifty" />
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/enter"
        style="@style/MaterialButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:padding="16dp"
        android:text="Login"

        android:textStyle="bold"
        app:cornerRadius="8dp"
        app:rippleColor="@color/selected" />

</LinearLayout>

`

[nikhilpanju]

Adding the dependency alone causes the issue or does it happen when including a Synth view in the layout?

[meashumishra]

Yes, after adding dependency views background changed. Previously it was black, after adding the dependency TextInputLayout background changed to white.

[nikhilpanju]

Can you perhaps upload a sample project that demonstrates this? With the given information, it's hard to understand how this is being caused

[meashumishra]

Please find the sample project. Just enable Synth in this project and check the behaviour. SynthSample.zip

[nikhilpanju]

Thanks for submitting the project. This seems to be happening because the project has an older version of the material components library (1.0.0) whereas Synth has the newer version (1.2.0).

If you update the library in the project to the latest release: com.google.android.material:material:1.3.0 the view background has changed. This must be because of some change in the material components library. So you could perhaps look into that