This lesson shows how to work with Android layout.
We’ll cover the following
- Layout concept
- Building layout
- Alignment
- Layout binding
- View binding
Layout concept
A layout defines the structure of the user interface. Layouts are built via views and view groups.
Views, sometimes also called “widgets,” represent interactable components such as:
TextView
– component to render textEditText
– input field component where user can type textButton
– clickable text component with background
ViewGroups, sometimes also called “layouts,” represent invisible containers which define the position of its children on the screen. While Android SDK contains a number of view groups, which still can be used, Google not so long ago released a new view group called ConstraintLayout
.

This layout comes as a separate library and uses constraints to position views on the screen. The ConstraintLayout
is more complicated than Android SDK view groups, but it has a rich visual editor to help build the user interface and in most cases has better performance.
While we can create a layout in Java code, it’s easier to build a layout in the XML file and then inflate (bind) this layout to a specific activity.
Building layout
Let’s try to create a layout with the “Hello World” text in the middle of the screen.
First, create a new activity_main.xml layout file inside app/src/main/res/layout folder. As a root layout we are going to use ConstraintLayout
along with some XML attributes:
layout_width="match_parent"
attribute defines the width of the layout, in our case we want to take all the width of the screenandroid:layout_height="match_parent"
attribute defines the height of the layout, in our case we want to take all the height of the screenxmlns:android
andxmlns:app
attributes defines XML namespace, android namespace for attributes from Android SDK and app namespace for attributes from libraries

Right now, our layout is empty, let’s define a child view with “Hello World” text. To display some static text, a TextView
can be used along with the text
attribute. Instead of using match_parent
for layout_width
and layout_height
, we are going to use wrap_content
in order for the view to take as much space as required.

Note: For views that are available in Android SDK, we don’t need to specify the full package name (e.g. TextView), while for views which are available in libraries, we do need to specify the full package name (e.g. androidx.constraintlayout.widget.ConstraintLayout).
Preview of the layout.

Alignment
By default, our TextView
is going to be positioned in the top left corner of the screen. To move it into the center, we need to add the following constraints:
layout_constraintTop_toTopOf
attribute declares a constraint to align the top of the view to the top of theConstraintLayout
layout_constraintBottom_toBottomOf
attribute declares a constraint to align the bottom of the view to the bottom of the ConstraintLayoutlayout_constraintLeft_toLeftOf
attribute declares a constraint to align the left of the view to the left of the ConstraintLayoutlayout_constraintRight_toRightOf
attribute declares a constraint to align the right of the view to the right of the ConstraintLayout


Layout binding
To associate activity_main.xml layout with MainActivity, we need to bind them via setContentView
method. We can do that when activity is created inside the onCreate
method.
A setContentView
accepts layout resource ID, which can be referenced by special Android R
class, which is auto-generated by the Android build system and contains resource IDs for all the resources of app/src/main/res directory.
In our case, to get the ID of activity_main.xml we can use R.layout.activity_main
.

Now, when MainActivity is launched, it’s going to render layout from activity_main.xml file. Hit the run button to try it yourself.
View binding
In order to interact with views on runtime, we need to bind the view from XML to Java object, but before doing the binding, we must define a unique ID for the TextView
.
To specify the ID for the TextView
, we can use id
attribute with @+id/mainTextView
value, where @+id/
indicates ID creation and mainTextView
is the ID itself.

It’s time to bind the TextView
from XML file to Java object via findViewById
method and use setText
method to change the text to ‘Hello codingtimes.in’.


That’s it!
You have successfully completed the post. Do Share : )
Peace Out!
Also Read – Android project structure and Hello World!
Check Out Deals on -> Amazon , Flipkart , Myntra , Adidas , Apple TV , Boat , Canva , Beardo , Coursera , Cleartrip , Fiverr , MamaEarth , Swiggy
[…] Also Read – Android layout […]