Android Basics: Using Relative layout

Android Basics: Using Relative layout:

In this article,

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

The entire content is inspired by ,
Google’s udacity course Android Basics: User Interface. Its 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 type of attributes make the view to be fixed to any side of the parent view.
Its attributes has two values either true or false boolean value .

XML Attributes	Description
android:layout_alignParentBottom	If true, makes 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, makes the left edge of this view match the left edge of the parent.
android:layout_alignParentRight	If true, makes the right edge of this view match the right edge of the parent.
android:layout_alignParentStart	If true, makes the start edge of this view match the start edge of the parent.
android:layout_alignParentTop	If true, makes the top edge of this view match the top edge of the parent

Examples.

2️⃣Center relative to Parent View

Its attributes has 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.

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 an attributes android:id .
Now these attributes value is the same ID that refer to the 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.

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

Now,

We will make a Birthday Card app which will basically a non-interactive app 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 its clear that ,

We will be using 2 TextView , 1 ImageView as, we see there is image in background at on the image there Text written at two different place .

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 textview as they are positioned.

Overlapping View

In Relative Layout ,View overlapping and stack up from top to down manner

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

Positioning the TextView

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

• HAPPY BIRTHDAY TextView will by default will be placed at ** top right corner** we don’t need to add any layout parameter to position view
• ROHIT.K TextView its needed to be positioned at the bottom-right corner we will use two attributes as shown above and make that value to 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, layout would look like this…

Step 3: Style the Views

We need to add or change some more attributes ,to add some style and good more better.
So add style , to make the UI more beautiful and 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 of the TextView
• And best is to also add padding or margin so that make 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 more better and give aesthetic look
Its totally depend upon what you will add

THIS the Image of our app how it will look like after writing these in XML

Code to write in activity_main.xml inside android studios
located inside res folder

That’s all for today!

References:

• ImageSource
• Google’s Udacity Course

from Tumblr https://stupendoustaletheorist.tumblr.com/post/658935294481006592