Material Components theme dialog buttons go puffy after changing theme of Application

user_4858147 0
Viewed 2959

Today I was trying out new material components part of their instalation is that you need to change parent of your app to inherit from Theme.MaterialComponents. So I did it because I wanted to use Bottom navigation with nicer ripple. But after that, almost all buttons in application got puffier.

What should I do to revert to the previous state (image on right)?

On left is a material version on right is appcompat version On left is a material version on right is appcompat version

material-components-android android
3 Answers

During research, I found the answer I will leave it here maybe it will help someone.

Reason that they look like this is because they use style="attr/buttonBarNegativeButtonStyle" and Material theme overrides them

To fix this problem you need to use Bridge theme instead of Theme.MaterialComponents.Light

<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light.Bridge">
    <!-- ... -->
</style>

more here: https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md#bridge-themes

user_48581470

Another way to do it is to use AlertDialog from the AndroidX AppCompat library:

AlertDialog signInDialog = new AlertDialog.Builder(this)
    .setMessage("Are you sure you want to log out?")
    .setPositiveButton("OK", (dialogInterface, i) -> {
        // TODO: Add your code here
    })
    .setNegativeButton("Cancel", (dialogInterface, i) -> {
        // TODO: Add your code here
    })
signInDialog.show();

Note: If you're using the Material Components for Android library and/or you're using the new Theme.MaterialComponents.* themes, you should instead use the MaterialAlertDialogBuilder class, which should be used in place of the AppCompat AlertDialog class as described below:

Material maintains usage of the framework AlertDialog, but provides a new builder, MaterialAlertDialogBuilder, which configures the instantiated AlertDialog with Material specs and theming.

Here's an example (in Kotlin):

MaterialAlertDialogBuilder(this).apply {
    setMessage("Are you sure you want to log out?")
    setPositiveButton("OK") {
        TODO("Unimplemented functionality")
    }
    setNegativeButton("Cancel") {
        TODO("Unimplemented functionality")
    }
}.show()
user_67827070

Solution

Stop use of android.app.AlertDialog and replace with androidx.appcompat.app.AlertDialog it will solve your problem

You can use

    <style name="AppTheme" parent="@style/Theme.MaterialComponents.Light.Bridge">
    </style>

    or

    <style name="AppTheme" parent="@style/Theme.MaterialComponents.Light.NoActionBar.Bridge">
    </style>

But it will cause you when you will use the material component like ExtendedFloatingActionButton, MaterialButton, etc

user_82409150
Related