Android User Registration Interface Simple design _android

This example for you to share the Android user registration interface design for your reference, the specific content as follows

I. Instance Objectives
Design a user registration interface in which you want to use some basic controls such as text boxes, edit boxes, buttons, check boxes, and so on

II. Technical Analysis
You first use the markup of the control in the layout file to configure the individual controls that you need, and then get the control in the main activity, add listeners to it, listen to its actions, and finally the content that is manipulated by the console output.

Iii. Steps to achieve
Create an Android project in eclipse with the name Testuserregister. Design a user registration interface in which you want to use controls such as text boxes, edit boxes, buttons, radio buttons, check boxes, List selection boxes, list views, picture views, and so on.

(1) in the DRAWABLE_LDPI folder in the project Res directory, put two pictures of logo5.jpg and background3.jpg, respectively, for the logo and background images displayed.

(2) Create a new array resource file in the project's Res/values directory Arrays.xml, add two string arrays in the file, with the name type and care, the following code

<?xml version= "1.0" encoding= "Utf-8"?>
<resources>
  <string-array name = "type" >
    < item> student </item>
    <item> teacher </item>
    <item> white-collar </item>
    <item> engineer </item>
    <item> Other </item>
  </string-array>

  <string-array name = "Care" >
    <item>1. Protect user's personal information </item>
    <item>2. Users may not publish illegal information </item> <item>3 on this website.
    Protect personal account and password security </item>
    <item>4. Ownership and interpretation of this website is owned by this website </item>
  </string-array>

< /resources>

(3) in the project Res/layout directory to modify the activity _main.xml file, first the overall layout of the interface to the table layout, and set the background, and then add an image view as a logo image display, the code is as follows:

<tablelayout xmlns:android= "http://schemas.android.com/apk/res/android"
  xmlns:tools= "http:// Schemas.android.com/tools "
  android:layout_width=" match_parent "
  android:layout_height=" Match_parent "
  android:orientation= "vertical"
  android:background= "@drawable/background3" >

  <imageview 
    Android:layout_width= "Wrap_content"
    android:layout_height= "wrap_content"
    android:src= "@drawable/logo5"
    android:id= "@+id/imageview02"
    android:layout_margin= "5DP"
    android:adjustviewbounds= "true"
    android:maxwidth= "75DP"
    android:maxheight= "60DP"/>
</TableLayout>

In the preceding code, the Android:adjustviewbounds property is used to set whether ImageView adjusts its bounds to maintain the length of the desired display picture, and, when true, adjusts its bounds to keep the length of the desired display picture changing; Android: MaxWidth and android:maxheight represent the maximum width and maximum height of the ImageView respectively.

(4) Add three TableRow table rows and add 3 text boxes (TextView) and edit box controls (EditText) to display and fill in the user name, password, and confirmation password. The specific code is as follows:

<TableRow> <textview android:layout_width= "wrap_content" android:layout_height= "Wrap_content" 
      android:text= "User name:" android:layout_marginleft= "5DP"/> <edittext android:layout_width= "250DP" android:layout_height= "wrap_content" android:hint= "Please enter user name" android:id= "@+id/edittext01" android:s 
      Ingleline= "true" android:inputtype= "Textpersonname"/> </TableRow> <TableRow> <textview Android:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:text= "Password:" Andro id:layout_marginleft= "5DP"/> <edittext android:layout_width= "250DP" android:layout_height= "Wrap_co" Ntent "android:hint=" Please enter the password "android:id= @+id/edittext02" android:singleline= "true" Android:inputty 
      Pe= "Textpassword"/> </TableRow> <TableRow> <textview android:layout_width= "Wrap_content" Android:layout_height= "Wrap_content" android:text= "Confirm Password:" android:layout_marginleft= "5DP"/> <edittext Android : layout_width= "250DP" android:layout_height= "wrap_content" android:hint= "Please enter password" android:id= "@+id/edittex

 t03 "android:singleline=" true "android:inputtype=" Textpassword "/> </TableRow>

In the preceding code, Android:singleline = "true" in the EditText control represents a single-line input literal, and android:inputtype= "Textpersonname" indicates that the input type is a user name. Android:inputtype= "Textpassword" indicates that the input is a password and will replace the input with "." To avoid a password leak.

(5) Add a linear layout in which a text box control (TextView) and a radio button group (radiogroup) are added, with two radio button controls in the radio button group, where the Android:orientation property of the linear layout is set to " Horizontal ", the specific code is as follows

<linearlayout android:layout_width= "match_parent" android:layout_height= "Wrap_content" Android:orie 
      ntation= "Horizontal" android:layout_margintop= "10DP" > <textview android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:layout_marginleft= "5DP" android:layout_gravity= "Center_ver Tical "android:text=" Please select your gender "/> <radiogroup android:layout_width=" wrap_content "Android:l" ayout_height= "wrap_content" android:orientation= "horizontal" android:id= "@+id/sex" > <radiobutto
         n android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:text= "male" Android:id= "@+id/radiobutton1"/> <radiobutton android:layout_width= "Wrap_content" a ndroid:layout_height= "Wrap_content" android:text= "female" android:id= "@+id/radiobutton2"/> </RadioG Roup> </linearlAyout>

 

