Android Instagram like Login screen with SQLite

In my Previous on Creating Instagram like login UI screen, I explained how to achieve below UI design. In this post, let’s continue towards making our login work.

Create a new Layout file named : home.xml

res > home.xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#03003d"
    android:orientation="vertical">

    <TextView
        android:id="@+id/lblUserId"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal|center_vertical"
        android:gravity="center_horizontal|center_vertical"
        android:textColor="#fc29ab"
        android:textSize="20sp" />
</LinearLayout>

This will simply display the login name of the current logged In user.

Create a new class file (.java file) name  LoginHelper.java :

LoginHelper.java :

package com.parallelcodes.wowlogin;

import android.content.Context;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteOpenHelper;

/**
 * Created by H on 1/26/2018. 11:29 PM 
 */
public class LoginHelper extends SQLiteOpenHelper {
    private static final int DATABASE_VERSION = 1;
    // Database Name
    private static final String DATABASE_NAME = "myLoginDb";
    // tasks table name

    // tasks Table Columns names
    private static final String KEY_TABLEUSERINFO = "tblUserInfo";
    private static final String KEY_ID = "uid";
    private static final String KEY_USERID = "userid";
    private static final String KEY_PASSWORD = "password";
    private static final String KEY_USERNAME = "NAME";

    private SQLiteDatabase dbase;

    public LoginHelper(Context context) {
        super(context, DATABASE_NAME, null, DATABASE_VERSION);
    }

    @Override
    public void onCreate(SQLiteDatabase db) {
        dbase = db;
        String sql = "CREATE TABLE IF NOT EXISTS " + KEY_TABLEUSERINFO + " ( "
                + KEY_ID + " INTEGER PRIMARY KEY AUTOINCREMENT, " + KEY_USERID
                + " TEXT, " + KEY_PASSWORD + " TEXT, " + KEY_USERNAME + " TEXT)";
        db.execSQL(sql);
        Boolean dataExist = false;
        Cursor c = db.rawQuery("Select * from " + KEY_TABLEUSERINFO, null);
        if (c.moveToFirst()) {
            String userid = c.getString(0).toString();
            if (userid.trim().equals("")) {
                dataExist = true;
            }
            c.close();
        }
        if (!dataExist) {
            sql = "insert into " + KEY_TABLEUSERINFO + " (" + KEY_USERID + "," + KEY_PASSWORD
                    + "," + KEY_USERNAME + ") values ('hitesh@parallelcodescom-79f94a.ingress-daribow.easywp.com','111','Hitesh S Vikani')";
            db.execSQL(sql);

            sql = "insert into " + KEY_TABLEUSERINFO + " (" + KEY_USERID + "," + KEY_PASSWORD
                    + "," + KEY_USERNAME + ") values ('admin@parallelcodescom-79f94a.ingress-daribow.easywp.com','111',
'ParallelCodes')";
            db.execSQL(sql);
        }

    }


    @Override
    public void onUpgrade(SQLiteDatabase db, int oldV, int newV) {
        db.execSQL("DROP TABLE IF EXISTS " + KEY_TABLEUSERINFO);
        onCreate(db);
    }

    public String getUserName(String userid, String password) {
        SQLiteDatabase database = this.getReadableDatabase();
        String username = "";
        Cursor cursor = database.rawQuery("SELECT  " + KEY_USERNAME + " FROM " + 
KEY_TABLEUSERINFO
                + " where " + KEY_USERID + " = '"
                + userid + "' and " + KEY_PASSWORD + "='"
                + password + "'", null);
        //  database.close();

        if (cursor.moveToFirst()) {
            username = cursor.getString(0);
        } else
            username = "0";
        cursor.close();
        database.close();
        return username;
    }
}

This class extends the SQLiteOpenHelper class and will create the Database for our application. The Android SQLite Database will contain one Login Info table named : tblUserInfo and it will be storing User information.

I have made logic of checking if the data already exists or not, so that we don’t insert our data multiple times. Also you can modify the content of below code to make your own credentials :

sql = "insert into " + KEY_TABLEUSERINFO + " (" + KEY_USERID + "," + KEY_PASSWORD
        + "," + KEY_USERNAME + ") values ('hitesh@parallelcodescom-79f94a.ingress-daribow.easywp.com','111','Hitesh S Vikani')";
db.execSQL(sql);

sql = "insert into " + KEY_TABLEUSERINFO + " (" + KEY_USERID + "," + KEY_PASSWORD
        + "," + KEY_USERNAME + ") values ('admin@parallelcodescom-79f94a.ingress-daribow.easywp.com','111','ParallelCodes')";
