Thu. Dec 9th, 2021
Layouts in Android Studio - Which ones should we use?

What are layouts in Android Studio?

When you begin a brand new undertaking, by default Android Studio will make your app equip itself with a relative structure [Android Studio version 2.3 and above has the default layout set to Constraint Layout]. You can very nicely construct an app with out utilizing different layouts in Android Studio. But you’ll have to prepare your components on the app in such a manner that it suits all screens. This can get all tedious. A option to cope with these design issues is by utilizing the opposite extra useful layouts.

You’ll come throughout various kinds of layouts in your palette. Today we’ll study it.


What will you study?

  1. Constraint Layout
  2. Grid Layout
  3. Frame Layout
  4. Linear Layout

What is a Constraint Layout?

Constraint means a restriction or a limitation.

Using this, we can add components from the palette on the display and add restrictions to every of its sides. With these constraints, we can specify the gap of every factor from the border or one another. So it doesn’t matter what the dimensions of the system, or its orientation, the positioning of components will probably be elegant at finest.

How to make use of a Constraint Layout in Android Studio?

Before we can use the ConstraintLayout, we have so as to add a dependency.

What precisely is a dependency? We can embrace exterior libraries in our undertaking. Constraint Layout is a brand new addition to Android Studio. That’s why to implement it, we have so as to add a dependency in our undertaking.

In your Gradle Scripts, discover a file ‘build.gradle(Module: app).’ In that file, you could find all of the dependencies. Add the next code to it.

Remember, the ‘dependencies’ block should exist already. Just add the code in the prevailing ‘dependencies.’

Now we are set! There are two methods to make use of a constraint structure.

Drag and drop methodology:

Using the palette, drag and drop the ‘ConstraintLayout’ discovered below the ‘Layouts’ header in your app display. You can use the edges of the structure to regulate the dimensions of the structure. Whether you need it to occupy the complete display or not, is completely as much as you. Within these edges, any merchandise dropped will adhere to the restrictions positioned on its edges.

Here’s what occurs whenever you add a element in this structure.

This is how a standard element would seem like. It consists of three issues: the Size Rehandle, the Side Constraint Handle, and the Baseline Handle.

Size Rehandle: Using the mouse, this deal with adjusts the peak and width of the element.

Side Constraint Handle: Click on this deal with and drag it to the sting of the ‘ConstraintLayout’ that you simply had dropped earlier, or drag it to every other element contained in the Layout to set a constraint on this element. This deal with is what makes the ConstraintLayout completely different from others.

Baseline Handle: The baseline constraint permits us to align the baseline of a number of textual content views, no matter their textual content sizes. This will be set in the structure editor by dragging the baseline anchor of the specified TextView to the baseline of one other TextView.

To set the worth of the margin of every of the constraints of the elements, spotlight the element in the Layout Editor. This will convey up a ‘Properties’ tab on the proper-hand facet. Here, by clicking on the values, you’ll be capable of modify it (proven under).

layouts in Android Studio

Directly writing the code:

The different methodology includes instantly writing the code in the ‘text’ tab of the ‘activity_main.xml’ file. This methodology is completed fairly sometimes, nevertheless it all the time helps out when it is advisable to copy/paste code off of the web. The code for the above structure will be discovered under.

That is loads of code for too little work. That’s why the structure editor is preferable.

What is a Grid Layout?

As the identify suggests, the grid structure helps us to align elements on the structure in a grid. Imagine a chessboard with all of the items scattered round. We could make the precise structure sample in our app and with none problem. A easy drag-and-drop performance will assist us in setting our structure.

The most typical utility that makes use of a grid structure is the Calculator. All the buttons are set in a grid, and a few buttons even take the area of two cells. We will design a easy structure to clear the fundamentals.

How to make use of the Grid Layout in Android Studio?

Grid Layout has been round for a very long time, so all its libraries are already packed in Android Studio. This means we don’t want so as to add any exterior dependencies like in the case of Constraint Layout. If you’re testing out the Grid Layout in the identical undertaking you used to check out Constraint Layout, you possibly can even delete that dependency you had earlier included.

