Skip to content
Related Articles

Related Articles

Improve Article

How to Create Instagram Login UI using Android Studio?

  • Last Updated : 18 Jul, 2021

Hello geeks, nowadays social media android applications are in very trend so, here we are going to design Login page of Instagram in Android Studio. Using this beginners can build some awesome UI in their own applications.

What we are going to build in this article?

In this article, we will be designing a login page for Instagram. For this we will be using the logo of Instagram, EditText for the username or email of the user, Password field for the password, Button to login, and an option to sign in with Facebook. A sample image is provided below to get an idea about what we are going to build in this article.

Create Instagram Login UI using Android Studio

Step by Step Implementation

Step 1: Creating a new project

  • Open a new project.
  • We will be working on Empty Activity with language as Java/Kotlin. Leave all other options unchanged.
  • You can change the name of the project at your convenience.
  • There will be two default files named activity_main.xml and MainActivity.java.

If you don’t know how to create a new project in Android Studio then you can refer to How to Create/Start a New Project in Android Studio? 



Step 2: Adding vector assets to drawable

Add the following vector assets and name them according to your choice.

Note: If you do not know how to add vector assets in android studio, then use the following article: How to Add Vector Assets in Android Studio?

Step 3: Adding a new resource file to drawable

Right click on drawable > new > Drawable Resource File > Name the file as “background_edit_text” > Ok. After following the above steps use the below code in background_edit_text.xml file:

XML




<?xml version="1.0" encoding="utf-8"?>
<shape
    android:shape="rectangle">
    
    <solid android:color="#fafafa"/>
    <stroke android:color="#e7e7e7"
        android:width="1dp"/>
    <corners android:radius="4dp"/>
  
</shape>

Step 4: Navigate to app > res > values > strings.xml and use the below-provided code in it



XML




<resources>
    <string name="app_name">Instagram_login_page_UI</string>
  
    <!-- string for showing the text "Forgot your login details-->
    <string name="forgot"><font color='c4c4c4'>Forgot your login details? </font><b>Get help logging in.</b></string>
      
    <!-- string to show the text " Dont have an account-->
    <string name="sign_up"><font color='c4c4c4'>Dont have an account? </font><b>Sign up.</b></string>
</resources>

Step 5: Working with activity_main.xml file

Navigate to app > res > layout > activity_main.xml and use the following code in it.

XML




<?xml version="1.0" encoding="utf-8"?>
<!-- Relative layout as parent layout-->
<RelativeLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
  <!-- Text view to display the 
       text "English (India)" at
       uppermost part of the page-->
   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="English (India)"
       android:textSize="14sp"
       android:textColor="#c4c4c4"
       android:layout_marginTop="6dp"
       android:layout_centerHorizontal="true"
       android:drawableRight="@drawable/ic_baseline_keyboard_arrow_down_24"/>
  
    <!-- Linear layout to contain all the 
         editText, password , logo and button-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:gravity="center"
        android:paddingStart="28dp"
        android:paddingEnd="28dp"
        android:layout_centerInParent="true">
  
        <!-- Imageview displaying the logo 
                or name of the application-->
        <ImageView
            android:layout_width="147dp"
            android:layout_height="82dp"
            android:adjustViewBounds="true"
            android:src="@drawable/logo" />
  
        <!-- Edit text provided to user to 
             enter email, username or phone no.-->
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:padding="12dp"
            android:singleLine="true"
            android:layout_marginTop="22dp"
            android:hint="Phone number, email or username"
            android:background="@drawable/background_edit_text"/>
        
        <!-- Edit text provided to write
              password (according to instagram UI)-->
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:padding="12dp"
            android:singleLine="true"
            android:layout_marginTop="16dp"
            android:hint="Password"
            android:background="@drawable/background_edit_text"
            android:drawableRight="@drawable/ic_baseline_remove_red_eye_24"/>
          
          <!-- material button is used to display the "Login" button to user-->
        <com.google.android.material.button.MaterialButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Log In"
            android:textAllCaps="false"
            android:textColor="@color/white"
            android:padding="12dp"
            android:layout_marginTop="18dp"
            android:backgroundTint="#3897f0"
            app:cornerRadius="4dp"/>
        
       <!-- Text view displaying the text
             "Forgot your login details?"-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/forgot"
            android:textSize="12sp"
            android:layout_marginTop="8dp"/>
  
        <!-- Linear layout to display the messgae 
             OR using view so that it can be shown seperetly-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="12sp"
            android:layout_gravity="center_vertical">
  
            <!-- to occupy the rectangular area in left side
                   so that message can be displayed in center-->
            <View
                android:layout_width="0dp"
                android:layout_height="1.5dp"
                android:layout_weight="1"
                android:background="#e2e2e2"/>
            
              <!-- textview displaying the message "OR"-->
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="OR"
                android:textSize="14sp"
                android:textStyle="bold"
                android:textColor="#9a9a9a"
                android:layout_marginStart="8dp"
                android:layout_marginEnd="8dp"/>
  
            <!-- to occupy the rectangular area in right 
                 side so that message can be displayed in center-->
            <View
                android:layout_width="0dp"
                android:layout_height="1.5dp"
                android:layout_weight="1"
                android:background="#e2e2e2"/>
  
        </LinearLayout>
  
        <!-- text view to display the
              message "Log in with Facebook-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:gravity="center"
            android:padding="4dp"
            android:text="Log in with Facebook"
            android:textColor="#3897f0"
            android:textSize="15sp"
            android:textStyle="bold"/>
    </LinearLayout>
    
    <View
        android:layout_width="match_parent"
        android:layout_height="1.5dp"
        android:background="#e2e2e2"
        android:layout_marginBottom="8dp"/>
    
    <!-- text view to show the message
          "Dont have an account?Sign up-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/sign_up"
        android:text="@string/sign_up"
        android:textSize="12sp"
        android:textAlignment="center"
        android:layout_marginBottom="14dp"
        android:layout_alignParentBottom="true"
        android:gravity="center_horizontal" />
    
</RelativeLayout>

Congratulations! we have successfully created the UI of the Login page of Instagram. Now run the app and see the output of the code below. To Build and Run the App you can press shift + f10 in windows and Ctrl + R in Mac.

Output UI:

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :