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.