Like with all different Layouts, there are two strategies to make use of the grid structure.

Drag and drop methodology

Using the palette, drag and drop the ‘GridLayout’ discovered below the ‘Layouts’ header in your app display. Just like with ConstraintLayout, you possibly can modify the width and peak of the structure.

Inside this structure, you possibly can drop textual content views, textual content fields, buttons, and just about any helpful element. But earlier than dropping, a grid will seem on the structure, and you may drop the element in the situation you need it to.

Common problems with the elements not showing on the grid will be solved by first checking the element tree. You have to verify all the weather are contained in the GridLayout. Like this:

Clicking on particular person components will convey up their properties on the proper-hand facet. The most used properties are given under.

Property Description
id Unique Identifier
layout_column Column quantity ranging from 0
layout_row Row quantity ranging from 0
layout_columnSpan To specify extra columns to a element
layout_rowSpan To specify extra rows to a element
gravity In case the cell area allotted is increased than the element, gravity can be utilized to specify the place of the elements (prime, backside, heart, left, proper, and so forth.).

layouts in Android Studio

Writing in the code

In the design tab of the .xml file, inserting this code will give us the structure proven above.

In the above code, The relative structure is the dad or mum of the grid structure. But since relative structure doesn’t have every other kids, then the difficult hierarchy of ‘Relative Layout > Grid Layout’ will be prevented by utilizing Grid Layout as a substitute of Relative structure.

What is a Frame Layout in Android Studio?

According to Android Developers, FrameLayout is outlined as this. “Frame Layout is designed to block out an area on the screen to display a single item. Generally, FrameLayout should be used to hold a single child view because it can be difficult to organize child views in a way that’s scalable to different screen sizes without the children overlapping each other”.

What this typically means is that the structure is fastened on the display in a single view. We can add components on prime of this view, and by utilizing the gravity property, we can assign the place to every of those components. A visible assist is helpful in understanding the idea of Frame Layout totally.

layouts in Android Studio

In the above picture, the black body is the body structure, and in colours, you could find 4 completely different elements. The gravity settings of every of these elements seem like this:

  • Component 1 – Top Left
  • Component 2 – Top proper
  • Component 3 – Bottom left
  • Component 4 – Bottom proper

How to make use of the Frame Layout in Android Studio?

Now that we have had a number of coding bits accomplished, we can begin being extra environment friendly. Instead of dragging and dropping the FrameLayout from the palette on to the structure editor, head over to the Text tab of the ‘activity_main.xml’ file. By default, you should see a RelativeLayout block over there. Like this:

You simply must change ‘RelativeLayout’ with ‘FrameLayout.’ Now your dad or mum structure is itself a Frame Layout.

Take a take a look at what we can do with Frame Layouts.

layouts in Android Studio

On all display sizes, on each portrait and panorama orientation, the positioning of every factor would be the identical, in the nook. The code for the above structure will be discovered under.

What are Linear Layouts in Android Studio?

This is by far the simplest-to-use structure. The better part about this structure is that all the things seems to be organized, and it takes the least time to use. Because of its excessive effectivity, I’ll be utilizing a LinearLayout for almost all of my future tutorials. Take a take a look at the interface under.

layouts in Android Studio

Just drag and drop the linear structure from the palette on to the structure editor. Before that, make it possible for the dropped linear structure is a baby of an present structure, whether or not it’s a RelativeLayout, FrameLayout, or anything. The most most popular dad or mum is RelativeLayout.

That’s it. Now drop in your textual content fields, textual content views, buttons, and no matter is required. Everything is layered superbly. The code for the design above is proven under.

Time to construct the above is lower than a minute.

Now that we have realized the necessities of designing Android Applications, we’ll bounce straight into the performance of those apps.

Do a fast bounce from right here and carry out these simple to observe articles

Use Intent in Android Studio to start out a brand new exercise

Simple Calculator in Android Studio with supply code

Weight Conversion app utilizing Math Operators in Android Studio

Play sound in Android Studio – MediaPlayer instance with MP3

How so as to add video in Android Studio?

By admin