Common RelativeLayout attributes and Examples

Common RelativeLayout attributes and Examples

RelativeLayout is a relative layout. The position of the control is calculated based on the relative position. The position of the latter control depends on the basic position of the previous control, which is the most commonly used layout, it is also the most flexible layout. Next let's take a look at his common attributes.

These attributes are divided into groups for easy understanding and memory.
A). Class 1: The attribute value is true or false.
Android: layout_centerHrizontal horizontal center
Android: layout_centerVertical vertical center
Android: layout_centerInparent is completely centered over the parent Element

Android: layout_alignParentBottom: attach the lower edge of the parent Element
Android: layout_alignParentLeft: Stick the left edge of the parent Element
Android: layout_alignParentRight: attaches the right edge of the parent element.
Android: layout_alignParentTop: top the parent Element

B). The second type: the attribute value must be the reference name "@ id/id-name" of the id"
Android: layout_below is under an element
Android: layout_abve is above an element.
Android: layout_toLeftOf on the left of an element
Android: layout_toRightOf on the right of an element
Android: layout_alignTop: Align the top edge of an element with the top edge of an element.
Android: layout_alignLeft: Align the left edge of an element with the left edge of an element.
Android: layout_alignBottom: the bottom edge of the current element is aligned with the bottom edge of an element.
Android: layout_alignRight: the right edge of an element is aligned with the right edge of an element.

C) Category 3: The attribute value is a specific pixel value, such as 30dip and 40px.
Android: layout_marginBottom distance from the bottom edge of an element
Android: layout_marginLeft distance from the left edge of an element
Android: layout_marginRight distance from the right edge of an element
Android: layout_marginTop distance from the edge of an element

The following uses XML layout as an example:

I. XML Layout

1. Create a blank Activity

2. Open the "res/layout/activity_main.xml" file and modify it to the following code.

(1) Part ①

<? Xml version = "1.0" encoding = "UTF-8">, Each XML document starts from the XML preface. The first line in the previous code is the XML preface. <? Xml version = "1.0">. This line of code indicates parsing according to the XML rule of version 1.0. Encoding = "UTF-8" indicates that the xml file adopts the UTF-8 encoding format. The encoding format can also be GB2312.

If you do not understand this, see the relevant XML documentation.

(2) Part ②

<RelativeLayout ...... Indicates that the relative layout manager is used.

(3) Section ③

Android: layout_width = "match_parent" android: layout_height = "match_parent" indicates that the layout manager width and height fill the entire screen width and height.

3. insert three buttons.

Insert three buttons and set the text to "first button", "Second button", and "third button" respectively ".

Next, we will set the first button to 20 DP to the left and top, and the second button to 10 DP to the left and top of the first button, and the third button to 10 DP to the top of the second button, align with the left of the second button.

4. Open the "res/layout/activity_main.xml" file and modify it to the following code.

(1) Part ①

Set the first button, which is based on the parent element, to the upper left corner, and 20 DP away.

<Span style = "font-size: 18px;"> <Button android: id = "@ + id/button1" android: layout_width = "wrap_content" // android: layout_height = "wrap_content" // height Matching content android: layout_alignParentLeft = "true" // tighten the android: layout_alignParentTop = "true" // tighten the parent element android: layout_marginLeft = "20dp" // set the left margin to 20dp android: layout_marginTop = "20dp" // set the upper margin to 20dp android: text = "first button"/> </span>

(2) Part ②

Set the second button, which is based on the first button. Under the first button, align the right side of the first button with the upper distance of 15dp.

<Button android: id = "@ + id/button2" android: layout_width = "wrap_content" // android: layout_height = "wrap_content" // android: layout_below = "@ + id/button1" // The android: layout_toRightOf = "@ + id/button1" is aligned with the android: layout_marginTop = "15dp" // you can specify the 15dp android: text = "second button"/>

(3) Section ③

Set the third button, which is based on the second button. Under the second button, align the left side of the second button with the distance from 15dp.

<Span style = "font-size: 18px;"> <Button android: id = "@ + id/button3" android: layout_width = "wrap_content" // android: layout_height = "wrap_content" // height Matching content android: layout_below = "@ + id/button2" // The location is android under the second button: layout_toLeftOf = "@ + id/button2" // align with the left of the second button android: layout_marginTop = "15dp" // set the 15dp android: text = "third button"/> </span>

The final result is as follows:

　　

 

After android RelativeLayout sets its property wrap_content, why is the display layout full screen?

Check two places:
Whether full screen is set in AndroidManifest. xml.
Your layout file contains settings such as padding = "0dp ".
In your layout file, there are other elements, textview and other forms of element content you set to fill_parent.

Solution: It is very simple. If you want to display the layout gap, add the android: paddingLeft, android: paddingTop parameters in the RelativeLayout parameter.
 
How to set the following RelativeLayout id or obtain the RelativeLayout instance

Android: id = "@ + id/relativeLayout" is the same as the control ~~~