DEV Community

Cover image for Android Basics: Using Relative layout
ROHIT KUMAR
ROHIT KUMAR

Posted on

Android Basics: Using Relative layout

In this article,

We will make a non-interactive app with just using Relative Layout ViewGroup and no line of extra java code
and also learn along the way about Relative Layout
.

The entire content is inspired by,
Google's udacity course Android Basics: User Interface. It's the first part of the five parts Android Basics Nanodegree Program series, This course is for basics of Android and Java programming .
So I would be writing a blog series and this is my second blog in this series.

UI design of our app would look like this,

Design of the UI

What is Relative Layout❓

A View is a rectangular area on the screen.
A ViewGroup is a big View that can contain smaller Views inside of it. The smaller Views are called the children of the ViewGroup and ViewGroup is called the parent of its children.
Basically, it is used to display more views neatly on the screen.

A RelativeLayout is a common type of ViewGroup that lets us position child views relative to sibling elements (such as to the left-of or below another view) or relative to the parent RelativeLayout area (such as aligned to the bottom, left or center).

relative layout

Positioning Views

By default, all child views are drawn at the top-left of the layout , so you must define the position of each view using the various layout properties available from RelativeLayout.LayoutParams.

RelativeLayout.LayoutParams

The View within the relative layout, uses the value of these Relative layout parameters to determine where to position the view on the screen.
The value for each layout property is either a boolean to enable a layout position relative to the parent RelativeLayout or an ID that references another view in the layout against which the view should be positioned.

The following are the major attributes in RelativeLayout available to its view.
They lay across four different categories:

1️⃣Align by the parent view

These types of attributes make the view be fixed to any side of the parent view.
Its attributes have two values either true or false boolean value.

XML Attributes Description
android:layout_alignParentBottom If true, make the bottom edge of this view match the bottom edge of the parent.
android:layout_alignParentEnd If true, makes the end edge of this view match the end edge of the parent.
android:layout_alignParentLeft If true, make the left edge of this view match the left edge of the parent.
android:layout_alignParentRight If true, make the right edge of this view match the right edge of the parent.
android:layout_alignParentStart If true, make the start edge of this view match the start edge of the parent.
android:layout_alignParentTop If true, make the top edge of this view match the top edge of the parent

Examples.
Align parent

2️⃣Center relative to Parent View

Its attributes have two values either true or false boolean value.
When you want to place your Views in the center relative to the parent, you can use the following 3 attributes:

XML Attributes Description
android:layout_centerHorizontal If true, centers this child horizontally within its parent.
android:layout_centerInParent If true, centers this child horizontally and vertically within its parent.
android:layout_centerVertical If true, centers this child vertically within its parent.

Examples.
Centre parent

3️⃣Relative to Child View

We can position the new views relative to other existing views.
We just need to create the id of the Anchor view(the main child view its position should be fixed ) using the attributes android:id .
Now, these attributes value is the same ID that refers to the anchor view against which the view should be positioned.
For eg.
android:layout_toLeftOf="@id/name_of_anchorView"

Following attributes can be used for doing so.

XML Attributes Description
android:layout_above Positions the bottom edge of this view above the given anchor view ID.
android:layout_below Positions the top edge of this view below the given anchor view ID.
android:layout_toEndOf Positions the start edge of this view to the end of the given anchor view ID.
android:layout_toLeftOf Positions the right edge of this view to the left of the given anchor view ID.
android:layout_toRightOf Positions the left edge of this view to the right of the given anchor view ID.
android:layout_toStartOf Positions the end edge of this view to the start of the given anchor view ID.

Examples.
relative child

4️⃣Align View relative to Child View

If you want to align the new view relative to any existing view, then you can use the following attributes.
Here also these attributes value will be id which refers to anchor View

XML Attributes Description
android:layout_alignBaseline Positions the baseline of this view on the baseline of the given anchor view ID.
android:layout_alignBottom Makes the bottom edge of this view match the bottom edge of the given anchor view ID.
android:layout_alignEnd Makes the end edge of this view match the end edge of the given anchor view ID.
android:layout_alignLeft Makes the left edge of this view match the left edge of the given anchor view ID.
android:layout_alignRight Makes the right edge of this view match the right edge of the given anchor view ID.
android:layout_alignStart Makes the start edge of this view match the start edge of the given anchor view ID.
android:layout_alignTop Makes the top edge of this view match the top edge of the given anchor view ID.

