Different Layouts in Android Studio

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).

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).

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

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.

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

But here we have problem element c has not verticle constraint.

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.