Implementation of the login interface for Android Development instance _android

The example of Android development in this article is how to complete an android Minitwitter login interface, the following step-by-step instructions on how to achieve the graphical interface effect, so that everyone can easily make a beautiful login interface.

Minitwitter Login Interface Effect Chart

First, paste the final effect to complete the picture:

analysis of layout of Minitwitter login interface

First, the layout of the analysis by the interface diagram, the basic can be divided into three parts, the following explain each section respectively.

The first part is a linearlayout layout with a gradient background, the background gradient will no longer paste the code, the effect as shown in the following figure:

The second part, the Red line area, includes 1,2,3,4 as shown in the picture:

The Red 1 represents a relativelayout layout with rounded corners with a background color of #55ffffff (light blue), with the following code:

xml/html Code

<?xml version= "1.0" encoding= "UTF-8"?> <shape xmlns:android= 
"http://schemas.android.com/apk/res/" Android > 
    <solid android:color= "#55FFFFFF"/> 
    <!--set rounded corners  
    Note:    Bottomrightradius is the lower left corner than the lower right corner Bottomleftradius the lower right corner--> 
    <corners android:topleftradius= "10DP" Android: toprightradius= "10DP" 
        android:bottomrightradius= "10DP" android:bottomleftradius= "10DP"/> 

Solid represents the fill color, which is filled with light blue. The corners is set rounded corners.

DP (that is, dip,device independent pixels) device independent pixels: This is related to device hardware, in general we do not rely on pixels to support WVGA, HVGA, and QVGA. Programs developed on Android will run on mobile phones with different resolutions. In order to make the program look not too different, so introduced the concept of dip. For example, define a rectangle x 10dip. On a screen with a resolution of 160dpi, such as G1, it is exactly x 10 pixels. The screen at the DPI, then, is x 15 pixels. The conversion formula is Pixs = dips * (density/160). Density is the resolution of the screen.

The relativelayou background then references this drawable, and the specific relativelayout settings are as follows:

xml/html Code

<relativelayout 
     android:id= "@+id/login_div" 
     android:layout_width= "fill_parent" 
     android:layout_ height= "Wrap_content" 
     android:padding= "15dip" 
     android:layout_margin= "15dip" 
     android:background= "@ DRAWABLE/BACKGROUND_LOGIN_DIV_BG " 
     > 

Padding refers to the inner margin (that is, the distance between the content and the border), Layout_margin the outer margin (the distance between the top and the border).

Next is the area 2, for the account text and input box, first is the account text, the code is as follows:

xml/html Code

<textview 
    android:id= "@+id/login_user_input" 
    android:layout_width= "wrap_content" 
    android:layout _height= "Wrap_content" 
    android:layout_alignparenttop= "true" 
    android:layout_margintop= "5DP" 
    Android : text= "@string/login_label_username" 
    

Android:layout_alignparenttop here indicates that the position of this textview is at the top of the

android:layout_margintop= "5DP" here indicates that this textview border is 5dp from the top border of the Relativelayout

Here you need to set the font color and font size for this textview, defined in the Res/style.xml:

xml/html Code

<style name= "Normaltext" parent= "@android: Style/textappearance" > 
    <item name= "Android:textcolor" ># 444</item> 
    <item name= "Android:textsize" >14sp</item> 

Define the input box for the account, as follows:

xml/html Code

<edittext 
    android:id= "@+id/username_edit" 
    android:layout_width= "fill_parent" 
    android:layout_ height= "Wrap_content" 
    android:hint= "@string/login_username_hint" 
    android:layout_below= "@id/login_user _input " 
    android:singleline=" true " 
    

Android:hint input box inside the hint text, Android:layout_below here is set to the account in the text box below, Android:singleline for a single line input (that is, you enter the return time will not be in the line), Android: InputType here text indicates that the type entered is literal.

Area 3 is the cipher text and input box, with area 2, the code is as follows:

xml/html Code

<textview 
   android:id= "@+id/login_password_input" 
   android:layout_width= "Wrap_content" 
   android: layout_height= "Wrap_content" 
   android:layout_below= "@id/username_edit" 
   android:layout_margintop= "3DP" 
   android:text= "@string/login_label_password" 
   style= "@style/normaltext"/> 
<edittext 
   Android:id= "@+id/password_edit" 
   android:layout_width= "fill_parent" 
   android:layout_height= "WRAP_" Content " 
   android:layout_below=" @id/login_password_input " 
   android:password= true" 
   android: Singleline= "true" 
   android:inputtype= "Textpassword" 

