Implementation of login interface for Android development example
The Android development example to be demonstrated in this paper is how to complete a miniswitch login interface in Android. The following will explain how to realize the interface effect in the figure step by step, so that everyone can easily make a beautiful login interface.
Miniswitch login interface rendering
Paste the final rendering to be completed first:
Layout analysis of miniswitch login interface
Firstly, the layout is analyzed by the interface diagram, which can be basically divided into three parts. Each part is explained below.
The first part is a LinearLayout layout with gradient background. No code will be pasted on the gradient background. The effect is shown in the following figure:
The second part, within the red line area, includes 1, 2, 3 and 4, as shown in the figure:
A red 1 indicates a relativelayout with rounded corners and a background color of #55ffffff (light blue). The code is as follows:
XML / HTML code
Solid represents the fill color. Here, the fill color is light blue. Corners is to set the fillet.
DP (i.e. dip, device independent pixels): This is related to the device hardware. Generally, we do not rely on pixels in order to support WVGA, HVGA and QVGA. Programs developed on Android will run on mobile phones with different resolutions. In order to make the appearance of the program not too different, the concept of dip is introduced. For example, define a rectangle 10 x 10dip On a screen with a resolution of 160dpi, such as G1, it is exactly 10 x 10 pixels. On a 240 DPI screen, it is 15 x 15 pixels. The conversion formula is pixs = dips * (density / 160). Density is the resolution of the screen.
Then, the background of relativelayout refers to this drawable. The specific relativelayout settings are as follows:
XML / HTML code
Padding refers to the inner margin (that is, the distance between the content and the border), and layout_ Margin is the outer margin (the distance between its upper layer and the border).
Next is area 2, which is the text and input box of the account. The first is the text of the account, and the code is as follows:
XML / HTML code
android:layout_ Alignparenttop here means that the position of this textview is at the top
android:layout_ Margintop = "5dp" it means that the border of this textview is 5dp away from the top border of relativelayout
Here, you need to set the font color and font size for the textview, which are defined in RES / style In XML:
XML / HTML code
The input box for defining the account number is as follows:
XML / HTML code
Prompt text in Android: hint input box, Android: Layout_ Below is set to the bottom of the account text box. Android: singleline is a single line input (that is, you won't break the line when entering enter). Android: inputtype text means that the input type is text.
Area 3 is the password text and input box, the same as area 2, and the code is as follows:
XML / HTML code
Area 4, login button:
XML / HTML code
Part III: the following text and two pictures are marked with 1 and 4 respectively:
Area 1: it is also a relativelayout, but the setting here is very simple. The code is as follows:
XML / HTML code
Area 2: "no account? Registered" is defined in a string, including a < a > tag:
XML / HTML code
< string name = "login_register_link" > no account< a href="#" mce_ Href = "#" > register < / a > < / String >
It is defined as follows:
XML / HTML code
Textview supports simple HTML tags, such as < a > tags, but not all tags. WebView components are used to support more complex HTML tags.
Android: textcolorlink is used to set the color of text links Although textview supports < a > tags, you can't click this link here. Don't be confused by the illusion.
Area 3 is a cartoon picture of a cat. It seems a little ugly. Let's make do with it:
XML / HTML code
android:layout_ Alignparentright = "true" is on the far right of the layout
android:layout_ Alignparentbottom = "true" is at the bottom of the layout
android:layout_ Marginright = "25dp" the border of this ImageView is 25dp away from the layout border, which is similar to other margins.
Area 4 is an ImageView of a picture with text:
XML / HTML code
android:layout_ Toleftof = "@ ID / minitwitter_logo" is on the left (horizontal position) of the kitten ImageView
android:layout_ Alignbottom = "@ ID / miniswitch_logo" here means that the lower edges of the two imageviews (area 3 and area 4) are aligned
Android: paddingbottom = "8dp" the picture is 8dp from the bottom border of ImageView, that is, lift the picture up 8dp
Specific steps to realize miniswitch login interface
The specific steps are as follows:
Step 1: some string definitions
/miniTwitterLoginDemo/res/values/strings. xml
XML / HTML code
Step 2:
/miniTwitterLoginDemo/res/values/style. xml
XML / HTML code
Step 3: the background color is gradient
/miniTwitterLoginDemo/res/drawable-mdpi/background_ login. xml
XML / HTML code
Step 4: the background color is light blue with rounded corners
/miniTwitterLoginDemo/res/drawable-mdpi/background_ login_ div_ bg. xml
XML / HTML code
Step 5:
/miniTwitterLoginDemo/res/layout/login. xml
XML / HTML code
Step 7:
/miniTwitterLoginDemo/src/com/mytwitter/acitivity/LoginActivity. java
Note that the activity is untitled. Setting untitled needs to be set before setcontentview, otherwise an error will be reported.
Java code
So far, the production of miniswitch login interface in Android has been introduced. Is it not difficult to make a good login interface?
The above is an example of the development of Android login interface. I hope you can help develop Android applications. Thank you for your support for this site.