db.execSQL(sql);

 

Below method will help us to check if the user with specified password exists or not. It will return the name of the user if he/she exists.

public String getUserName(String userid, String password) {
    SQLiteDatabase database = this.getReadableDatabase();
    String username = "";
    Cursor cursor = database.rawQuery("SELECT  " + KEY_USERNAME + " FROM " + KEY_TABLEUSERINFO
            + " where " + KEY_USERID + " = '"
            + userid + "' and " + KEY_PASSWORD + "='"
            + password + "'", null);
    //  database.close();

    if (cursor.moveToFirst()) {
        username = cursor.getString(0);
    } else
        username = "0";
    cursor.close();
    database.close();
    return username;
}

Edit the MainActivity.java file as below.

MainActivity.java:

package com.parallelcodes.wowlogin;

import android.content.Intent;
import android.content.res.AssetManager;
import android.graphics.Typeface;
import android.graphics.drawable.AnimationDrawable;
import android.os.Build;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

import java.util.Locale;

public class MainActivity extends AppCompatActivity {

    AnimationDrawable anim;
    AssetManager am;

    LoginHelper loginHelper;
    Typeface typefaceLobster, typefaceArial;
    TextView lblHeader;

    EditText edtPassword, edtEmail;
    Button btnLogin;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            findViewById(android.R.id.content).setSystemUiVisibility(
                    View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
        }

        setContentView(R.layout.activity_main);
        am = this.getApplicationContext().getAssets();
        RelativeLayout container = (RelativeLayout) findViewById(R.id.container);
        anim = (AnimationDrawable) container.getBackground();
        anim.setEnterFadeDuration(100);
        anim.setExitFadeDuration(1000);

        loginHelper = new LoginHelper(MainActivity.this);

        typefaceLobster = Typeface.createFromAsset(getAssets(), "main/lobster.otf");
        typefaceArial = Typeface.createFromAsset(getAssets(), "main/arial.ttf");
        lblHeader = (TextView) findViewById(R.id.lblHeader);
        lblHeader.setTypeface(typefaceLobster);

        edtPassword = (EditText) findViewById(R.id.edtPassword);
        edtEmail = (EditText) findViewById(R.id.edtEmail);
        btnLogin = (Button) findViewById(R.id.btnLogin);

        edtPassword.setTypeface(typefaceArial);
        edtEmail.setTypeface(typefaceArial);
        btnLogin.setTypeface(typefaceArial);

        btnLogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                try {
                    String message = loginHelper.getUserName(edtEmail.getText().toString(), 
edtPassword.getText().toString());

                    if (message.equals("0") || message == "0") {
                        message = "No such Users";
                        Toast.makeText(MainActivity.this, message, Toast.LENGTH_LONG).show();
                    } else {
                        Intent intent = new Intent(getBaseContext(), Home.class);
                        intent.putExtra("username", message);
                        startActivity(intent);
                        finish();
                    }

                } catch (Exception ex) {
                    Toast.makeText(MainActivity.this, ex.getMessage().toString(), 
Toast.LENGTH_LONG).show();
                }
            }
        });
    }

    @Override
    protected void onResume() {
        super.onResume();
        if (anim != null && !anim.isRunning())
            anim.start();
    }

    @Override
    protected void onPause() {
        super.onPause();
        if (anim != null && anim.isRunning())
            anim.stop();
    }
}

The Button click event, passes the data to database class to check if the user exists in our Android SQLite database. It will pass the username if the user is found to the next class using Android Intent.

Create a new class file with name Home.java and edit it as following :

Home.java:

package com.parallelcodes.wowlogin;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;
import android.widget.Toast;

/**
 * Created by H on 1/26/2018.
 */
public class Home extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.home);

        TextView lblUserId = (TextView) findViewById(R.id.lblUserId);

        try {
            lblUserId.setText("Welcome " + getIntent().getStringExtra("username"));
        } catch (Exception ex) {
            Toast.makeText(Home.this, ex.getMessage().toString(), Toast.LENGTH_LONG).show();
        }
    }
}

And finally our Android Manifest file:

AndroidManifest.xml :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.parallelcodes.wowlogin">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:screenOrientation="portrait"
            android:theme="@style/AppTheme1.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".Home"
            android:label="@string/app_name"
            android:screenOrientation="portrait"
            android:theme="@style/AppTheme1.NoActionBar"/>
    </application>

</manifest>

Below is the video showing our Application final look and working.

Happy Coding 🙂 Please share if found helpful.