Android Instagram like Login screen Programmatically. Android Awesome Login Screen Design Programmatically. android instagram design login screen:
For some days I was wondering about Instagram Login UI design and how to achieve this UI design. This post from github by Taishi-Y helped me a lot, in fact the whole design is made possible because of this and I have tweaked some codes and added some fonts to this. The post was only about background but I added Instagram like Textbox using photoshop and also Fonts from 1001Fonts.com for achieving the Logo font. So Let’s get started and create an awesome looking Android Login UI.
Create a fresh Project in Android Studio with your desired project name. I named this as “Wow Login” with package name : com.parallelcodes.wowlogin
This is going to be a lengthy post so please guys bear with me.
Under your res folder create a new folder named drawable. Create files with below name :
res > drawable files :
1. animation_list.xml :
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/color1"
android:duration="4000" />
<item
android:drawable="@drawable/color2"
android:duration="4000" />
<item
android:drawable="@drawable/color3"
android:duration="4000" />
<item
android:drawable="@drawable/color4"
android:duration="4000" />
<item
android:drawable="@drawable/color5"
android:duration="4000" />
</animation-list>
This file will contain mapping for the drawable files with color gradient property, with the duration for each file. You can change the duration by changing the android:duration property. Also you can remove or add your own file.
2. color1.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#f4a73d"
android:endColor="#e43544"
android:angle="0"/>
</shape>
This file will generate gradient pattern and this is mapped in the animation_list.xml file. startColor and endColor specifies the same.
3. color2.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#ef5531"
android:endColor="#bd256e"
android:angle="45"/>
</shape>
4. color3.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#dc2a4e"
android:endColor="#a41a89"
android:angle="90"/>
</shape>
5. color4.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#e3114d"
android:endColor="#bc0d82"
android:angle="135"/>
</shape>
6. color5.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#d6145a"
android:endColor="#6c1fc7"
android:angle="180"/>
</shape>
7. button.xml :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:state_enabled="false"
android:drawable="@drawable/button_disabled" />
<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="@drawable/button_pressed" />
<item
android:state_focused="true"
android:state_enabled="true"
android:drawable="@drawable/button_enabled" />
<item
android:state_enabled="true"
android:drawable="@drawable/button_enabled" />
</selector>
This drawable file specifies the property for button on its present state like enabled, disabled and pressed. And again this is mapped.
8. button_disabled.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#abe9e9e9"/>
<padding android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
<stroke
android:width="1dip"
android:color="#000" />
<corners android:radius= "2dp" />
</shape>
9. button_enabled.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#fff"/>
<padding android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
<stroke
android:width="1dip"
android:color="#fff" />
<corners android:radius= "2dp" />
</shape>
10. button_pressed.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#abe9e9e9"/>
<padding android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
<stroke
android:width="1dip"
android:color="#abe9e9e9" />
<corners android:radius= "2dp" />
</shape>
11. edittext.png :
android instagram design login screen buttton background
Above is a button image. It is barely visible as it is semi transparent. Just save it as edittext.png
Okay. So we have created our base drawable resources. Now create activity_main.xml under your res > layout folder.
res > layout > activity_main.xml :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/animation_list"
android:orientation="vertical"
android:padding="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical">
<TextView
android:id="@+id/lblHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="10dp"
android:gravity="center_horizontal"
android:padding="20dp"
android:text="Wow Login"
android:textColor="#fff"
android:textSize="36sp"
android:textStyle="bold" />
<EditText
android:id="@+id/edtEmail"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:adjustViewBounds="true"
android:alpha="0.7"
android:background="@drawable/edittext"
android:hint="Email"
android:padding="10dp"
android:textColor="#fff"
android:textColorHint="#fff" />
<EditText
android:id="@+id/edtPassword"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:adjustViewBounds="true"
android:alpha="0.7"
android:background="@drawable/edittext"
android:hint="Password"
android:inputType="textPassword"
android:padding="10dp"
android:textColor="#fff"
android:textColorHint="#fff" />
<Button
android:id="@+id/btnLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="@drawable/button"
android:text="Log In"
android:textColor="#000" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_margin="15dp"
android:gravity="center_horizontal"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Forgot your login details?"
android:textColor="#fff"
android:textSize="12sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Get help signing in."
android:textColor="#fff"
android:textSize="12sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
And create a class file (java file) MainActivity.java with below code :
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);
}
@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();
}
}
AndroidManifest.xml file :
<?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>
This will give you the below design.
To create the SQLite database and also create a successful login app, please visit the next page on :
Android Creating Login with SQLite database.
Pingback: Android Instagram like Login screen with SQLite • ParallelCodes();
Pingback: Android making Material Design Login Screen • ParallelCodes();