Examples.
Align Child

Now,

We will make a Birthday Card app which will basically be non-interactive i.e. no line of extra java code just an XML code to design the UI of our app, by using Relative Layout.

Whenever ,we write the code of XML Layout ,think of 3 step in mind

Step 1->Select the Views
Step 2->Position the Views
Step 3->Styles the Views

Step 1:Select the View

Before writing the code for the UI, we must design or think about how our layout would look so either make the design or diagram of the UI page, then think about how to make it to code.

Our layout would look like this,

Design of the UI
Looking at the image it's clear that,

We will be using 2 TextView 1 ImageView ss, we see there is an image in the background on the image and their Text written at two different places.

Step 2:Position the Views

Now to choose, which ViewGroup we should use to position the views, as we see two TextView are overlapping over the ImageView hence, Relative Layout is perfect for this situation, help in positioning the two text view as they are positioned.

Overlapping View

In Relative Layout ,the Views overlap and stack up from top to down manner correspondingly as written in XML

overlapping view

Insert an image
  • Save the image in drawable folder and use an attributes android:src to show image
  • Here we should also centre crop to image so that it will scale up the image and encrop it , to make a full bleed image, and give a nice immersive feel, and its width and height to match_parent so that ,image take whole space of the screen size
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/happybirthday" />
Enter fullscreen mode Exit fullscreen mode
Positioning the TextView

Now as we choosed Relative Layout , so think about how to align and position views with respect to other.

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HAPPY BIRTHDAY" />
<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:text="  ROHIT.K 🎊 " />
Enter fullscreen mode Exit fullscreen mode
  • HAPPY BIRTHDAY TextView will by default be placed at top right corner we don't need to add any layout parameter to position view
  • ROHIT.K TextView needed to be positioned at the bottom-right corner we will use two attributes as shown above and make that value be true
  • height and width should be set to wrap_content as we need to be flexible with the amount of text written

Now the with this code, the layout would look like this...
positioning view

Step 3: Style the Views

We need to add or change some more attributes, to add some style and make our UI look better.
So add style, to make the UI more beautiful and for better user experience

  • For styling, we can change the size, front & color of the text, according to the situation.
  • We can also change the color of the background color of the TextView.
  • And best is to also add padding or margin so that makes it more readable & not smushed at the corner.
For making Text Larger

Make the size of text 36sp using attributes,
android:textSize

Setting the Font

Set the Text font to sans-serif-light using attributes,
android:fontFamily

Setting the color

use the attributes android:textColor

Background of textView

for changing background color we will attributes android:background

Add padding and margin

we will use the attributes android:padding and android:layout_marginwe can use either of the both or both as per situation.

Styling depends upon how better we can think, to make our app look better and give an aesthetic look
It totally depends upon the experience and our creativity

THIS Image of our app, how it will look like after writing these codes in XML
app image


Code to write in activity_main.xml inside Android Studio
located inside res folder

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@null"
        android:scaleType="centerCrop"
        android:src="@drawable/happybirthday" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:background="#9E03DAC5"
        android:fontFamily="sans-serif-light"
        android:padding="30dp"
        android:text="HAPPY BIRTHDAY"
        android:textColor="@android:color/white"
        android:textSize="36sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:background="#C8FFFFFF"
        android:fontFamily="sans-serif-light"
        android:padding="10dp"
        android:layout_margin="30dp"
        android:text="  ROHIT.K 🎊 "
        android:textColor="@color/teal_200"
        android:textSize="36sp" />

</RelativeLayout>
Enter fullscreen mode Exit fullscreen mode

That's all for today!

References:

If you liked my content, plz do share
Also if you got any questions or suggestions feel free to comment down below .

If you are thinking of starting an Android Development you can check this blog,

Thank You! 😊

You can follow me on
Linkedin
Twitter

Discussion (6)

Collapse
rash123 profile image
RASHMI VERMA

Great content

Collapse
rohitk570 profile image
ROHIT KUMAR Author

Thanks!

Collapse
vivekksingh2245 profile image
vivekksingh2245

Good 👍

Collapse
rohitk570 profile image
ROHIT KUMAR Author

Thank you very much 😊

Collapse
cenacr007_harsh profile image
KUMAR HARSH

Nice article

Collapse
rohitk570 profile image
ROHIT KUMAR Author

Thanks !