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.