Area 4, Login button:

xml/html Code

<button 
   android:id= "@+id/signin_button" 
   android:layout_width= "wrap_content" 
   android:layout_ height= "Wrap_content" 
   android:layout_below= "@id/password_edit" 
   android:layout_alignright= "@id/password _edit " 
   android:text=" @string/login_label_signin " 
   android:background=" @drawable/blue_button " 

Part III: The bottom of the text and two pictures, respectively labeled 1,2,3,4:

Area 1: Or a relativelayout, but here's a simple set of code as follows:

xml/html Code

<relativelayout 
   android:layout_width= "fill_parent" 
   android:layout_height= "Wrap_content" > 

Area 2: "No account number?" The words are defined in string and contain a <a> tag:

xml/html Code

<string name= "Login_register_link" > No account? <a href= "#" mce_href= "#" > Registration </a></string>

The definition is as follows:

xml/html Code

<textview android:id= "@+id/register_link" 
  android:text= "@string/login_register_link" 
  android:layout_ Width= "Wrap_content" 
  android:layout_height= "wrap_content" 
  android:layout_marginleft= "15DP" 
  Android : textcolor= "#888" 
  android:textcolorlink= "#FF0066CC" 

TextView is supported by simple HTML tags, such as <a> tags, but not supporting all tags, and supporting more complex HTML tags with webview components.

Android:textcolorlink is the color that sets the text link. Although TextView support <a> tags, but here is not to click on this link, do not be fooled by illusion.

Area 3 is always a cat cartoon picture, looks a bit ugly, will be next:

xml/html Code

<imageview android:id= "@+id/minitwitter_logo" 
    android:src= "@drawable/cat" android:layout_width= "Wrap 
    _content " 
    android:layout_height=" wrap_content " 
    android:layout_alignparentright=" true " 
    Android: Layout_alignparentbottom= "true" 
    android:layout_marginright= "25DP" 
    android:layout_marginleft= "10DP" 
    android:layout_marginbottom= "25DP" 

Android:layout_alignparentright= "True" is at the far right of the layout

Android:layout_alignparentbottom= "true" at the bottom of layout

Android:layout_marginright= "25DP" The ImageView border is 25dp from the layout border, and other margin are similar.

Area 4 is the imageview of a text-carrying picture:

xml/html Code

<imageview android:src= "@drawable/logo 
   android:layout_width=" wrap_content " 
   android:layout_height=" Wrap_content " 
   android:layout_toleftof=" @id/minitwitter_logo " 
   android:layout_alignbottom=" @id Minitwitter_logo " 
   android:paddingbottom=" 8DP " 

android:layout_toleftof= "@id/minitwitter_logo" on the left of the kitten ImageView (horizontal position)

android:layout_alignbottom= "@id/minitwitter_logo" here means that these two ImageView (area 3 and area 4) are aligned to the lower edge

android:paddingbottom= "8DP" picture from ImageView bottom Border 8dp, which is to lift the picture on a 8DP

The concrete steps of realizing Minitwitter landing interface

The specific steps are as follows:

The first step: some string definitions

/minitwitterlogindemo/res/values/strings.xml

xml/html Code

<?xml version= "1.0" encoding= "Utf-8"?> 
<resources> 
  <string name= "Hello" >hello world, loginactivity!</string> 
  <string name= "Login_label_username" > account </string> 
  <string Name= "Login_label_password" > Password </string> 
  <string name= "Login_label_signin" > Login </string> 
  <string name= "login_status_logging_in" > Login ...</string> 
  <string name= "Login_username_hint ">email or mobile phone number </string> 
  <string name=" Login_register_link "> No account number? <a href= "#" mce_href= "#" > Registration </a></string> 
  <string name= "App_name" >minitwitter</ String> 

Step Two:

/minitwitterlogindemo/res/values/style.xml

xml/html Code

<?xml version= "1.0" encoding= "Utf-8"?> <resources> <style name= "Normaltext" 
    @ Android:style/textappearance ">            
    <item name=" Android:textcolor "> #444 </item> 
    <item name=" Android:textsize ">14sp</item> 
    </style> 

Step three: Background color is gradient

/minitwitterlogindemo/res/drawable-mdpi/background_login.xml

xml/html Code

<?xml version= "1.0" encoding= "Utf-8"?> <shape xmlns:android= 
"http://schemas.android.com/apk/res/" Android > 
   <gradient 
      android:startcolor= "#FFACDAE5" 
      android:endcolor= "#FF72CAE1 
      " Android:angle= "/>" 
    

