Building a Generic Login Page

Basic Tutorials concerning: GUI, Views, Activites, XML, Layouts, Intents, ...

Building a Generic Login Page

Postby pogz » Fri Nov 23, 2007 6:20 pm

Building a Generic Login Page


What you will learn: Create a simple generic login page to be used for different applications

:?: Problems/Questions: Write it right below...

Difficulty: 1.0 of 5 :)

What it will look like:
Image


Description: This is a generic login page with the GUI elements in the XML and the even handlers in the java file. This is pretty straightforward and has complete comments on what it does. The message box just displays the data from the text boxes. You could change it to an actual login event or any event you want. Just post up if you a have problems! Enjoy.

main.xml
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3. <!--
  4.  Application Name: Generic Login Screen for the Android Platform (GUI)
  5.  Description: This is a generic login screen which catches the username and password values
  6.  Created on: November 23, 2007
  7.  Created by: Pogz Ortile
  8.  Contact: pogz(at)redhat(dot)polarhome(dot)com
  9.  Notes: The username_text is the written text and the txt_username is the textbox. Same goes for the password
  10.                 You are free to distribute, modify, and wreck for all I care. GPL ya!
  11. -->
  12.  
  13. <RelativeLayout
  14.         xmlns:android="http://schemas.android.com/apk/res/android"
  15.    android:orientation="horizontal"
  16.    android:layout_width="fill_parent"
  17.    android:layout_height="fill_parent"
  18.    >
  19.    
  20.     <TextView id="@+id/welcome_text"
  21.         android:text = "Welcome to My Application!n"           
  22.         android:layout_width="wrap_content"
  23.                 android:layout_height="wrap_content"
  24.                 android:layout_centerHorizontal="true"
  25.         />
  26.        
  27.     <TextView id="@+id/username_text"
  28.         android:text = "username:"  
  29.         android:layout_centerHorizontal="true"  
  30.         android:layout_width="wrap_content"
  31.                 android:layout_height="wrap_content"
  32.                 android:layout_below="@+id/welcome_text"
  33.         />
  34.    
  35.     <EditText id="@+id/txt_username"
  36.              android:layout_height="wrap_content"
  37.              android:layout_width="250px"
  38.              android:layout_centerHorizontal="true"
  39.              android:layout_below="@+id/username_text"
  40.              android:singleLine="true" />
  41.              
  42.              
  43.     <TextView id="@+id/password_text"
  44.         android:text = "password:"  
  45.         android:layout_centerHorizontal="true"  
  46.         android:layout_width="wrap_content"
  47.                 android:layout_height="wrap_content"
  48.                 android:layout_below="@+id/txt_username"
  49.         />
  50.    
  51.     <EditText id="@+id/txt_password"
  52.                   android:password="true"
  53.              android:layout_height="wrap_content"
  54.              android:layout_width="250px"
  55.              android:layout_centerHorizontal="true"
  56.              android:layout_below="@+id/password_text"
  57.              android:singleLine="true" />
  58.    
  59.         <Button id="@+id/login_button"
  60.                 android:text="Login!"
  61.                 android:layout_width="wrap_content"
  62.                 android:layout_height="wrap_content"
  63.                 android:layout_centerHorizontal="true"
  64.                 android:layout_below="@+id/txt_password"
  65.                 />
  66.                
  67. </RelativeLayout>
  68.  
Parsed in 0.006 seconds, using GeSHi 1.0.8.4


YOUR_MAIN_APP.java
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. package pogz.test;
  2.  
  3. import android.app.Activity;
  4. import android.os.Bundle;
  5. import android.view.View;
  6. import android.view.View.OnClickListener;
  7. import android.widget.Button;
  8. import android.widget.EditText;
  9.  
  10. /**
  11.  *  Application Name: Generic Login Screen for the Android Platform (back end)
  12.  *  Description: This is a generic login screen which catches the username and password values
  13.  *  Created on: November 23, 2007
  14.  *  Created by: Pogz Ortile
  15.  *  Contact: pogz(at)redhat(dot)polarhome(dot)com
  16.  *  Notes: The string values for username and password are assigned to sUserName and sPassword respectively
  17.  *              You are free to distribute, modify, and wreck for all I care. GPL ya!
  18.  * */
  19.  
  20. public class PogzTest01 extends Activity {
  21.     /** Called when the activity is first created. */
  22.     @Override
  23.    
  24.     public void onCreate(Bundle icicle) {
  25.         super.onCreate(icicle);
  26.        
  27.         // load up the layout
  28.         setContentView(R.layout.main);
  29.        
  30.         // get the button resource in the xml file and assign it to a local variable of type Button
  31.         Button launch = (Button)findViewById(R.id.login_button);
  32.        
  33.         // this is the action listener
  34.         launch.setOnClickListener( new OnClickListener()
  35.         {
  36.                
  37.                 public void onClick(View viewParam)
  38.                 {
  39.                         // this gets the resources in the xml file and assigns it to a local variable of type EditText
  40.                 EditText usernameEditText = (EditText) findViewById(R.id.txt_username);
  41.                 EditText passwordEditText = (EditText) findViewById(R.id.txt_password);
  42.                
  43.                 // the getText() gets the current value of the text box
  44.                 // the toString() converts the value to String data type
  45.                 // then assigns it to a variable of type String
  46.                 String sUserName = usernameEditText.getText().toString();
  47.                 String sPassword = passwordEditText.getText().toString();
  48.                        
  49.                 // this just catches the error if the program cant locate the GUI stuff
  50.                 if(usernameEditText == null || passwordEditText == null){
  51.                     showAlert("Crap!", "Couldn't find the 'txt_username' or 'txt_password' "
  52.                               + "EditView in main.xml", "Oh shit!", false);
  53.                 }else{
  54.                         // display the username and the password in string format
  55.                         showAlert("Logging in", "Username: " + sUserName + "nPassword: " + sPassword , "Ok", true);
  56.                         }
  57.                 }
  58.         }
  59.        
  60.         ); // end of launch.setOnclickListener
  61.     }
  62. }
