27. Jul 2021Android

Basic layouts in Android applications

Every user interface element on the device screen has some relative position to its surroundings. To position our views we use ViewGroups and their combinations. Read about the most used ViewGroups used to develop user interface for Android apps.

Tomáš ParonaiAndroid Developer

Linear Layout

LinearLayout is one of the most used ViewGroups. This container places views next to each other vertically or horizontally. The orientation must be defined by attribute android:orientation and it can be vertical or horizontal.

illustration of Liner Layout

Relative Layout

RelativeLayout places views relative to each other or the parent itself. For example, we can define that the title is below the image and it is aligned right to the parent. When should you use RelativeLayout? If we had more LinearLayouts nested in each other, we could recreate the same layout composition by using only one RelativeLayout.

illustration of Relative Layout

Constraint Layout

ConstraintLayout is similar to RelativeLayout. All its content has to have some position related to its siblings or to the parent itself. With the help of ConstraintLayout, we can define complex user interfaces without the usage of more nested ViewGroups. Besides flat view hierarchy definition, this ViewGroup is flexible enough to cover all screen sizes.

illustration of Constraint Layout

Motion Layout

MotionLayout is an extension of ConstraintLayout. With help of the MotionLayout, you can define view animations on the screen. Do you want a TextView to slide from the bottom of the screen to the middle on a button click? No problem, you just need to define starting and end position relationships of the TextView. Starting the animation can be embedded to a button directly or you can start it from your code. There is no need to create animation variables and do calculations in your code. MotionLayout handles all these on its own.

Frame Layout

FrameLayout is the simplest ViewGroup. It does not have any special power like RelativeLayout or ConstraintLayout. It places its content on top of each other.

illustration of Frame Layout

ScrollView

If you have a defined layout that takes up more space than you can display on your screen, you can nest it in a ScrollView which then makes it scrollable.

WebView

WebView is a special ViewGroup, in which you do not define standard Android UI elements, but instead, you load a URL. Do you want to display Google in your app, you just need to load it in your code webview.loadUrl("www.google.com").

illustration of WebView

ListView

ListView with its content positioning may look like LinearLayout. If we would place more content in a LinearLayout than we can draw on the screen, we could not scroll to it. However you can put the LinearLayout inside a ScrollView which would enable us to scroll the content, but if you have dynamic content it can be a lot of work to inflate and put those views inside a LinearLayout. For this purpose, we have an interface called Adapter. This interface is used by a ListView. Inflating views inside a ListView is already done by the Adapter, Android SDK developers already took care of that.

illustration of List View

RecyclerView

RecyclerView is almost the same as ListView. One of the major differences is performance. If you would use a ListView to display 100 users, then all of the 100 users would be drawn. Even those which are not visible on screen yet. For each view displaying a user, there is a memory being allocated and CPU calculations done to measure the views. When using large sets of data, the necessity of this heavy resource is visible for the user during app usage. RecyclerView only inflates and draws as many views as it can fit on the screen. If you start scrolling, it will reuse already created views with new data (hence the name RecyclerView).

Tomáš ParonaiAndroid Developer