(6) Add a linear layout in which to add a text box (TextView) and a list selector box control (Spinner), and the Android:orientation property of the linear layout is set to "horizontal", where the list selector box of Android: The entries property is "@array/type" with the following code

<linearlayout 
     android:layout_width= "wrap_content"
     android:layout_height= "Wrap_content"
     Android : orientation= "Horizontal"
     android:layout_margintop= "10DP" >

    <textview 
      android:layout_width= " Wrap_content "
      android:layout_height=" wrap_content "
      android:text=" Please select your identity "
      android:layout_" marginleft= "5DP"/>

    <spinner 
      android:entries= "@array/type" android:layout_width= "Wrap_
      Content "
      android:layout_height=" wrap_content "
      android:id=" @+id/spinner "/>

  </linearlayout >

(7) Add a text box control (TextView), List view Control (ListView), check box control (checkbox), and a normal button control (button) with the following code

<textview 
      android:layout_width= "wrap_content"
      android:layout_height= "wrap_content"
      android:text = "Terms of service"
      android:textsize= "27SP"
      android:gravity= "Center_horizontal"/>

  <listview 
      android: Id= "@+id/listview"
      android:entries= "@array/care"
      android:layout_width= "Wrap_content"
      android: layout_height= "Wrap_content"/>

  <checkbox 
      android:layout_width= "Wrap_content"
      android: layout_height= "Wrap_content"
      android:id= "@+id/checkbox"
      android:text= "I agree with the above terms"/> <button 
      android:layout_width= "wrap_content"
      android:layout_height= "wrap_content"
      android:id= "@+id/reg"
      android:text= "register"
      android:gravity= "center_horizontal"
      android:visibility= "invisible"/>

In the preceding code, the android:gravity= "Center_horizontal" of the TextView control represents the horizontal placement of the text box control on the screen; The Android:visibility property in the normal button indicates whether the control is visible, The set here is not visible.

(8) Activity_main.xml file complete code

<tablelayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http:// Schemas.android.com/tools "android:layout_width=" match_parent "android:layout_height=" Match_parent "Android:o" rientation= "vertical" android:background= "@drawable/background3" > <imageview android:layout_width= "Wrap_co Ntent "android:layout_height=" wrap_content "android:src=" "@drawable/logo5" android:id= "@+id/imageview02" an Droid:layout_margin= "5DP" android:adjustviewbounds= "true" android:maxwidth= "75DP" android:maxheight= "60DP"/&gt

  ;
      <TableRow> <textview android:layout_width= "wrap_content" android:layout_height= "Wrap_content"
      android:text= "User name:" android:layout_marginleft= "5DP"/> <edittext android:layout_width= "250DP" android:layout_height= "wrap_content" android:hint= "Please enter user name" android:id= "@+id/edittext01" Android:si Ngleline= "true" android:inputtype= "TextpersoNname "/> </TableRow> <TableRow> <textview android:layout_width=" Wrap_content "an 
      droid:layout_height= "wrap_content" android:text= "Password:" android:layout_marginleft= "5DP"/> <EditText Android:layout_width= "250DP" android:layout_height= "wrap_content" android:hint= "Please enter password" android:id= "@+id/edittext02" android:singleline= "true" android:inputtype= "Textpassword"/> </TableRow> <t ablerow> <textview android:layout_width= "wrap_content" android:layout_height= "Wrap_content" a
      ndroid:text= "Confirm Password:" android:layout_marginleft= "5DP"/> <edittext android:layout_width= "250DP" android:layout_height= "wrap_content" android:hint= "Please enter password" android:id= "@+id/edittext03" Android:singleli Ne= "true" android:inputtype= "Textpassword"/> </TableRow> <linearlayout android:layout_width = "Match_parent" android:layout_height= "wrap_content" android:orientation= "horizontal" android:layout_margintop= "10DP" > & Lt TextView android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android:layout_marginl eft= "5DP" android:layout_gravity= "center_vertical" android:text= "Please select your sex"/> <radiogroup an
       Droid:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:orientation= "Horizontal" Android:id= "@+id/sex" > <radiobutton android:layout_width= "wrap_content" Android:layout_ 
         height= "wrap_content" android:text= "male" android:id= "@+id/radiobutton1"/> <radiobutton Android:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:text= "female" a Ndroid:id= "@+id/radiobutton2"/> </RadioGroup> </LinearLayout> <linearlayout android:lay Out_width= "Wrap_conteNT "android:layout_height=" wrap_content "android:orientation=" horizontal "android:layout_margintop=" 10DP "&G

    T <textview android:layout_width= "wrap_content" android:layout_height= wrap_content "android:text=" Please select Your identity "android:layout_marginleft=" 5DP "/> <spinner android:entries=" @array/type "android:layou T_width= "Wrap_content" android:layout_height= "wrap_content" android:id= "@+id/spinner"/> </LinearLayou t> <textview android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android: text= "Terms of Service" android:textsize= "27SP" android:gravity= "Center_horizontal"/> <listview android:id = "@+id/listview" android:entries= "@array/care" android:layout_width= "Wrap_content" android:layout_height 
      = "Wrap_content"/> <checkbox android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android:iD= "@+id/checkbox" android:text= "I agree to the above terms"/> <button android:layout_width= "Wrap_content" Android : layout_height= "wrap_content" android:id= "@+id/reg" android:text= "registered" android:gravity= "center_horizontal

 "Android:visibility=" invisible "/> </TableLayout>

