Loading...

Instagram Style Android Login Screen XML UI Design

Nowadays many android applications have login and registration screen. Everyone loves a beautiful login screen and mostly login screen is shown first, first impression about app is very important so we should design beautiful user friendly interface for login or registration screen.

In this tutorial, you will learn to create beautiful login and signup screen like Instagram android application using material design support library. You might have seen some apps used facebook, twitter, google/gmail, etc for login or registration, for that you need to integrate their SDK in your app.

Related:
Android XML Animations Examples
Chat/Messaging App XML UI Design for Android
Android Fragments Tutorial with Example


Android Material Design Tutorial: Instagram Style Login Screen XML UI Design


Instagram Style Android Login Screen XML UI Design


Let’s start by creating new android project called Instagram Login Screen and with package name: com.viralandroid.instagramloginscreen. Open your app build.gradle file and add android design support library dependencies. Your build.gradle file will looks like this:

Build.gradle

Modify Your Styles.xml File

Open styles.xml file and change app theme to Theme.AppCompat.Light.NoActionBar. Your app styles.xml file looks like below.

Styles.xml


Gradient Background

To make gradient background, create a new xml file in drawable directory called gradient_background.xml and gradient with angle, startColor, endColor, and type attributes inside
Instagram Style Login Screen XML Code

Create a new XML layout file called login_screen_layout.xml inside layout directory and add ImageView, TextInputLayout, EditText, TextView and Button inside LinearLayout. Don’t forget to add android:background attributes with @drawable/gradient_background in your root layout (LinearLayout). Editext contain different attributes like layout_width, layout_height, backgroundTint, drawableleft, hint, inputeType, textColor, textSize. All code of XML layout file will look like below.

res/layout/login_screen_layout.xml


Login Screen Java Activity File

This is the java code of LoginActivity.java file where we add setContentView to login_acreen_layout.

src/LoginActivity.java


MainActivity.java and activity_main.xml File

Open your activity_main.xml file and add a Button with an id, layout_width, layout_height, text attributes. XML layout file will look like below.

res/layout/activity_main.xml

And java activity file will look like below.

src/MainActivity.java


AndroidManifest.xml File

Android manifest file will look like below:

AndroidManifest.xml

Colors.xml file


Instagram Style Android Login Screen XML UI Design


We have created beautiful android login screen with material design like Instagram app. Now you can run by clicking Run button which looks like above screenshots.
XML 664258899111089242
Home item