Android mobile application development tutorial④

• This article is the fourth one, which mainly describes the introduction of controls (overall mind map), how to create a new module, set the content of the text, set the size of the text (the difference between different font sizes of px, dp, and sp), and set the color of the text (ARGB), set the background color. Finally, I learned the basics of views, such as setting the height and width of the views, setting the spacing of the views, and setting the alignment of the views.
• This article is a note made during the learning process of the Bilibili tutorial Brain Academy Android tutorial!
• Most of this article is the knowledge points selected from the video, and some of the text and a small part of the pictures are written by myself.
• This article follows the previous article "Android Mobile Application Development Tutorial ③"
• Next article: "Android Mobile Application Development Tutorial ⑤"

I. Introduction

1.1: Introduction to Controls

According to the original video, we divide the explanation of the controls into four parts. simple controls

Intermediate controls

advanced controls

 custom control

1.2: Create a new module

 

 Click here to create a new module

After clicking next, select an empty module, then click next and then click finish

This successfully creates a new module.

Two: text display

2.1 Set the content of the text

• Set the text in the XML file through the attribute android:text
• Call the setText method of the text view object in Java code to set the text
   

2.2: Set text font size

• Call the setTextSize method in the Java code to specify the text size. The font size unit defaults to sp.
• In the XML file, the text size is specified through the attribute android:textSize, and the font size unit needs to be specified at this time.

2.2.1: About font size

• px: It is the smallest display unit of the mobile phone screen, which is related to the display screen of the device.
• dp: It is a device-independent display unit, only related to the size of the screen.
• sp: It is specially used to set the font size, and the font size can be adjusted in the system settings.
• px=dp*dpi/160

1.px

px is the smallest display unit of the mobile phone screen, which is related to the display screen of the device. Generally speaking, if a screen of the same size (such as a 6-inch mobile phone) looks clearer, it means that the pixel density is higher, and the resolution measured in px is also larger.

2. dp
dp is sometimes written as dip, which refers to a device-independent display unit, which is only related to the size of the screen. Generally speaking, screens of the same size have the same resolution measured in dp. For example, the same 6-inch mobile phone, no matter which manufacturer it is produced by, its resolution converted into dp unit is the same size.
3. sp
The principle of sp is similar to that of dp, but it is specially used to set the font size. The mobile phone can adjust the font size (small, standard, large, super large) in the system settings. When setting a normal font, the text with the same value dp and sp looks the same size; if it is set to a large font, the text set with dp does not change, and the text set with sp becomes larger.
       If the font size uses different units, the displayed text size will vary. For example, the three font sizes of 30px, 30dp, and 30sp have different display sizes on different mobile phones. Some mobile phones have a low pixel density, one dp is equivalent to two px, at this time 30px is equivalent to 15dp; some mobile phones have a higher pixel density, one dp is equivalent to 3 px, at this time 30px is equivalent to 10dp. Assuming that the internal text of an App uses a font size of 30px, the font size of the App installed on the previous mobile phone is 15dp, and the font size installed on the latter mobile phone is 10dp. Obviously, the text displayed on the latter mobile phone will be smaller.

2.3: Set text color

The text color can be set by calling the setTextColor method in the Java code, and the specific color value can be obtained from the Color class.

You can also set it by yourself in the hexadecimal way (add 0x). Eight hexadecimal numbers are required. If it is six digits, the default transparency is 00 (that is, the text is transparent)

2.3.1: About RGB color

RGB is the three primary colors (Red Green Blue). The A in RGBA is (alpha) transparency.

        There are two expressions of color values: eight-digit hexadecimal number and six-digit hexadecimal number. For example, in the eight-digit code FFEEDDCC, FF
represents transparency, EE represents the concentration of red, DD represents the concentration of green, and CC represents blue concentration.
        A transparency of FF means completely opaque, and a value of 00 means completely transparent. The larger the value of RGB three colors, the thicker and brighter the color; the smaller the value, the lighter and darker the color.

2.3.2: Set font color in xml

        Use the android:textColor tag in xml to set the color, and add # in the quotation marks behind. If you use an eight-digit hexadecimal number, it is the same as the java code. If you use a six-digit hexadecimal number, the default transparency is ff (that is, the text is opaque).

        You can also customize the color in the colors xml folder in the value folder and directly reference it in the xml file

2.3.3: Set the background color

       The background color can be set through java code setBackgroundColor 

You can also set custom colors in java code through setBackgroundResource

In the xml interface layout file, you can directly use the android:background tag to set the color

Three: View Basics

3.1: What is a view

View: View is the meaning of view. For example, TextView is a subclass of View. The button inherits from TextView.

All controls that can be seen in Android basically inherit directly or indirectly from view

3.2: Set the width and height of the view

3.2.1: Set the width and height of the view in xml

The view width is expressed by the attribute android:layout_width, and the view height is expressed by the attribute android:layout_height

There are three main values ​​for length, width and height:

• match_parent: Indicates that it is consistent with the superior view.
• wrap_content: Indicates that it is adaptive to the content. But the widest cannot exceed the width of the superior view, and if it exceeds, it will wrap. The highest cannot exceed the height of the superior view, and if it exceeds, it will be hidden.
• Specific size in dp.

3.2.2: Set the width and height of the view in java code

First, ensure that the width and height attributes in the XML are wrap_content, then open the Java code corresponding to the page, and perform the following three steps in sequence:

1. Call the getLayoutParams method of the control object to obtain the layout parameters of the control.
2. The width attribute of the layout parameter indicates the width, and the height attribute indicates the height. Modify the values ​​of these two attributes.
3. Call the setLayoutParams method of the control object, and fill in the modified layout parameters to make it take effect.

Note: Modify the value in the layout parameters, pay attention to the default px unit, you need to convert the dp value into a px value.

3.3: Set the spacing of the view

There are two ways to set the spacing of views

• The layout_margin attribute is used, which specifies the distance between the current view and the screen border, surrounding layout or controls. Including layout_margin, layout_marginLeft, layout_marginTop, layout_marginRight, layout_marginBottom
• The padding property is used, which specifies the distance between the current view and the internal subordinate views. Including padding, paddingLeft, paddingTop, paddingRight, paddingBottom.

3.4: Set the alignment of the view

There are two ways to set the alignment of the view

• The layout_gravity attribute is used, which specifies the alignment of the current view relative to the superior view.
• The gravity property is used, which specifies the alignment of the subordinate view relative to the current view.

The values ​​of layout_gravity and gravity include: left, top, right, and bottom. You can also use vertical lines to connect the values. For example, "left|top" means that it is both left and top, that is, it is aligned to the upper left corner.