Different Layouts in Android Studio

Photo by Denny Müller on Unsplash

Different Layouts in Android Studio

Rishabh Kumar
·Jan 10, 2022·

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Table of contents

  • Type of Layout

Type of Layout

  • LinearLayout
  • RelativeLayout
  • TableLayout
  • GridView
  • ConstraintLayout

LinearLayout

LinearLayout is used when we want to place different elements (eg. Button, RadioButton etc) in linear fasion that could be verticle (top to bottom) or horizontal (left to right).

linearlayout-small.png Code Snippet for Verticle LinearLayout

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">        
        ... 
</LinearLayout>

Code snippet for Horizontal LinearLayout

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">        
        ... 
</LinearLayout>

RelativeLayout

RelativeLayout as name suggests elements are placed relative to other element if no relation is defined everything will just go to top left corner of the screen. To place element in relative to other element we have to appoint unique id to every element or view (every element is derived from view class hence every element in screen is a view).

relativelayout-small.png Code snippet to place two buttons side by side

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:id="@+id/button2"
            android:layout_toEndOf="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

</RelativeLayout>

Above code will place button2 at the end of button1.

Similarly we have other plancements as follows to place element relative to other element

android:layout_toStartOf="@+id/element_id"
android:layout_below="@+id/element_id"
 android:layout_above="@+id/element_id"

TableLayout

TableLayout can be used to divide screen into rows and coloums

tabular-layout-in-android-2.jpg Code snippet will give you better understanding what we are talking about

<TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TableRow
            android:id="@+id/tr1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <Button 
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"/>
            <Button 
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"/>

        </TableRow>
        <TableRow
            android:id="@+id/tr2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <Button 
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"/>
            <Button 
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"/>

        </TableRow>

    </TableLayout>

GridView

As name suggests we can create a grid with this layout all we have to do is specify number of columns we want in out screen.

android_gridview_example.png Following code snippet could be used to create a grid of 4 columns

<GridView
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="4"/>

ConstraintLayout

ConstraintLayout is latest and most intesting layout of andoid studio to create complex layouts in ConstraintLayout we get 4 handles on every element on start, end, top, bottom. You connect these handle to other element to place them relative to other element. You might think it is similar to relative layout but unlike RelativeLayout, ConstraintLayout offers bias value that is used to position a view in terms of 0% and 100% horizontal and vertical offset relative to the handles. For example consider a buttom left and right handles connected to end of screens on respective side technically it should centre horizontally, but if you give it a bias of 0.25 it will be on 25% from left.

Note: Each element should have both constraints horizontal and verticle

constraint-fail_2x.png But here we have problem element c has not verticle constraint. constraint-fail-fixed_2x.png Now c is vertically constraint. Code snippet

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="-234dp">

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toEndOf="@+id/button"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.75"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/button" />

</androidx.constraintlayout.widget.ConstraintLayout>

I hope i have explained every layout in pretty detail if you have any doubt drop a comment of cotact me on my social media. I'm trying my best to share my knowledge and make android learning easy and fun. If you find it useful pls drop like follow me to get next article updates and share this article as much as you can.

 
Share this