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); } }