This article describes how to program custom AlertDialog styles on Android. Share it for your reference, as follows:
During development, we usually need to customize AlertDialog to meet our functional needs:
For example, you can enter information in a pop-up dialog box, or a list of selected functions to be displayed, or a specific UI style to be implemented. Then we can achieve it in the following ways.
Method 1:Completely customize the layout of AlertDialog. For example, we want to implement the AlertDialog layout with input boxes custom_dialog.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:andro
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/dialog_bg"
android:orientation="vertical">
<TextView
android:
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00ffff"
android:gravity="center"
android:padding="10dp"
android:text="Dialog title"
android:textSize="18sp" />
<EditText
android:
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Please enter content"
android:minLines="2"
android:textScaleX="16sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:orientation="horizontal">
<Button
android:
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#00ffff"
android:text="Cancel" />
<View
android:layout_width="1dp"
android:layout_height="40dp"
android:background="#D1D1D1"></View>
<Button
android:
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#00ffff"
android:text="Sure" />
</LinearLayout>
</LinearLayout>
It turns out to be used in the code:
builder = new ();
View view = View
.inflate(getActivity(), .custom_dialog, null);
(view);
(true);
TextView title= (TextView) view
.findViewById();//Set the titleEditText input_edt= (EditText) view
.findViewById(.dialog_edit);//Enter contentButton btn_cancel=(Button)view
.findViewById(.btn_cancel);//Cancel button Button btn_comfirm=(Button)view
.findViewById(.btn_comfirm);//OK button//Cancel or confirm button listening event processingAlertDialog dialog = ();
();
This way, we can pop up a custom Dialog. One disadvantage of this method is:
If there are multiple AlertDialogs with different UIs in the project, we need to write multiple layout pages. Of course, we can extract the general layout and then process it in various ways.
Method 2:We achieve the effect we want by modifying the controls in the native AlertDialog of the Android system.
For example, if we want to implement a dialog box of a specific style, we can write a public method to achieve the effect we want by modifying the controls in the native AlertDialog of the Android system. The simple code is as follows:
public static void setCustomDialogStyle(AlertDialog dialog){
final Resources res = ().getResources();
int topPanelId = ("topPanel", "id", "android");//Get the top LinearLayout topPanel = (LinearLayout) getDialog().findViewById(topPanelId);
(.dialog_top_bg);//Set the top background LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, //Set the top height dp2px(getDialog().getContext(), 50));
(params);
int dividerId = ("titleDivider", "id", "android");//Set the divider line View divider = getDialog().findViewById(dividerId);
();
int titleId = ("alertTitle", "id", "android");//Get title title TextView title = (TextView) getDialog().findViewById(titleId);//Set the title ();//Title text color (18);//Text size ();//Text location int customPanelId = ("customPanel", "id", "android");//Set content FrameLayout customPanel = (FrameLayout) getDialog().findViewById(customPanelId);
();//The background is transparent (0).setBackgroundColor();
(dp2px(getContext(), 8), 0, ViewUtils.dp2px(getContext(), 8), 0);//Set padding int buttonPanelId = ("buttonPanel", "id", "android");//Get the bottom LinearLayout buttonPanel = (LinearLayout) getDialog().findViewById(buttonPanelId);
(.dialog_bottom_bg);//Set the bottom background (dp2px(getContext(), 8), 1, dp2px(getContext(), 8), 0);
Button button1 = (Button) getDialog().findViewById(.button1);//Set the bottom Button ();//Text color (18);//Text size (.bg_right_round);//Button circular background box Button button2 = (Button) getDialog().findViewById(.button2);
();
(18);
(.bg_left_round);
}
The various colors, background pictures and other colors used in the code are defined by your own needs. The dp and px conversion codes used are as follows:
public static int dp2px(Context context, float dp) {
float density = ().getDisplayMetrics().density;
return (int) (dp * density + 0.5f);
}
In this way, we have unified the entire boundary style of AlertDialog. When using it, we only need to define the UI of the content part according to the UI requirements.
Or the AlertDialog that can be entered above, our layout can be written only as the following. Of course, the LinearLayout on the outer layer can also be removed.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:andro
android:layout_width="match_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<EditText
android:
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="@drawable/input"
android:hint="Please enter content"
android:maxLength="16"
android:textColor="#333333"
android:textSize="16sp" />
</LinearLayout>
Then use in the code:
builder = new ();
("Set Title");
View view = View
.inflate(getActivity(), .custom_dialog, null);
(view);
(true);
EditText input_edt= (QRCodeEditText) view
.findViewById(.input_edt);
(,
new () {
@Override
public void onClick(DialogInterface dialog, int which) {
//Click the OK button to process ();
}
}
});
(,
new () {
@Override
public void onClick(DialogInterface dialog, int which) {
//Click the Cancel button to process ();
}
});
final AlertDialog dialog = ();
();
setCustomDialogStyle(dialog);//Don't forget to call the setCustomDialogStyle method here
This method is much more convenient than the first method. Of course, to achieve the background transparency and other effects of AlertDialog, we can also add the following code to res/value/:
<style name="dialog" parent="@android:style/">
<item name="android:windowFrame">@null</item> //Dialog's windowFrame box is none <item name="android:windowIsFloating">true</item> //Whether it appears above the activity <item name="android:windowIsTranslucent">true</item> //Is it translucent <item name="android:windowNoTitle">true</item> // Whether to display title <item name="android:background">@android:color/transparent</item> //Set the background of the dialog <item name="android:windowBackground">@android:color/transparent</item>
<item name="android:backgroundDimAmount">0.7</item> //It is used to control the value of grayscale. When it is 1, the interface except our dialog content is highlighted, and the area other than the dialog is black, so no other content can be seen at all. <item name="android:backgroundDimEnabled">true</item>
</style>
Add the following statement where you need to add alertDialog:
alertbBuilder=new (getActivity(),); //The next code...
For more information about Android related content, please check out the topic of this site:Android development introduction and advanced tutorial》、《Android debugging skills and solutions to common problems》、《Summary of the usage of basic Android components》、《Android View View Tips Summary》、《Android layout layout tips summary"and"Android control usage summary》
I hope this article will be helpful to everyone's Android programming design.