Android Layouts: Linear Layout, Relative Layout, Table Layout and Grid Layout

You see android app have very nice & material design. Layout designing is very important to stick user with your app. In this post i will discuses about the different view layouts in an android application. Android allows you to create layouts using simple XML file(Static layout) OR you can also create a layout using java code( Dynamic Layout ). The six different layouts are.

1. Linear Layout
2. Relative Layout
3. Table Layout
4. Grid View
5. Tab Layout
6. List View




The different view layouts in an android app. Linear, Relative, Table, Grid, Tab Layout

Login & Download source code

download-code350-100


1. What In This Post

You will learn how to create all 6 types of layout in android app. Also you will learn how to create dynamic layout and static layout in android app. First i will show how to create static xml layout using all six layout type. After that i will show you how to create dynamic layout.

Lets start with creating new project in android studio. Create a new project in Android Studio from File ⇒ New Project. I give name of new project is layoutdesign. My package name is blueappsoftware.layoutdesign. All the layouts must be placed in /res/layout folder in android studio.

2. Configure android studio file

1. Right Click on layout folder in android studio under RES folder. Create few new layout name as linearlayout, relativelayout, tablelayout gridlayout and tablayout

Linear Layout

Linear layout place child item according to orientation of layout. if android:orientation=”vertical” all item place vertical one by one. if android:orientation=”horizontal” all item place side by side if horizontal row By default linear layout orientation is set to horizontal.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/LinearMain"
    android:gravity="center_horizontal">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/linearlayout"
        android:layout_marginTop="10dp"
        android:textColor="@color/colorPrimaryDark"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/linear_one"
        android:layout_marginTop="10dp"/>


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/linear_two"
        android:layout_marginTop="10dp"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center_horizontal"
        android:layout_marginTop="20dp"
        android:background="@color/colorAccent">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/linear_one"
            android:layout_marginTop="10dp"/>


        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/linear_two"
            android:layout_marginTop="10dp"/>
    </LinearLayout>

</LinearLayout>

Relative Layout

In Relative layout item are place according to position define by you. like item two place below item on, item 3 place beside of item two but below item one.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:paddingTop="20dp">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/relativelayout"
        android:layout_marginTop="10dp"
        android:textColor="@color/colorPrimaryDark"
        android:id="@+id/textview"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/relative_one"
        android:id="@+id/relativeone"
        android:layout_below="@+id/textview"
        android:layout_marginTop="10dp"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/relative_two"
        android:id="@+id/relativetwo"
        android:layout_below="@+id/relativeone" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/relative_three"
        android:layout_toRightOf="@id/relativetwo"
        android:layout_below="@id/relativeone"/>

</RelativeLayout>

Table Layout

In Table layout item are place according to row. You can create multiple row and place item in any row.

<TableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:shrinkColumns="*"
    android:stretchColumns="*"
    android:background="#ffffff">

    <!-- Row 1 with single column -->
    <TableRow
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:gravity="center_horizontal">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="18dp"
            android:text="Row 1"
            android:layout_span="3"
            android:padding="18dip"
            android:gravity="center"
            android:textColor="@color/colorPrimary"/>
    </TableRow>

    <!-- Row 2 with 3 columns -->
    <TableRow
        android:id="@+id/tableRow1"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:background="#ffffff">
        <TextView
            android:id="@+id/text1"
            android:text="Row 2 column 1"
            android:layout_weight="1"
            android:background="@color/colorPrimary"
            android:textColor="#ffffff"
            android:padding="20dip"
            android:gravity="center"
            android:layout_margin="1dp"/>
        <TextView
            android:id="@+id/Text2"
            android:text="Row 2 column 2"
            android:layout_weight="1"
            android:background="@color/colorPrimary"
            android:textColor="#ffffff"
            android:padding="20dip"
            android:gravity="center"
            android:layout_margin="1dp"/>
        <TextView
            android:id="@+id/Text3"
            android:text="Row 2 column 3"
            android:layout_weight="1"
            android:background="@color/colorPrimary"
            android:textColor="#ffffff"
            android:padding="20dip"
            android:gravity="center"
            android:layout_margin="1dp"/>
    </TableRow>

    <!-- Row 3 with 2 columns -->
    <TableRow
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:gravity="center_horizontal">
        <TextView
            android:id="@+id/Text4"
            android:text="Row 3 column 1"
            android:layout_weight="1"
            android:background="@color/colorAccent"
            android:textColor="#000000"
            android:padding="20dip"
            android:gravity="center"
            android:layout_margin="1dp"/>

        <TextView
            android:id="@+id/Text5"
            android:text="Row 3 column 2"
            android:layout_weight="1"
            android:background="@color/colorAccent"
            android:textColor="#000000"
            android:padding="20dip"
            android:gravity="center"
            android:layout_margin="1dp"/>
    </TableRow>

</TableLayout>

Tab Layout

Tab layout is use in toolbar. You can place item vertically or horizontally

<?xml version="1.0" encoding="utf-8"?>
<TabWidget xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/tab_one"
            android:background="@color/colorAccent"
            android:layout_weight="2"
            android:gravity="center"
            android:layout_margin="1dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/tab_two"
            android:background="@color/colorAccent"
            android:layout_weight="2"
            android:gravity="center"
            android:layout_margin="1dp"/>

</TabWidget>

Grid Layout

