Android Minitwitter Login Interface Development Example _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.

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 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, not the lower right corner. Bottomleftradius right Lower corner--> 
<corners android:topleftradius= "10DP" android:toprightradius= "10DP" 
Android : bottomrightradius= "10DP" android:bottomleftradius= "10DP"/> 
</shape> 

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:

<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 " 
   > 
</RelativeLayout> 

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:

<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" 
  style= "@style/normaltext"/> 

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:

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

Define the input box for the account, as follows:

<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:inputtype= "text"/> 

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:

<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:

<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:

Android Minitwitter Login Interface

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

<relativelayout 
  android:layout_width= "fill_parent" 
  android:layout_height= "wrap_content" > 
</RelativeLayout> 

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

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

The definition is as follows:

<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:

<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 that kitten ImageView (horizontal position)

  android:layout_alignbottom= "@id/minitwitter_logo" here means that these two ImageView (area 3 and area 4) are aligned below the 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 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 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 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= "/>" 
</shape>

Fourth step: Background absorbant light blue and rounded corners

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

<?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"/> 
</shape > 

Fifth Step:

/minitwitterlogindemo/res/layout/login.xml

<?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_alignparentt Is the position of the OP layout at the top--> <relativelayout android:id= "@+id/login_div" android:layout_width= "Fill_parent" Andr oid:layout_height= "Wrap_content" android:padding= "15dip" android:layout_margin= "15dip" android:background= "@dr 
     AWABLE/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= "t Rue "android:layout_margintop=" 5DP "android:text=" @string/login_label_username "style=" @style/normaltext 
     "/> <edittextAndroid: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= "Tru 
   E "android:inputtype=" text "/> <!--password text--> <textview android:id=" @+id/login_password_input " Android:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:layout_below= "@id/username_ed 
 It "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" a Ndroid:layout_width= "WraP_content "android:layout_height=" wrap_content "android:layout_below=" @id/password_edit "Android:layout_alignR ight= "@id/password_edit" android:text= "@string/login_label_signin" android:background= "@drawable/blue_button"/& 
 Gt </RelativeLayout> <relativelayout android:layout_width= "fill_parent" android:layout_height= "Wrap_cont Ent "> <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"/> <imageview android:id= "@+id/minitwitter_logo" android:src= "@drawable/cat" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Andr 
    Oid:layout_alignparentright= "true" android:layout_alignparentbottom= "true" android:layout_marginright= "25DP" Android:layout_marginleft= "10DP" android:layout_marginbottom= "25DP"/> <imageview android:src= "@drawable/logo" a Ndroid:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:layout_toleftof= "@id/minitwitter _logo "android:layout_alignbottom=" @id/minitwitter_logo "android:paddingbottom=" 8DP "/> </Relativ  Elayout> </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.

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? Thank you

of reading.