Tutorial Android studio: knowing the types of layouts on the android part 1

Android Studio tutorial will discuss about the types of layouts found on android. Before I continue with this article I am sure you are familiar with the work area contained in the android studio, if not I suggest you to read my previous article. Layouts are an interface that connects the user to the application. Layouts in android are stored in the form of xml file, and usually the editors of this layouts android studio files contained in the folder app / res / layout folder.

With you are free to design layouts that will produce an application that has a user friendly appearance. On Android there are several types of layouts, which are as follows:

Frame layout
Linear layout
Table layout
Grid layout
Relative layout

Frame layout

Frame layout is one type of layout on android simplest and most efficient and usually most often used to set the view, but the type of layout is rarely used because it can only be used to display a single view. To define the layout of frames starting with the syntax <FrameLayout and closed with </ FrameLayout. For more details you can see from the sample frame script xml layout for a view.

<?xml version="1.0" encoding="utf-8"?>

    <FrameLayout

        xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent">



    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:textColor="#fff"

        android:textSize="50dp"

        android:text="This is a text on top"/>

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="This is a text above"

        android:textSize="50dp"

        android:layout_gravity="bottom"

        android:gravity="right"

        android:textColor="#fff"/>

</FrameLayout>

Linear layout

That is layout that regulates the components in it either vertically or horizontally, and components with a weight of at most will fill the remaining space of linear layout. Here's an example of a horizontal linear layout for displaying three buttons.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="horizontal">



    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/button1"

        android:text="First Button"/>



    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/button2"

        android:text="Second Button"/>



    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/button3"

        android:text="Third Button"

        android:layout_weight="1"/>



</LinearLayout>

The next script is linear vertical layout that displays three buttons






<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical">



    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/button1"

        android:text="First Button"/>



    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/button2"

        android:text="Second Button"/>



    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:id="@+id/button3"

        android:text="Third Button"

        android:layout_weight="1"/>



</LinearLayout>

From the script and the picture above you can now distinguish between linear horizontal layouts with linear vertical layout.

Table layout


Table layout is one type of layout that allows you to design the look for android application in the form of rows and columns; table layout is similar to a standard table in HTML. Here is a sample script of table layout on android




<?xml version="1.0" encoding="utf-8"?>

<TableLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:id="@+id/tableLayout1">



    <TableRow

        android:id="@+id/tableRow1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:padding="5dip">



        <TextView

            android:id="@+id/textView1"

            android:text="This is First Column"

            android:textAppearance="?android:textAppearanceLarge"/>

        <Button

            android:id="@+id/button1"

            android:text="Second Column"/>

    </TableRow>



    <TableRow

        android:id="@+id/tableRow2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:padding="5dip">



        <EditText

            android:id="@+id/editText1"

            android:layout_span="2"

            android:text="Column 1 &amp;2"/>

    </TableRow>



    <View

        android:layout_height="2dip"

        android:background="#ff000" />



    <TableRow

        android:id="@+id/tableRow3"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:padding="5dip" >

    

    <TextView 

        android:id="@+id/TextView2"

        android:text="First Column"

        android:textAppearance="?android:textAppearanceLarge"/>

    

    <Button 

        android:id="@+id/button2"

        android:text="Second Column"/>

    <Button 

        android:id="@+id/button3"

        android:text="Third Column"/>

    </TableRow>

</TableLayout>

That's three different types of layouts in android which will we use to make an android application that user friendly and comfortable in the eye. Android studio tutorial knowing the types of layouts on my android ends meet part 1 first got here; it goes forward in my next article. Thank you've visited this blog, for those of you who want to download the source code and also this article in PDF form I have prepared the link below please you download.


Download Article in PDF