How to Create Twitter Login UI using Android Studio?

Nowadays, android apps are very popular especially social media apps. This Login UI has generally seen in the “Twitter” App. In this article, we will create a Twitter Login UI in Android Studio. Below are the various steps on how to do it. This will help the beginner to build some awesome UI in android by referring to this article.

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Firstly select empty activity then click the next button. Give the name of your app like “Twitter Login UI”. Then select Kotlin/Java as the programming language. In this project, we are using java as the programming language. Then select minimum SDK for example in this project we are using “API16: Android 4.1(Jelly Bean)”. then click on the finish button.

Step 2: Working with the colors.xml file

The colors.xml is an XML file that is used to store the colors for the resources. An Android project contains 3 essential colors namely:

• colorPrimary
• colorPrimaryDark
• colorAccent

Add this code in app > res > values > colors.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#03A9F4</color>
    <color name="purple_500">#2196F3</color>
    <color name="purple_700">#F1f1f1</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="blue">#2196F3</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
</resources>

If you are not getting colorPrimary, colorPrimaryDark, and colorAccent in the colors.xml file. then you can go to the themes.xml file and you can find these colors name in the themes.xml file. These colors are used in some predefined resources of the android studio as well. These colors needed to be set opaque otherwise it could result in some exceptions arising.

Step 3: Working with the themes.xml file

In this file change DarkActionBar to NoActionBar. NoActionBar will remove TittleBar from your app. and if you don’t want to remove TittleBar from your app then leave this as it is. Navigate to app > res > values > themes.xml file.

XML

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TwitterLoginUI" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

Step 4: Working with the drawable file

All the images we add in the drawable file. so, add the Twitter logo in the drawable file. The image used in this project is added to the drawable folder. For navigating the image, Navigate to app > res > drawable. and you will find the image in that folder. 

Step 5: Working with the activity_main.xml file

To create Twitter Login UI we used the following UI component in our XML file:

• ConstraintLayout
• One ImageView
• Six TextView
• Two EditText
• One RelativeLayout 
• One View

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!--Imageview for Twitter logo image-->
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/twitter_logo" />

    <!--Textview to display a message "Log in to twitter"-->
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:text="Log in to Twitter"
        android:textColor="#000000"
        android:textSize="24sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

    <!--Textview to display a message "Phone Number,
        email address, or Username"-->
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="24dp"
        android:text="Phone Number, email address, or Username"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <!--EditText for user name or email address-->
    <EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        android:ems="10"
        android:inputType="text"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <!--Textview to display a message "Password"-->
    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:text="Password"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText" />

    <!--EditText for numberPassword | textWebPassword-->
    <EditText
        android:id="@+id/editText2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        android:ems="10"
        android:inputType="numberPassword|textWebPassword"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />

    <!--Textview to display a message "Sign Up"-->
    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Sign Up"
        android:textColor="@color/purple_500"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!--Textview to display a message "Forgotten your password?"-->
    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="Forgotten your password?"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText2" />

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="56dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_alignParentTop="true"
            android:background="#333" />

        <TextView
            android:id="@+id/textView6"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:background="@drawable/roundtext"
            android:gravity="center_horizontal"
            android:padding="8dp"
            android:paddingLeft="8dp"
            android:paddingRight="8dp"
            android:text="Log in"
            android:textAlignment="center"
            android:textColor="#fff"
            android:textStyle="bold" />
    </RelativeLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Step 6: Working with roundtext.xml file

Go to the app > res > drawable > Right-Click > New > Drawable Resource File and name the file as roundtext. Below is the code for the roundtext.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="16dp"/>
    <solid android:color="@color/blue"/>
</shape>

Step 7: Working with the MainActivity.java file

Since we are not working with the MainActivity.java file so we don’t need to write any code inside the MainActivity.java file. Keep the MainActivity.java file as it is.

Java

package com.example.twitter;

import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

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

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: