Example code for the custom dialog box of Dialog in Android

1. Modify the system default Dialog style (style, theme)

2. Customize the Dialog layout file

3. You can encapsulate a class by yourself, inheriting from Dialog or directly using Dialog. In order to facilitate future reuse, it is recommended to encapsulate an Dialog class by yourself


Step 1:

We know Android definition of controls or View style is achieved by defining its style, see Android framework of theme files, in the source path: / frameworks/base/core/res/res/values/themes xml, we can see that for Dialog Android defines a style,

<style name="Theme.Dialog">
<item name="android:windowFrame">@null</item>
<item name="android:windowTitleStyle">@android:style/DialogWindowTitle</item>
<item name="android:windowBackground">@android:drawable/panel_background</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowContentOverlay">@null</item>
<item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item>
<item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
</style>

We can see that the Dialog style is defined in Themes.xml, where the title style of window is defined, the background image of window is defined, whether it is suspended or not, and so on.

So, to create Dialog with a custom style, we can create an styles.xml, define our own Dialog style, inherit it from the Theme.Dialog style, and modify some of its properties.

Define our own Dialog style:

a. Create an styles.xml file and place it in the res/values folder (of course, this goes without saying... (1)

b. Define the Dialog style in styles.xml, and the code is as follows:

<style name="Theme_dialog" parent="@android:style/Theme.Dialog">
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowNoTitle">true</item>
</style>

The above code, defines a style Theme_dialog, inherited from @ android: style/Theme Dialog, then defines the Dialog Window's background, the use of transparent color is # 00000000, and then defines the Window Dialog place hidden title (the system definition Dialog style is with the title, in the set this property to true can hide the title), custom Dialog style to this is completed.

Step 2:

Define the layout of Dialog:

Create a layout file layout_dialog.xml with the following code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/pp_bg_dialog"
android:gravity="center">

<ProgressBar android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/progressbar_normal"/>

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
style="@style/text_white_small" android:layout_marginTop="5dp"
android:text=" deleting ..." android:id="@+id/message"/>
</LinearLayout>

A linear vertical layout is used and all child elements are centered, with one progress bar ProgressBar and one TextView.

Here, ProgressBar has a custom style, and the same effect can be achieved using the system's default ProgressBar (much the same). The background of the LinearLayout

android:background=" @drawable /pp_bg_dialog" (that is, the black transparent background box shown in the center of the renderings above) is a custom image resource Shape:

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="10dp"/>
<solid android:color="#55000000"/>

</shape>

The code defines a rectangle with rounded corners and colors. At this point, the layout of Dialog is complete.
Step 3:
Custom CustomDialog class, inherited from Dialog, the code is as follows:

public class CustomDialog extends Dialog { 2
private static int default_width = 160; // The default width 
private static int default_height = 120;// The default height 
public CustomDialog(Context context, int layout, int style) {
this(context, default_width, default_height, layout, style);
}

public CustomDialog(Context context, int width, int height, int layout, int style) {
super(context, style);12
//set content
setContentView(layout);
//set window params
Window window = getWindow();
WindowManager.LayoutParams params = window.getAttributes();
//set width,height by density and gravity
float density = getDensity(context);
params.width = (int) (width*density);
params.height = (int) (height*density);
params.gravity = Gravity.CENTER;
window.setAttributes(params);
}
private float getDensity(Context context) {
Resources resources = context.getResources();
DisplayMetrics dm = resources.getDisplayMetrics();
return dm.density;
}
}

The contentView of Dialog is set in the constructor, and the width, height, and center display of Window are set.

CustomDialog is used as follows:

public class CustomDialogDemoActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.test);
CustomDialog dialog1 = new CustomDialog(this, R.layout.common_dialog, R.style.Theme_dialog);//Dialog Use the default size (160)
CustomDialog dialog2 = new CustomDialog(this, 180, 180, R.layout.common_dialog, R.style.Theme_dialog);
dialog2.show();// According to Dialog
　　　　// If you want to modify Dialog One of the View, Such as the " deleting ..." Instead of " In the load ..."
TextView mMessage = (TextView) dialog2.findViewById(R.id.message);
mMessage.setText(" In the load ...");
}
}

This is the general process, according to the above you can play freely, I hope you can design their own satisfaction of dialog.