Android implements the dialog box rounded corner Function

Android implements the dialog box rounded corner Function

Android implements the custom dialog rounded corner Function

 

The customer has just drawn a UI for the company's Android project. The requirements are as follows:

 

The pop-up window requires four rounded corners, and the color of the title bar is different from that of the lower part. It must be separated by blue lines.The solution provided by Baidu on the Internet is to create a shape file in the/drawable folder to control the controls. (It should be noted that the shape file should be placed in the drawable folder. For the reason why it should be put here and the usage of various elements under the root element, please refer to this predecessor's blog: Drawing ).

 

The key point isShapeMany elements are provided to control the color and rounded corner (radius can be controlled in four directions). Since we need to use the rounded corner of the pop-up window, we have to use the following elements corners to control, the project directory is: F: popwindowonleft1?rcmain esdrawable-mdpishapeyuanjiao3.xml:

Android: shape = rectangle>







Android: angle = 270
Android: centerColor = # 0000FF
Android: endColor = # 0000FF
Android: startColor = # 0000FF/>

 

In the above CodeThe corner can set the two corners above and below. If this parameter is not set, the radius is 0 by default.You can perform a test on the machine.

After the rounded corner size is set, it should be used in the Layout file. It is actually very simple to use, through Layout, view, textview, etc.Android: background = @ drawable/shapeyuanjiao3 Properties, Set the size and rounded corner (you can customize which corner to display separately ).

Now, go to the actual requirement. to display the Preliminary Layout, I used a relative layout. The file is as follows:

Android: layout_width = match_parent
Android: layout_height = match_parent>
Android: id = @ + id/front_image/>

Android: background = #33000000/>

Android: layout_marginLeft = 60dp
Android: layout_marginRight = 60dp
Android: orientation = vertical android: layout_centerInParent = true
Android: background = @ drawable/shapeyuanjiao>
Android: background = @ drawable/shapeyuanjiao3
Android: text = Security token
Android: gravity = center
Android: textColor = @ color/white/>
Android: layout_width = match_parent
Android: background = @ color/blue/>
Android: layout_height = 30dip

Android: text = 0000000009102
Android: textColor = @ color/black/>


Android: text = floating benefits
Android: textColor = @ color/black/>



 

 

Note: Android: background = @ drawable/shapeyuanjiao3
Android: text = Security token
Android: gravity = center
Android: textColor = @ color/white/>
Android: layout_width = match_parent
Android: background = @ color/blue/>

This code is the key,Textview is the dialog header, which is set to Blue separately. The overall dialog window must be set to gray, so another shape is required.File, the two files only have a difference in the number and color of the rounded corner. You can make a slight modification to see the effect.. The following are the settings of the entire dialog:

Android: layout_marginLeft = 60dp
Android: layout_marginRight = 60dp
Android: orientation = vertical android: layout_centerInParent = true
Android: background = @ drawable/shapeyuanjiao>

The actual running result is as follows:

The interface is a bit ugly. In fact, many detours have taken place during the process. I will list them and provide some experience to people who encounter the same problem. If the technology is insufficient, please criticize and correct them.

Detour 1:

MeAnother method for Setting dialog to rounded corners is found on the Internet. It is also set through the shape file, but the method is a bit tortuous, by adding a rounded corner to the outer layer of the entire dialog, here we can see that the entire window is like being wrapped together, and the effect is not ideal. The shape file is as follows:

// Set the margin to achieve the rounded corner Function
Android: bottom = 4dp
Android: left = 4dp
Android: right = 4dp
Android: top = 4dp/>

// Controls the border line color and stroke size
Android: width = 1dp
Android: color = # CdCdCd/>

// Control the UI color gradient (you cannot use this)
Android: startColor = # E9E9E9
Android: endColor = # FFFFFF
Android: type = linear
Android: angle = 90/>

// Control the rounded corner size

 

Note the following code:

// Set the margin to achieve the rounded corner Function
Android: bottom = 4dp
Android: left = 4dp
Android: right = 4dp
Android: top = 4dp/> This method is a bit out of line with the customer's requirements. If you need it, refer to it. The running result is as follows:

 

Detour 2:

In the layout file, I initially considered this. Since the title color is not the same as that shown in the following figure, I used android: background = @ color/blue to set it, then, android: background = @ drawable/shapeyuanjiao3 is set in the peripheral LineLayout, but after running the SDK, there is no rounded corner. After consulting with colleagues, I found that, although the shape rounded corner effect of the entire Layout is set, when the background is set for the imageview of each row, the peripheral style is overwritten, resulting in no display, the solution is that you do not need to set the color for each separate imageview. You can set the title blue to another shape to blue.