Android User Logon Interface

This blog shows you how to create a UI interface similar to the one displayed in one step:

I. Prepare image resources

Remember: because the image resources used in the Demo are directly captured from the image above, the image quality may be poor. However, this does not affect our Demo. Prepare the following three images:

1)facebook_connect.png

2)linkedin_connect.png

3)ic_highlight.png

After preparation, copy it directly to the drawable-xhdpi folder in our Demo.

In the officially released App, we often prepare multiple sets of images to adapt to the display effects of different resolutions. For the convenience of demonstration, we have only prepared a set of images that adapt to the xhdpi resolution.

Ii. Start Layout

The layout includes the following UI controls:

TextView (To use highlight...) ImageButton (Facebook) ImageButton (LinkedIn) TextView (Why not email ?) TextView (Highlight is based...) TextView (Please let us know...) TextView (We will not post things ...)

Step 1: Set the layout background

To set the layout background to white, the source code is as follows:

Step 2: Set ImageButton

The source code is as follows:

Where: The first ImageButton sets the attribute android: layout_alignParentTop to true to align it with the top of the parent control. The second ImageButton sets android: layout_alignLeft = "@ + id/btnFacebook" to align with the left of the first ImageButton. The first ImageButton sets the attribute android: layout_centerHorizontal to true to achieve horizontal center. Up to now, the page displays the following results:

Step 3: TextView settings

Drag five TextView controls to the layout, and save the different texts to be displayed in the res/values/strings. xml file. The source code is as follows:

 
     
  
   LoginLayout
      
  
   Facebook
      
  
   LinkedIn
      
  
   To use Highlight, please sign in with one of the services below:
      
  
   Why not email?
      
  
   Highlight is based on real identity and mutual friends.         Using these services allows us to show you how you are connected to the people around you.         It also makes it super easy to create a Highlight profile.    
      
              Please let us know if you have feedback on this or if         you would like to log in with another identity service. Thanks!           
      
  
   We will not post things without your permission.
  
 

Then, set the corresponding display text for the corresponding TextView and set the basic attributes. the source code of the entire layout file is as follows:

After completing these settings, the interface effect is as follows:

Step 4: let us know hyperlink settings

The source code is as follows:

public class MainActivity extends Activity{    TextView mTVFeedBack;        @Override    protected void onCreate(Bundle savedInstanceState)    {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mTVFeedBack = (TextView)findViewById(R.id.textView4);        mTVFeedBack.setText(Html.fromHtml(getString(R.string.feedback_label)));            }}

The final UI effect:

:

Demo can be downloaded from: http://download.csdn.net/detail/kongre/7299753