How to create a login form in Android?

Question

I want to create a login form. But i am new in android so i am not able to do it properly. I have to put the logo of the company on it's header. After that the heading will be Like Login to you are account after that in a box the user name and password. So i am posting my xml please upadte it. Thanks...

This is how i have to create it from this link please check this http://s23.postimg.org/btie12dvv/Login_Page2.jpg

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#5F04B4"
    android:orientation="vertical" >


    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="User Name"
            android:textColor="#ffffff"
            android:textSize="13dp"
            android:textStyle="bold" />

        <EditText
            android:id="@+id/edtUserName"
            android:layout_width="200dp"
            android:layout_height="wrap_content" >
        </EditText>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Password"
            android:textColor="#ffffff"
            android:textSize="13dp"
            android:textStyle="bold" />

        <EditText
            android:id="@+id/edtPassword"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:password="true" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/btnLogin"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:text="Login" />
    </LinearLayout>

</LinearLayout>

You can put `ImageView` to use logo and use "inputtype=password" in edit text. — Chintan Rathod, Jul 10 '13 at 05:45
@KaranMavadhiya i don't have the reputation to post images.If u can please give me u r id so that i can mail u that then u post the xml on stackoverflow .I will be thank full to u always — , Jul 10 '13 at 05:48
You can upload it to free portals and reference here my friend. — Chintan Rathod, Jul 10 '13 at 05:51
Upload Image on Google and give me that link. I will Try To Solve It — Karan Mavadhiya, Jul 10 '13 at 05:52
@KaranMavadhiya from where i can uplaod the image please guide me — , Jul 10 '13 at 05:55
@KaranMavadhiya this is the link of the http://s23.postimg.org/btie12dvv/Login_Page2.jpg thanks — , Jul 10 '13 at 06:01
@ChintanRathod i have posted the image on this link http://s23.postimg.org/btie12dvv/Login_Page2.jpg Please check it — , Jul 10 '13 at 06:08
You need to crop 5 images. 1) your company logo, 2) login title 3) user name box, 4) password box, 5) login button. You need to use `Relative Layout` to accomplish it. — Chintan Rathod, Jul 10 '13 at 06:13
@ChintanRathod thanks for this.But i also want to know how i will create the xml .Please help me in that without the images,i don't have to use images ,only the look have to me same i can use simple text box. — , Jul 10 '13 at 06:17
@ChintanRathod How can we use user name box image on Edit Text for taking it's user name — , Jul 10 '13 at 07:17
It has its `getText()` method. You need to define in your activity class. — Chintan Rathod, Jul 10 '13 at 07:19
So i have to the use image in place of EditText for user name — , Jul 10 '13 at 07:22
@ChintanRathod i want to give some margin from left and right in the login to u r account layout so that background will appear on both sidehow can i do this — , Jul 10 '13 at 10:22
Yes you can. But for such small things, I can't help you because I am also working on Live Projects.. :( — Chintan Rathod, Jul 10 '13 at 10:29
@ChintanRathod will u please help me on this issue http://stackoverflow.com/questions/17571749/what-to-create-customized-android-listview-with-image-and-text — , Jul 11 '13 at 06:21

score 5 · Answer 1 · edited Jul 10 '13 at 06:06

5

For setting company logo in header:

getActionBar().setHomeButtonEnabled(true);
Drawable d=getResources().getDrawable(R.drawable.company_logo.png);
getActionBar().setBackgroundDrawable(d);

For setting title: Login

getActionBar().setTitle("Login");

I hope it will help you.

edited Jul 10 '13 at 06:06

Siddharth Lele

27,623
15
98
151

answered Jul 10 '13 at 05:55

Kapil

1,790
1
16
32

> i have posted the image please suggest me corresponding to that image how to create xml for that – Jul 10 '13 at 06:31
I did not get your comment. plz tell me what else i can do for you? – Kapil Jul 10 '13 at 06:38
I have given you code for setting logo in action bar but after looking at your uploaded image, it seems that you are looking for imageview. For it, you can simply add a imageview and set resource for it. – Kapil Jul 10 '13 at 06:44
For you information, Your design look like a website design but in case of mobile app design will quite different for example: Login button is not requied etc. – Kapil Jul 10 '13 at 06:46

