Android program to design a login screen using Relative Layout

Android program to design a login screen using Relative Layout

In Android, Relative Layout is a ViewGroup that enables us to display child View elements in relative positions(i.e. how child views are positioned with relative to one another). It is a powerful utility for designing the UI as it helps to replace several nested Linear Layouts with use of only a single Relative Layout. Before I move on to the code, I will be giving you some important attributes which you frequently use while implementing the Relative Layout.

Important Attributes

Below there is simple code which will show the working of Relative Layout by designing a Login Screen . You just need to add this xml code below there will be no code added for the MainActivity except for setConetentView which is added by default when you create your app if you are using Android Studio.

Steps to create the application:- 

  •  Open Android Studio and create a new Android application and name it as “LoginScreen” and company domain as codedost so your package will be automatically set.
  • Open an empty activity and name it as MainActivity.
  • Copy the default content of res/layout/activity_main.xml file to include in Relative Layout.
  • Run the application to launch Android emulator or you can run it on your mobile also(which is way faster).

XML File(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/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#00CC99">


    <EditText
        android:id="@+id/text1"
        android:hint="Username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="150dp"
        android:layout_marginLeft="18dp"
        android:layout_marginRight="18dp"
        android:padding="8dp"
        android:background="#fff" />

    <EditText
        android:id="@+id/text2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="18dp"
        android:layout_marginRight="18dp"
        android:padding="8dp"
        android:background="#fff"
        android:hint="Password"
        android:layout_marginTop="12dp"
        android:layout_below="@+id/text1" />

    <Button
        android:id="@+id/b1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Login"
        android:textColor="#00CC99"
        android:layout_below="@+id/text2"
        android:layout_marginTop="17dp"
        android:layout_alignStart="@+id/text2"
        android:layout_alignEnd="@+id/text2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/text3"
        android:textColor="#fff"
        android:text="Not a member?Sign up now"
        android:layout_below="@+id/b1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="34dp" />
</RelativeLayout>

MainActivity.java

package com.codedost.loginscreen;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

 

Output

Share Me!