(9) In the Mainactivity.java file, get to the check box control, the normal button control, the radio button group control, and the list selection box control, and add listeners to them, as follows

Import Android.os.Bundle;
Import Android.util.Log;
Import Android.view.View;
Import Android.view.View.OnClickListener;
Import Android.widget.AdapterView;
Import Android.widget.AdapterView.OnItemSelectedListener;
Import Android.widget.ArrayAdapter;
Import Android.widget.Button;
Import Android.widget.CheckBox;
Import Android.widget.CompoundButton;
Import Android.widget.CompoundButton.OnCheckedChangeListener;
Import Android.widget.EditText;
Import Android.widget.ListView;
Import Android.widget.RadioButton;
Import Android.widget.RadioGroup;
Import Android.widget.Spinner;


Import android.app.Activity;
  public class Mainactivity extends activity {private Button reg = null;
  private int location =-1;
  Private Spinner Spinner = null;
  private checkbox checkbox = NULL;
  Private EditText editText01 = null;
  Private EditText editText02 = null;
  Private EditText editText03 = null;
  Private RadioButton Radio =null;
  Private ListView ListView = null;

  Private Radiogroup sex; Protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);

    Setcontentview (R.layout.activity_main);
    Find the control you care about Reg = (Button) Findviewbyid (R.id.reg);
    Spinner = (spinner) Findviewbyid (R.id.spinner);
    checkbox = (checkbox) Findviewbyid (R.id.checkbox);
    editText01 = (edittext) Findviewbyid (r.id.edittext01);
    editText02 = (edittext) Findviewbyid (r.id.edittext02);

    editText03 = (edittext) Findviewbyid (r.id.edittext03);
    ListView = (ListView) Findviewbyid (R.id.listview);


    Sex = (Radiogroup) Findviewbyid (r.id.sex); arrayadapter<charsequence> adapter = Arrayadapter.createfromresource (this, R.array.care, Android.
    R.layout.simple_spinner_item); Listview.setadapter (adapter);//adapter associated with List view//Add listener Checkbox.setoncheckedchangelistener for check box control (new checkboxonchecked

    ChangeListener ());  Sex.setoncheckedchangelistener (New Radiogroup.oncheckedchangelistener () {public void oncheckedchanged (RadioGroup Groupint Checkedid) {radio = (RadioButton) Findviewbyid (Checkedid);


    }
    });

    Spinner.setonitemselectedlistener (New Spinneronitemselectedlistener ());

  Reg.setonclicklistener (New Regonclicklistener ()); Class Regonclicklistener implements onclicklistener{public void OnClick (View v) {log.i ("The username you entered is:", E
      Dittext01.gettext (). toString ());
      LOG.I ("The password you entered is:", Edittext02.gettext (). toString ());

      LOG.I ("The confirmation password you entered is:", Edittext03.gettext (). toString ());
      if (radio!= null) {LOG.I ("Your Selected sex is:", Radio.gettext (). toString ());
      }else {log.i ("Your Chosen sex is:", "none");

    LOG.I ("Your selected identity is:", spinner.getitematposition (location). toString ()); The class Spinneronitemselectedlistener implements onitemselectedlistener{public void onitemselected (Adapterv      

    Iew<?> Parent, view view, int position, long ID {//Get Drop-down list box control selected position location = position; } public void OnnothingselectEd (adapterview<?> parent) {}}//check box control Listener class Checkboxoncheckedchangelistener implements ONCHECKEDCH angelistener{public void OnCheckedChanged (Compoundbutton buttonview, Boolean ischecked) {if (ischec
      ked) {reg.setvisibility (view.visible);
      }else {reg.setvisibility (view.invisible);

 }

    }

  }

}

In the preceding code, the position of the selection is obtained by the listener of the Drop-down list box control, and then assigned to the location variable; In the listener of the check box control, if the check box is selected, the registration button appears visible, otherwise it is not visible.

IV. Operation

Before information is filled in

Fill in the information and click After registration

Console output Information

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.