How to Make Attractive and beautiful Login / SignUp Form in Android withing few minutes Quick and fast ? - SpartaCode

SpartaCode

Make your development faster and easier !

How to Make Attractive and beautiful Login / SignUp Form in Android withing few minutes Quick and fast ?


Secure and Beautiful Login Page :
Login Page is first impression of your app. Making it more beautiful and responsive is master key to success of your app. The Buttons you use must be extra ordinary and responsive. The alignment of each object on page matters a lot.
When it comes to login page its always good to avoid App Toolbar on top. Hiding Toolbar will bring a good effect of standard app. Because every beautiful and standard App Design follow this step.
When it comes to background image of your login page always darken or blur the background image to make TextBox and Buttons more visible to user.

Quick and fast Guide on Beautiful Login Form in Android.
Today we will Learn following: 
1. How to create Custom TextView with our own Font Style
2. How to create Custom Button with our own behaviour
3. Learn Design basics of Login Form and Design beautiful login form.

Lets Get Started,
Step 1: Hiding Actionbar
In order to hide Actionbar or Toolbar in Android you need to define some styles into AndroidManifest.xml file, these attribute will hide Actionbar for your Activity.

Go to Styles.xml file and paste following Code into AppTheme:
    <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    <item name="colorControlNormal">@android:color/white</item>

Preview:

Step 2: Setup CustomTextView
Font of our app plays an very important role when it comes to GUI of Android App. To make it beautiful we need tto use CustomTextView.
Normal Android TextView does not have good font or does not have standard font. Here in this section i will tell you how to create your own TextView with your own font style you wish.

Steps to setup CustomTextView are as follows:
Step 1: Create new File named CustomTextView.java in your package:
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.TextView;


public class CustomTextView extends TextView {
    private static final String TAG = "TextView";

    public CustomTextView(Context context) {
        super(context);
    }

    public CustomTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setCustomFont(context, attrs);
    }

    public CustomTextView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setCustomFont(context, attrs);
    }

    private void setCustomFont(Context ctx, AttributeSet attrs) {
        TypedArray a = ctx.obtainStyledAttributes(attrs, R.styleable.CustomTextView);
        String customFont = a.getString(R.styleable.CustomTextView_customFont);
        setCustomFont(ctx, customFont);
        a.recycle();
    }

    public boolean setCustomFont(Context ctx, String asset) {
        Typeface tf = null;
        try {
            tf = Typeface.createFromAsset(ctx.getAssets(), asset);
        } catch (Exception e) {
            Log.e(TAG, "Could not get typeface: "+e.getMessage());
            return false;
        }

        setTypeface(tf);
        return true;
    }

}

Step 2: Create attributes file named attrs.xml in values package:
Attributes file provides stylebles required for your CustomTextView.

Go ahead and create attrs.xml file and paste following:
   <?xml version="1.0" encoding="utf-8"?>
   <resources>
       <declare-styleable name="CustomTextView">
           <attr name="customFont" format="string"/>
       </declare-styleable>
   </resources>

Preview:

Step 3: Copy new Font Style: Gothic thin
Gothic is a beautiful font used for standard Android Applications. You can download the file from following link available:
Download Gothic Theme

Right Click on app package  => New => Folder => Assets Folder
Preview:

Now Paste Downloaded Gothic Font Style into Assets Folder.

Step 3: Creating Login Form layout:
Ya hoo! We have done with our CustomTextView Setup now we need to use it into our project.
Just go to LoginActivity.xml layout file of your Activity and paste following Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:foo="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:background="@drawable/loginbackground"
    >

    <LinearLayout
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center"
        >

        <CustomTextView
            android:id="@+id/text_view_toolbar_title"
            android:layout_centerInParent="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="@android:color/white"
            android:text="Login / Register"
            foo:customFont="Xoxoxa.ttf"
            android:textSize="20dp"
            android:layout_marginBottom="30dp"
            android:gravity="center" />

        <EditText
            android:id="@+id/et_email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:enabled="false"
            android:inputType="textEmailAddress"
            android:padding="10dp"
            android:layout_marginBottom="10dp"
            />

        <EditText
            android:id="@+id/et_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textWebPassword"
            android:padding="10dp"
            android:layout_marginBottom="20dp"
            />

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Submit"
            android:onClick="login"
            android:background="@drawable/buttonbackground"/>

    </LinearLayout>

</LinearLayout>

Dont worry about errors we will solve it in further steps.

Step 4: Creating Custom Button:
Normal Android button is not that attractive and its just a basic button. So to make it more beautiful we can apply background to Button and behavior of your button will change and look more beautiful.

Download and Paste following Drawables into drawable package:
1. buttonbackground.xml
2. rounded_background.xml
3. rounded_background_pressed_back.xml
4. loginbackground.png

Once you have done you will find the desired beautiful Login form.

Thank You for your Visit
If you like post, Please Share and Comment.

3 comments:

  1. This is really a great tutorial on how to create custom TextView and beautiful login form.

    ReplyDelete
  2. It is really Awesome i have loved the design and have love the new style of designing custom buttons

    ReplyDelete

News

Get Amazing Traffic to your Site

Traffic Exchange

Post Bottom Ad

Responsive Ads Here