What are layouts in Android Studio?
When you start a new project, by default Android Studio will make your app equip itself with a relative layout [Android Studio version 2.3 and above has the default layout set to Constraint Layout]. You can very well build an app without using other layouts. But you’ll have to organize your elements on the app in such a way that it fits all screens. This can get all tedious. A way to deal with these design problems is by using the other more helpful layouts.
You’ll come across different types of layouts on your palette. Today we’ll learn about it.
What will you learn?
- Constraint Layout
- Grid Layout
- Frame Layout
- Linear Layout
What is a Constraint Layout?
Constraint means a restriction or a limitation.
Using this we can add elements from the palette on the screen and add restrictions to each of its sides. With these constraints, we can specify the distance of each element from the border or from each other. So no matter what the size of the device, or its orientation, the positioning of elements will be elegant at best.
How to use a Constraint Layout in Android Studio?
Before we can use the ConstraintLayout we have to add a dependency.
What exactly is a dependency? We can include external libraries in our project. Constraint Layout is a new addition to Android Studio. That’s why to implement it we have to add a dependency in our project.
In your Gradle Scripts, find a file ‘build.gradle(Module: app)‘. In that file, you can find all the dependencies. Add the following code to it.
Remember, the ‘dependencies’ block should already exist. Just add the code in the existing ‘dependencies’.
Now we are set! There are two ways to use a constraint layout.
Drag and drop method:
Using the palette, drag and drop the ‘ConstraintLayout’ found under the ‘Layouts’ header on your app screen. You can use the edges of the layout to adjust the size of the layout. Whether you want it to occupy the full screen or not, is totally up to you. Within these edges, any item dropped will adhere to the restrictions placed on its edges.
Here’s what happens when you add a component in this layout.
This is how a normal component would look like. It consists of three things. The Size Rehandle, the Side Constraint Handle, and the Baseline Handle.
Size Rehandle: Using the mouse, this handle adjusts the height and width of the component.
Side Constraint Handle: Click on this handle and drag it to the edge of the ‘ConstraintLayout’ that you had dropped earlier, or drag it to any other component inside the Layout to set a constraint on this component. This handle is what makes the ConstraintLayout different from others.
Baseline Handle: The baseline constraint allows us to align the baseline of multiple text views, regardless of their text sizes. This can be set in the layout editor by dragging the baseline anchor of the desired TextView to the baseline of another TextView.
To set the value of the margin of each of the components constraints, highlight the component in the Layout Editor. This will bring up a ‘Properties’ tab on the right-hand side. Here, by clicking on the values, you’ll be able to adjust it (shown below).
Directly writing the code:
The other method involves directly writing the code in the ‘text’ tab of the ‘activity_main.xml’ file. This method is done quite occasionally but it always helps out when you need to copy/paste code off of the internet. The code for the above layout can be found below.
That is a lot of code for too little work. That’s why the layout editor is more preferable.
What is a Grid Layout?
As the name suggests, the grid layout helps us to align components on the layout in a grid. Imagine a chessboard with all the pieces scattered around. We can make the exact layout pattern in our app and without any difficulty. A simple drag-and-drop functionality will help us in setting our layout.
The most common application that uses a grid layout is the Calculator. All the buttons are set in a grid, some buttons even take the space of two cells. We will design a simple layout to clear the basics.
How to use the Grid Layout in Android Studio?
Grid Layout has been around for a long time so all its libraries are already packed in Android Studio. This means we don’t need to add any external dependencies like in the case of Constraint Layout. If you are testing out the Grid Layout in the same project you used to test out Constraint Layout, you can even delete that dependency you had earlier included.
Like with all other Layouts, there are two methods to use the grid layout.
Drag and drop method
Using the palette, drag and drop the ‘GridLayout’ found under the ‘Layouts’ header on your app screen. Just like with ConstraintLayout, you can adjust the width and height of the layout.
Inside this layout, you can drop text views, text fields, buttons and pretty much any useful component. But before dropping, a grid will appear on the layout and you can drop the component in the location you want it to.
Common issues of the components not appearing on the grid can be solved by first checking the component tree. You have to make sure all the elements are inside the GridLayout. Like this:
Clicking on individual elements will bring up their properties on the right-hand side. The most used properties are given below.
|layout_column||Column number starting from 0|
|layout_row||Row number starting from 0|
|layout_columnSpan||To specify more columns to a component|
|layout_rowSpan||To specify more rows to a component|
|gravity||Incase the cell space allotted is higher than the component, gravity can be used to specify the components position (top, bottom, center, left, right etc.).|
Writing in the code
In the design tab of the .xml file, inserting this code will give us the layout shown above.
In the above code, The relative layout is the parent of grid layout. But since relative layout doesn’t have any other children then the complicated hierarchy of ‘Relative Layout > Grid Layout’ can be avoided by using Grid Layout instead of Relative layout.
What is a Frame Layout in Android Studio?
According to Android Developers, FrameLayout is defined like 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 generally means is that the layout is fixed on the screen in a single view. We can add elements on top of this view and by using the gravity property we can assign the position to each of these elements. A visual aid is really helpful to fully understand the concept of Frame Layout.
In the above image, the black frame is the frame layout and in colors, you can find four different components. The gravity settings of each of those components look like this:
- Component 1 – Top Left
- Component 2 – Top right
- Component 3 – Bottom left
- Component 4 – Bottom right
How to use the Frame Layout in Android Studio?
Now that we have had a few coding bits done, we can start being more efficient. Instead of dragging and dropping the FrameLayout from the palette on to the layout 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 just have to replace ‘RelativeLayout’ with ‘FrameLayout’. Now your parent layout is itself a Frame Layout.
Take a look at what we can do with Frame Layouts.
On all screen sizes, on both portrait and landscape orientation, the positioning of each element will be the same, in the corner. The code for the above layout can be found below.
What is a Linear Layout ( horizontal and vertical ) in Android Studio?
This is by far the easiest-to-use layout. The best part about this layout is that everything looks organized and it takes the least time to apply. Because of its high efficiency, I’ll be using a LinearLayout for the majority of my future tutorials. Take a look at the interface below.
Just drag and drop the linear layout from the palette on to the layout editor. Before that make sure that the dropped linear layout is a child of an existing layout, whether it’s a RelativeLayout, FrameLayout or anything else. The most preferred parent is RelativeLayout.
That’s it. Now drop in your text fields, text views, buttons and whatever is needed. Everything is layered beautifully. The code for the design above is shown below.
Time to build the above is less than a minute.
Now that we have learned the essentials of designing Android Applications, we’ll jump straight into the functionality of these apps.