Building a Generic Login Page

pogz · by **pogz** » Fri Nov 23, 2007 6:20 pm

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:

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

<?xml version="1.0" encoding="utf-8"?>
 
<!-- 
  Application Name: Generic Login Screen for the Android Platform (GUI)
  Description: This is a generic login screen which catches the username and password values
  Created on: November 23, 2007
  Created by: Pogz Ortile
  Contact: pogz(at)redhat(dot)polarhome(dot)com
  Notes: The username_text is the written text and the txt_username is the textbox. Same goes for the password
                You are free to distribute, modify, and wreck for all I care. GPL ya!
--> 
 
<RelativeLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    
    <TextView id="@+id/welcome_text"
        android:text = "Welcome to My Application!n"            
        android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
        />
        
    <TextView id="@+id/username_text"
        android:text = "username:"   
        android:layout_centerHorizontal="true"  
        android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/welcome_text"
        />
    
    <EditText id="@+id/txt_username"
              android:layout_height="wrap_content"
              android:layout_width="250px"
              android:layout_centerHorizontal="true"
              android:layout_below="@+id/username_text"
              android:singleLine="true" /> 
              
              
    <TextView id="@+id/password_text"
        android:text = "password:"   
        android:layout_centerHorizontal="true"  
        android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/txt_username"
        />
    
    <EditText id="@+id/txt_password"
                  android:password="true"
              android:layout_height="wrap_content"
              android:layout_width="250px"
              android:layout_centerHorizontal="true"
              android:layout_below="@+id/password_text"
              android:singleLine="true" /> 
    
        <Button id="@+id/login_button" 
                android:text="Login!" 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_below="@+id/txt_password"
                />
                
</RelativeLayout>
 
Parsed in 0.006 seconds,  using GeSHi 1.0.8.4

YOUR_MAIN_APP.java

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

package pogz.test;
 
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
 
/**
 *  Application Name: Generic Login Screen for the Android Platform (back end)
 *  Description: This is a generic login screen which catches the username and password values
 *  Created on: November 23, 2007
 *  Created by: Pogz Ortile
 *  Contact: pogz(at)redhat(dot)polarhome(dot)com
 *  Notes: The string values for username and password are assigned to sUserName and sPassword respectively
 *              You are free to distribute, modify, and wreck for all I care. GPL ya!
 * */
 
public class PogzTest01 extends Activity {
    /** Called when the activity is first created. */
    @Override
    
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        
        // load up the layout
        setContentView(R.layout.main);
        
        // get the button resource in the xml file and assign it to a local variable of type Button
        Button launch = (Button)findViewById(R.id.login_button);
        
        // this is the action listener
        launch.setOnClickListener( new OnClickListener()
        {
                
                public void onClick(View viewParam)
                {
                        // this gets the resources in the xml file and assigns it to a local variable of type EditText
                EditText usernameEditText = (EditText) findViewById(R.id.txt_username);
                EditText passwordEditText = (EditText) findViewById(R.id.txt_password);
                
                // the getText() gets the current value of the text box
                // the toString() converts the value to String data type
                // then assigns it to a variable of type String
                String sUserName = usernameEditText.getText().toString();
                String sPassword = passwordEditText.getText().toString();
                        
                // this just catches the error if the program cant locate the GUI stuff
                if(usernameEditText == null || passwordEditText == null){
                    showAlert("Crap!", "Couldn't find the 'txt_username' or 'txt_password' "
                              + "EditView in main.xml", "Oh shit!", false);
                }else{
                        // display the username and the password in string format
                        showAlert("Logging in", "Username: " + sUserName + "nPassword: " + sPassword , "Ok", true);
                        }
                }
        }
        
        ); // end of launch.setOnclickListener
    }
}
Parsed in 0.038 seconds,  using GeSHi 1.0.8.4

plusminus · by **plusminus** » Fri Nov 23, 2007 6:38 pm

Hey pogz,

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:

be called by any other Activity
User would type pw and username, then hit ok.
Return those values to the Calling Activity
Calling Activity does whatever it wants... (check username/pw against Database or sth else)

See:

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

Then it would be perfectly useful :!:

Regards,
plusminus

pogz · by **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.

plusminus · by **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

[ syntax = " language " ] YOUR_CODE [ / syntax ]
 
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

pogz · by **pogz** » Sun Nov 25, 2007 8:02 am

Thanks man, will apply that template in my later posts.

Katharnavas · by **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.

plusminus · by **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

android:layout_x="150px"
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 · by **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 ]
Syntax: [ Download ] [ Show ]
Using xml Syntax Highlighting
android:layout_x="150px"

android:layout_y="42px"

Parsed in 0.000 seconds, using GeSHi 1.0.8.4

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

Regards,
plusminus

cybersat · by **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).

plusminus · by **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

     ...
    <TextView id="@+id/password_text"
            android:text = "password:"  
          ...
     />
   
    <EditText id="@+id/txt_password"
            android:password="true"
          ... />
   
     <Button id="@+id/login_button"
          android:text="Login!"
          ...
          /> 
     ...
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

venkat · by **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

plusminus · by **plusminus** » Tue Dec 18, 2007 8:52 am

I was faster, wohooo :lol:

Regards,
plusminus

venkat · by **venkat** » Tue Dec 18, 2007 8:59 am

of course you are...

regads,
venkat

sainath · by **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.

Toadster · by **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

Building a Generic Login Page

Building a Generic Login Page

Please help "R.id cannot be resolved"

Login Tutorial

Who is online