MaterialDialogs scaling universally even using AppCompact


These theme styles will allow full width and scaled Material-Styled Dialogs with the elevation shading for all devices down to Android 4.0(tested).

For Lollipop  with proper scaling:

add this to /res/values-v21/themes.xml

<style name=”MaterialDialog” parent=”android:Theme.Material.Light.Dialog.NoActionBar.MinWidth”>

<item name=”background”>@null</item>

<item name=”elevation”>24dp</item>

<item name=”android:padding”>0dp</item>

</style>

Doing this, you still need to define a style with a shape drawable as the background because this doesn’t come with the 2dp defined corner radius in the material design guideline docs.

<style name=”MaterialDialogStyle” >

<item name=”android:background”>@drawable/material_dialog_shape</item>

</style>

And in /res/drawables/material_dialoog_shape we are setting the background color to white by default, you can change this.

<shape>

<solid android:color=”@color/White”/>

<corners android:bottomRightRadius=”2dp” android:bottomLeftRadius=”2dp” android:topLeftRadius=”2dp” android:topRightRadius=”2dp”/>

</shape>

This fixes the Dialog width view to expand correctly for 4:3 devices like the Nexus 9 to take advantage of the real-estate available and still use elevation standards and other bits from the material design theme available.

 

For AppCompact with using a shader ala Material Design:

add this to /res/values/themes.xml

<style name=”MaterialDialog” parent=”Theme.AppCompat.Dialog”>

<item name=”android:windowBackground”>@android:color/transparent</item>

<item name=”background”>@android:color/transparent</item>

<item name=”paddingStart”>0dp</item>

<item name=”paddingEnd”>0dp</item>

</style>

Then,  for the direct called style  in /res/values/themes.xml

<style name=”MaterialDialogStyle” >

<item name=”android:background”>@android:drawable/dialog_holo_light_frame</item>

</style>

Otherwise, without this, you end up with EXTRA space added to the dialog padding to account for the elevation-style shading, background frame (as here), or 9-patch. Something that is very useful for if defining a different style of “boost” shader here or even colors.

The Design Support Library has  abc_dialog_material_background_dark , which you will like still need to adjust android:insetLeft=”16dp” down for different screen sizes and resolutions (yes, many people have 720p and even 480×800 or smaller screens running older OS versions).

The XML above accounts for those devices to have the “normal” dialog width while still enabling the shader on all of the edges using standard AppCompat on even devices which haven’t updated their core packages in the past few years.

IMO looking at the source code in frameworks/base is about the only way to figure out what each theme is doing in the OS and what needs be replaced in your own to work the way desired. I strongly suggest that everyone takes a look at the target platfor and their themes such as /frameworks/base/core/res/res/values/theme_material.xml

Leave a comment

Your email address will not be published. Required fields are marked *