Grid layout in one of the most useful layouts in android. Grid is mainly useful when we want show data in grid layout like displaying images or icons. Grid layout can be used to build applications like list item, image viewer, audio or video players in order to show elements in grid manner.

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:rowCount="3"
    android:columnCount="2">

    <Button
        android:id="@+id/button1"
        android:layout_gravity="left|top"
        android:text="Button 1" />

    <Button
        android:id="@+id/button2"
        android:layout_gravity="left|top"
        android:text="Button 2" />

    <Button
        android:id="@+id/button3"
        android:layout_gravity="left|top"
        android:text="Button 3" />

    <Button
        android:id="@+id/button4"
        android:layout_gravity="left|top"
        android:text="Button 4" />
    <Button
        android:id="@+id/button5"
        android:layout_gravity="left|top"
        android:text="Button 5" />

    <Button
        android:id="@+id/button6"
        android:layout_gravity="left|top"
        android:text="Button 6" />
    
</GridLayout>




















List Layout

List layout is use for displaying list of items.if you want static list then you have to create string array in string.xml file. see below code

<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:entries="@array/list_layout_array">


</ListView>
<resources>
    <string name="app_name">LayoutDesign</string>

    <string name="linearlayout">This is Linear Layout</string>
    <string name="linear_one">item 1</string>
    <string name="linear_two">item 2</string>

    <string name="relativelayout">This is Relative Layout</string>
    <string name="relative_one">item 1</string>
    <string name="relative_two">item 2</string>
    <string name="relative_three">item 3</string>

    <string name="tablayout">this is tab layout</string>
    <string name="tab_one"> First Tab</string>
    <string name="tab_two">Second Tab</string>

    <string-array name="list_layout_array">
        <item>Shuttle Badminton</item>
        <item>Tennis</item>
        <item>FootBall</item>
        <item>Basket Ball</item>
        <item>Table Tennis</item>
        <item>Chess</item>
        <item>Hockey</item>
    </string-array>

</resources>

Run App in Real Device using USB Debugging

Login & Download source code

download-code350-100

SUBSCRIBE FOR FREE ANDROID COURSE, Inbox 25 lesson & Video

* indicates required






Posted in andorid.

I Am Post Graduation (M.Tech. C.S.E) from VNIT, Nagpur. I Have Published Two Research Paper On International Journal. My Apps on Google Play Store- Sanyukt Parivar(Mp Police ), NOTOtag- Digital Chhindwara, The Tubby-VoiceRecognizer & More.
Contact me at kamal.bunkar@blueappsoftware.in

33 Comments

  1. I love your blog.. very nice colors & theme. Did you create this
    website yourself or did you hire someone to do it for you?
    Plz respond as I’m looking to create my own blog and would like to find
    out where u got this from. appreciate it

  2. Pretty great post. I just stumbled upon your weblog and wanted to say
    that I’ve truly loved browsing your blog posts.
    In any case I’ll be subscribing for your feed and I hope you write once more very soon!

  3. Hi there! This post could not be written any better!
    Reading through this post reminds me of my good old room mate!
    He always kept talking about this. I will forward this article to him.
    Fairly certain he will have a good read. Thank you for sharing!

  4. Hi there! Quick question that’s totally off topic.
    Do you know how to make your site mobile friendly?
    My weblog looks weird when browsing from my iphone4.
    I’m trying to find a template or plugin that might
    be able to fix this issue. If you have any recommendations, please share.
    Thank you!

  5. This is really attention-grabbing, You are an overly skilled blogger.
    I have joined your feed and look forward to in the hunt
    for extra of your great post. Also, I have shared your site in my social networks

  6. I’m really enjoying the theme/design of your blog.

    Do you ever run into any browser compatibility issues?

    A few of my blog audience have complained about my site not
    working correctly in Explorer but looks great in Chrome.
    Do you have any solutions to help fix this issue?

  7. I was recommended this web site by my cousin. I’m
    not sure whether this post is written by him as no one else
    know such detailed about my problem. You are wonderful!

    Thanks!

  8. Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet my newest twitter updates.
    I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this.
    Please let me know if you run into anything. I truly enjoy reading your
    blog and I look forward to your new updates.

  9. Having read this I thought it was very informative. I appreciate you finding the time and
    energy to put this short article together. I once again find myself personally spending a lot of time both reading and posting comments.
    But so what, it was still worthwhile!

  10. hi! may i know is your code complete? because i run the program and does nothing, i have download the given source code.

    • Yes this code is working…You have to create file on php server to store FCM key into your database for future use. First check on your android studio log whether FCM token is printing OR not. If it is printing in log than send token to your web server.

  11. Good day! I could have sworn I’ve been to
    this website before but after going through
    a few of the articles I realized it’s new to me.

    Nonetheless, I’m certainly delighted I found it and I’ll be book-marking it and checking back regularly!

  12. Spot on with this write-up, I absolutely feel this website needs much more attention. I’ll probably be returning to read
    through more, thanks for the info!

  13. Hey very cool website!! Man .. Excellent ..
    Amazing .. I will bookmark your site and take the feeds additionally?
    I am glad to search out numerous useful info here
    in the submit, we need work out more strategies
    on this regard, thanks for sharing. . . . . .

  14. Pingback: ExoPlayer Android Example- Best Alternative of VideoView By Kamal

  15. Pingback: Simplest way to get WordPress Post in Android App- REST API

  16. I just like the helpful information you supply to your articles.

    I’ll bookmark your blog and test once more here frequently.
    I’m fairly sure I will learn many new stuff proper here!
    Good luck for the following!

Comments are closed.