Parsed in 0.038 seconds, using GeSHi 1.0.8.4
Pogz :)
pogz
Freshman
Freshman
 
Posts: 3
Joined: Tue Nov 20, 2007 1:48 pm

Top

Postby plusminus » Fri Nov 23, 2007 6:38 pm

Hey pogz,

:D I do appreciate, that you posted your tutorial here :!: :!:

May I do some BB-Code work (syntax-highlighting and stuff) :?: Did it :!:

Did you think of making it even more generic, like it could do the following:
  1. be called by any other Activity
  2. User would type pw and username, then hit ok.
  3. :arrow: Return those values to the Calling Activity
  4. Calling Activity does whatever it wants... (check username/pw against Database or sth else)

See: :arrow: Activity.onActivityResult(int, int, java.lang.String, android.os.Bundle)

Then it would be perfectly useful :!:

Regards,
plusminus
Image
Image | Android Development Community / Tutorials
User avatar
plusminus
Site Admin
Site Admin
 
Posts: 2688
Joined: Wed Nov 14, 2007 8:37 pm
Location: Schriesheim, Germany

Postby pogz » Fri Nov 23, 2007 8:00 pm

I think you should do a posting guide on whats the right font for the title, etc..

and how did you make the Code label become XML and JAVA.. hmmm..

anyweiz, will try to work on ur suggestion to make a modified one or a version 2. though i think id do a simpler one with explaining positions in gui layouting.
Pogz :)
pogz
Freshman
Freshman
 
Posts: 3
Joined: Tue Nov 20, 2007 1:48 pm

Postby plusminus » Fri Nov 23, 2007 8:23 pm

Hey pogz,

you do that with the following BB-Tags-Style:
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. [ syntax = " language " ] YOUR_CODE [ / syntax ]
  2.  
  3. where     language == java      or     language == xml      or    most other languages...
Parsed in 0.000 seconds, using GeSHi 1.0.8.4


Yes you are right, I will do a posting-guide or a kinda 'template' tomorrow :!:

Regards,
plusminus
Image
Image | Android Development Community / Tutorials
User avatar
plusminus
Site Admin
Site Admin
 
Posts: 2688
Joined: Wed Nov 14, 2007 8:37 pm
Location: Schriesheim, Germany

Postby pogz » Sun Nov 25, 2007 8:02 am

Thanks man, will apply that template in my later posts. :)
Pogz :)
pogz
Freshman
Freshman
 
Posts: 3
Joined: Tue Nov 20, 2007 1:48 pm

Postby Katharnavas » Thu Dec 06, 2007 8:17 am

Hi,
How to set the position using absolute layout instead of relative.

If the screen needs to display in the following manner

username : katharnavas -> editfield
password : ********

instead of laying out all the fields in vertical.
Katharnavas
Senior Developer
Senior Developer
 
Posts: 100
Joined: Tue Dec 04, 2007 5:57 am
Location: India

Top

Postby plusminus » Thu Dec 06, 2007 1:41 pm

Hello Katharnavas,

AbsoluteLayouts are not preferable :!: :!: :!: as they are going to look different/crappy on variant screen-sizes :!:

But as you wish :) :
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. android:layout_x="150px"
  2. android:layout_y="42px"
Parsed in 0.000 seconds, using GeSHi 1.0.8.4


Or make DroidDraw generate the XML-Stuff for you :arrow: Do the DroidDraw.

Regards,
plusminus
Image
Image | Android Development Community / Tutorials
User avatar
plusminus
Site Admin
Site Admin
 
Posts: 2688
Joined: Wed Nov 14, 2007 8:37 pm
Location: Schriesheim, Germany

Postby Katharnavas » Thu Dec 06, 2007 2:09 pm

Thanks for ur valuable suggestions.

plusminus wrote:Hello Katharnavas,

