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,

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).

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.

Examples.

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:

Examples.

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.

Examples.

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

Examples.

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,

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

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" />

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 🎊 " />

• 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...

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

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>

That's all for today!

References:

• ImageSource
• Google's Udacity Course

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,

What to Learn to get started with Android App Development?

ROHIT KUMAR ・ Jul 12 '21

#beginners #android #kotlin #java

Thank You! 😊

You can follow me on
Linkedin
Twitter