snowdragon snowdragon - 13 days ago 5
Android Question

Dialog skinning with AppCompat-v7 22 results in ugly shadows on api < 21

I'm using AppCompat to write a material design styled app. Since AppCompat does not affect dialogs, I'm skinning the dialogs as such:

styles.xml:

<style name="AppTheme.Base" parent="Theme.AppCompat">
<!-- Set AppCompat’s color theming attrs -->
<item name="colorPrimary">@color/green</item>
<item name="colorPrimaryDark">@color/green_darker</item>
<item name="colorAccent">@color/accent</item>

<item name="android:alertDialogTheme">@style/alertDialog</item>
<item name="android:dialogTheme">@style/alertDialog</item>
</style>

<style name="alertDialog" parent="Theme.AppCompat.Dialog">
<item name="colorPrimary">@color/green</item>
<item name="colorPrimaryDark">@color/green_darker</item>
<item name="colorAccent">@color/accent</item>
</style>




I am gettings exactly what I wanted on android api >= 21, but on other devices I end up with a "box" around the dialogs.

Is there a way to get rid of the "box" around the dialog and even get the colors and material theme applied on api < 21, preferably without any additional depencendies?

App on Api < 21:

App on API < 21

App on API >= 21:

App on API >= 21

Answer

With the new AppCompat v22.1 you can use the new android.support.v7.app.AlertDialog or the new AppCompatDialog

Just use a code like this (of course in your case you have to use a custom layout to have the progress bar)

import android.support.v7.app.AlertDialog

AlertDialog.Builder builder =
       new AlertDialog.Builder(this, R.style.AppCompatAlertDialogStyle);
            builder.setTitle("Dialog");
            builder.setMessage("Lorem ipsum dolor ....");
            builder.setPositiveButton("OK", null);
            builder.setNegativeButton("Cancel", null);
            builder.show();

And use a style like this:

<style name="AppCompatAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
        <item name="colorAccent">#FFCC00</item>
        <item name="android:textColorPrimary">#FFFFFF</item>
        <item name="android:background">#5fa3d0</item>
    </style>