AbsoluteLayouts are not preferable :!: :!: :!: as they are going to look different/crappy on variant screen-sizes :!:

But as you wish :) :
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1. android:layout_x="150px"
  2. android:layout_y="42px"
Parsed in 0.000 seconds, using GeSHi 1.0.8.4


Or make DroidDraw generate the XML-Stuff for you :arrow: Do the DroidDraw.

Regards,
plusminus
Katharnavas
Senior Developer
Senior Developer
 
Posts: 100
Joined: Tue Dec 04, 2007 5:57 am
Location: India

Please help "R.id cannot be resolved"

Postby cybersat » Tue Dec 18, 2007 8:19 am

Hi,

Thanks for the post..kind a post i was searching.

I am using Eclipse and tried to run Login program posted.

Just getting a 3 error "R.id cannot be resolved" .

1. R.id.txt_username
2. R.id.txt_password
3. R.id.login_button

Is it that i have to declare manually in R.java or will be pulled automatically by eclipse(bcaz i can't find class id in R).

Also kindly advise as how to make declaration is made in R.java.
Ex:- public static final int icon=0x7f020000; ..how will a programmer decide hexa location ' 0x7f020000 ' (is it some sought of calculations).
cybersat
Freshman
Freshman
 
Posts: 5
Joined: Tue Dec 18, 2007 8:09 am

Postby plusminus » Tue Dec 18, 2007 8:44 am

Hello cybersat,

did you copy the content of the main.xml :?: The IDs you mentioned are present there:
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.      ...
  2.     <TextView id="@+id/password_text"
  3.             android:text = "password:"  
  4.           ...
  5.      />
  6.    
  7.     <EditText id="@+id/txt_password"
  8.             android:password="true"
  9.           ... />
  10.    
  11.      <Button id="@+id/login_button"
  12.           android:text="Login!"
  13.           ...
  14.           />
  15.      ...
Parsed in 0.033 seconds, using GeSHi 1.0.8.4


Eclipse automatically activates the so called aapt.exe that manages to compile your resources into your project and generates the R.java . There should be a R.java right next to your MyActivity.java.

Regards,
plusminus

PS: Post 400 =D
Image
Image | Android Development Community / Tutorials
User avatar
plusminus
Site Admin
Site Admin
 
Posts: 2688
Joined: Wed Nov 14, 2007 8:37 pm
Location: Schriesheim, Germany

Postby venkat » Tue Dec 18, 2007 8:50 am

Hi cybersat,
you may be forgot to update the main.xml file here.
just copy main.xml file above :roll: and past it in your main.xml file . it will be in inside the res-->layout.
i have attached full project here. have a look.

regards,
venkat
Attachments
PogzTest01.rar
(33.35 KiB) Downloaded 1448 times
venkat
Senior Developer
Senior Developer
 
Posts: 152
Joined: Tue Nov 27, 2007 5:42 am
Location: India

Postby plusminus » Tue Dec 18, 2007 8:52 am

I was faster, wohooo :lol:

Regards,
plusminus
Image
Image | Android Development Community / Tutorials
User avatar
plusminus
Site Admin
Site Admin
 
Posts: 2688
Joined: Wed Nov 14, 2007 8:37 pm
Location: Schriesheim, Germany

Postby venkat » Tue Dec 18, 2007 8:59 am

of course you are... :)


regads,
venkat
venkat
Senior Developer
Senior Developer
 
Posts: 152
Joined: Tue Nov 27, 2007 5:42 am
Location: India

Postby sainath » Thu Feb 26, 2009 6:54 am

Hi

I am new to Mobile Development and just recently i started playing with Android.

As i was trying this example in android-sdk-windows-1.0_r2.zip, i am getting an error

"The method showAlert(String, String, String, boolean) is undefined for the type new View.OnClickListener(){}"

so i used Toast instead and it worked,

Toast.makeText(LoginPage.this, "Couldn't find the 'txt_username' or 'txt_password'",
Toast.LENGTH_SHORT).show();

but i want to know whether showAlert Exists in present sdk release or it has been removed or its a user defiend function.
Regards
Sainath
User avatar
sainath
Freshman
Freshman
 
Posts: 4
Joined: Thu Feb 26, 2009 5:35 am

Login Tutorial

Postby Toadster » Thu Mar 26, 2009 6:35 pm

I like your example here and have one almost identical to it as the front end for an app currently under construction.

Question Though: Does anyone have an example or tutorial that takes this a step deeper? Specifically,

1. How to set a default password for the first launch of the app.
(Then user enters their own uname and pword)

2. How to ignore the default uname and password upon subsequent launches of the app so that the new ones entered by the user are active without being reset to the defaults.

Thanks for your ideas,

Toadster
Toadster
Freshman
Freshman
 
Posts: 4
Joined: Wed Jan 28, 2009 4:28 am

Top
Next

Return to Novice Tutorials

Who is online

Users browsing this forum: No registered users and 4 guests