score 1 · Accepted Answer · answered Jul 10 '13 at 06:39

I created a sample code. You need to replace proper images with sample one.

layout code

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<ImageView
    android:id="@+id/imgLogo"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:src="@drawable/ic_launcher" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:layout_below="@+id/imgLogo"
    android:background="#092EA1"
    android:orientation="vertical"
    android:paddingBottom="10dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        android:gravity="center_horizontal"
        android:text="Login to Your Account"
        android:textColor="@android:color/white"
        android:textSize="25sp" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="260dp"
            android:layout_height="40dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="17dp"
            android:layout_marginTop="15dp"
            android:background="@android:color/darker_gray" />

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/imageView1"
            android:layout_alignLeft="@+id/imageView1"
            android:layout_alignRight="@+id/imageView1"
            android:layout_alignTop="@+id/imageView1"
            android:layout_marginLeft="40dp"
            android:hint="Usrname" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="260dp"
            android:layout_height="40dp"
            android:layout_alignParentLeft="true"
            android:layout_below="@+id/imageView1"
            android:layout_marginLeft="17dp"
            android:layout_marginTop="15dp"
            android:background="@android:color/darker_gray" />

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/imageView2"
            android:layout_alignLeft="@+id/imageView2"
            android:layout_alignRight="@+id/imageView2"
            android:layout_alignTop="@+id/imageView2"
            android:layout_marginLeft="40dp"
            android:hint="Password"
            android:inputType="textWebPassword" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/imageView2"
            android:layout_below="@+id/imageView2"
            android:layout_marginTop="26dp"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/imageView3"
            android:layout_alignRight="@+id/imageView2"
            android:text="Forget Password?"
            android:textAppearance="?android:attr/textAppearanceLarge" />
    </RelativeLayout>
</LinearLayout>
</RelativeLayout>

This will look like,

enter image description here

Thanks alot it worked for me thank u very much . i was very much tensed but i got my solution thanks u very much .Is there any tool in android to design — , Jul 10 '13 at 06:44
Glad to help you...`Is there any tool in android to design`. Yes.. its `Practice`. Pass one month in development in any technology will make you able to solve problem. :) — Chintan Rathod, Jul 10 '13 at 06:48
I have just started the development thanks can u please provide me u r personal mail id so that if i have any issue i can take u r help — , Jul 10 '13 at 06:51
You can see in my profile. http://stackoverflow.com/users/1841457/chintan-rathod :) — Chintan Rathod, Jul 10 '13 at 06:53
Ok i have added u in my google plus..i am going through with u r blog nice for us keep going ...all the best and thanks for help — , Jul 10 '13 at 07:02
@user2545733, I would like to suggest you to read http://developer.android.com/guide/topics/ui/declaring-layout.html and http://www.androidhive.info/2011/07/android-layouts-linear-layout-relative-layout-and-table-layout/. This will help you to understand layout deeply. Please give some time to read whole article. This will benefit you not now, but in recent days when you have to create more complex design. :) — Chintan Rathod, Jul 10 '13 at 07:13
How can we use user name box image on Edit Text for taking it's user name — , Jul 10 '13 at 07:16
i want to give some margin in the login to u r account layout that is the Linear Layout how can i do this — , Jul 10 '13 at 09:47

score 0 · Answer 3 · answered Jul 10 '13 at 05:57

after 1st LinearLayout (root) you can write these lines:

<RelativeLayout
        android:id="@+id/headerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="top" >

        <View
            android:id="@+id/headerView"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_alignParentTop="true"
            android:background="@drawable/Your-header-file-name" />
</RelativeLayout

Alternatively you may use LinearLayout instead of Relative. I used this one because it will not affect your LinearLayout. It's a good practice for beginners to use a weight for LinearLayout like:

<LinearLayout (root)
android:orientation="vertical"
android:weightSum ="2" >

    <LineaLayout (child1)
        android:layout_weight="1"/>
    <LineaLayout (child2)
        android:layout_weight="1"/>

</LinearLayout>

this will divide your layouts with weight 1. so you will get half screen for child 1 and remaining half for child 2

I have posted the image link that will define how i have to make it .So as per the image please suggest me the changes in the XML file thanks for u help .waiting for u r reply soon — , Jul 10 '13 at 06:03

How to create a login form in Android?

3 Answers3