Fourth step: Background absorbant light blue and rounded corners

/minitwitterlogindemo/res/drawable-mdpi/background_login_div_bg.xml

xml/html Code

<?xml version= "1.0" encoding= "UTF-8"?> <shape xmlns:android= 
"http://schemas.android.com/apk/res/" Android > 
    <solid android:color= "#55FFFFFF"/> 
    <!--set rounded corners  
    Note:    Bottomrightradius is the lower left corner than the lower right corner Bottomleftradius the lower right corner--> 
    <corners android:topleftradius= "10DP" Android: toprightradius= "10DP" 
        android:bottomrightradius= "10DP" android:bottomleftradius= "10DP"/> 

Fifth Step:

/minitwitterlogindemo/res/layout/login.xml

xml/html Code

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android= "http://schemas.android.com/apk/res/" Android "android:orientation=" vertical "android:layout_width=" fill_parent "android:layout_height=" "Fill_parent" and roid:background= "@drawable/background_login" > <!--padding inner margin layout_margin outer margin ANDROID:LAYOUT_ALIGNP is the location of the Arenttop layout at the top--> <relativelayout android:id= "@+id/login_div" android:layout_width= "Android:layout_height=" wrap_content "android:padding=" 15dip "android:layout_margin=" 15dip "Andro id:background= "@drawable/background_login_div_bg" > <!--account--> <textview android: 
         Id= "@+id/login_user_input" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android:layout_alignparenttop= "true" android:layout_margintop= "5DP" android:text= "@string/logi N_label_username "Style= "@style/normaltext"/> <edittext android:id= "@+id/username_edit" 
         Fill_parent "android:layout_height=" wrap_content "android:hint=" "@string/login_username_hint" 
  android:layout_below= "@id/login_user_input" android:singleline= "true" android:inputtype= "text"/> <!--password text--> <textview android:id= "@+id/login_password_input" android:layout_width= "Wrap_c" Ontent "android:layout_height=" wrap_content "android:layout_below=" @id/username_edit "Android:layout_ 
      margintop= "3DP" android:text= "@string/login_label_password" style= "@style/normaltext"/> <edittext Android:id= "@+id/password_edit" android:layout_width= "fill_parent" android:layout_height= "Wrap_content" 
      "Android:layout_below=" @id/login_password_input "android:password= true" android:singleline= "true" Android:inputtype="Textpassword"/> <!--login button--> <button android:id= "@+id/signin_button" Android:lay 
      Out_width= "Wrap_content" android:layout_height= "wrap_content" android:layout_below= "@id/password_edit" android:layout_alignright= "@id/password_edit" android:text= "@string/login_label_signin" Android:background = "@drawable/blue_button"/> </RelativeLayout> <relativelayout android:layout_width= "fill_parent "android:layout_height=" wrap_content "> <textview android:id=" @+id/register_link "Android:tex 
       t= "@string/login_register_link" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:layout_marginleft= "15DP" android:textcolor= "#888" android:textcolorlink= "#FF0066CC"/ > <imageview android:id= "@+id/minitwitter_logo" android:src= "@drawable/cat" Android:layout_ 
  Width= "Wrap_content"      android:layout_height= "Wrap_content" android:layout_alignparentright= "true" Android:layout_alignpa Rentbottom= "true" android:layout_marginright= "25DP" android:layout_marginleft= "10DP" Android:la yout_marginbottom= "25DP"/> <imageview android:src= "@drawable/logo" android:layout_width= "WR Ap_content "android:layout_height=" wrap_content "android:layout_toleftof=" @id/minitwitter_logo "an droid:layout_alignbottom= "@id/minitwitter_logo" android:paddingbottom= "8DP"/> </relativelayo  Ut> </LinearLayout>

Seventh Step:

/minitwitterlogindemo/src/com/mytwitter/acitivity/loginactivity.java

Note here that the activity is untitled, set no title need to set before Setcontentview, otherwise it will be an error.

Java code

Package com.mytwitter.acitivity;  
 
Import android.app.Activity;  
Import Android.os.Bundle;  
Import Android.view.Window;  
 
public class Loginactivity extends activity {  
  @Override public 
  void OnCreate (Bundle savedinstancestate) {  
    Super.oncreate (savedinstancestate);  
    Requestwindowfeature (window.feature_no_title);  
    Setcontentview (R.layout.login);  
  }  

To this end, Android Minitwitter login interface to the production of the finished, is not to make a good login interface is not difficult?

The above is the Android login interface Development example, I hope to help develop Android applications friends, thank you for your support for this site.