In this tutorial you will find examples related to RelativeLayout.

Example 1: Design Login Layout

This example project will teach you the following concepts:

  1. How to design a Login screen using RelativeLayout, EditTexts and Button.
  2. How to design a layout in XML.

Here are the demo screenshots:

Login Screen Example
Login Screen Example

Step 1: Create Project

The first step is to create a Android Project in Android Studio.

Step 2: Add Dependencies

No special dependencies are needed for this project.

Step 3: Design Layouts

Design the layout for the MainActivity by placing a button and two editTexts inside a relativelayout:

<?xml version="1.0" encoding="UTF-8"?>

    <RelativeLayout
    android:background="@color/greenplusblue"
    tools:context=".MainActivity"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:id="@+id/activity_main"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <EditText
        android:background="@android:color/white"
        android:layout_height="30dp"
        android:layout_width="match_parent"
        android:id="@+id/editText2"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:textColorHint="@color/lightgrey"
        android:hint="Email"
        android:layout_above="@+id/editText3"
        android:textColor="@android:color/background_dark"
        android:ems="10"
        android:inputType="textEmailAddress"/>

    <EditText
        android:background="@android:color/white"
        android:layout_height="30dp"
        android:layout_width="match_parent"
        android:id="@+id/editText3"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_marginTop="10dp"
        android:textColorHint="@color/lightgrey"
        android:hint="Password"
        android:layout_above="@+id/button"
        android:ems="10"
        android:inputType="textPassword"
        android:selectAllOnFocus="false"
        android:layout_marginBottom="22dp"/>

    <Button
        android:background="@color/lightgrey"
        android:layout_height="30dp"
        android:layout_width="match_parent"
        android:id="@+id/button"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="LOGIN"/>

    <TextView
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:id="@+id/textView"
        android:text="Not a member?Sign up now"
        android:layout_marginStart="98dp"
        android:layout_marginLeft="98dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/button"
        android:layout_marginTop="25dp"/>

</RelativeLayout>

Step : Write Code

Here is the code the MainActivity:

public class MainActivity extends AppCompatActivity {

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

Run

Copy the code into your project or download the code in the reference links below.

Reference

Find the reference links below:

Number Link
1. Download code
2. Follow code author