Skip to main content

Different types of layouts/Linear, Table,Relative and Frame Layout



Different types of layouts in android/Layout tutorials/android basics:layouts,linear,table,frame and relative layout

When you create a new project, you might see a folder “layout” in the res folder (/res/layout). This directory contains the xml files needed for your application. In addition to the main.xml (which is created automatically while creating a new project), you can create as much of xml file needed for your application.  You can arrange widgets such as buttons, TextView, edit text and more and more in these xml files. By using “Layouts”, you can arrange these widgets and views in various manners.

Different Layouts are


  • Linear Layout- Horizontal & Vertical


  • Table Layout


  • Relative Layout


  • Frame Layout

Linear Layout-Horizontal & Vertical

These layouts are used when we need to arrange the widgets/views in a horizontal or vertical manner. The direction of arrangement can be set to horizontal or vertical, by default its being horizontal.

Vertical Layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
        <TextView
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="This "
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        android:background="#FF83FA">
        </TextView>

    <TextView
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="is "
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/textView2"
     android:background="#FF1493">
    </TextView>
    <TextView
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="Vertical "
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/textView3"
     android:background="#AB82FF">
    </TextView>
    <TextView
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="Layout "
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/textView4"
    android:background="#00E5EE">
    </TextView>
 </LinearLayout>


Horizontal Layout

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

        <TextView
        android:text="This "
        android:id="@+id/textView1"
        android:layout_width="70dip"
        android:layout_height="60dip"
        android:background="#FF3030">
        </TextView>
        <TextView
        android:text="is "
        android:id="@+id/textView2"
        android:layout_width="70dip"
        android:layout_height="60dip"
        android:background="#FF8C00">
        </TextView>
        <TextView
        android:text="horizontal   "
        android:id="@+id/textView3"
        android:layout_width="70dip"
        android:layout_height="60dip"
        android:background="#00CED1">
        </TextView>
        <TextView
        android:text="layout"
        android:id="@+id/textView4"
        android:layout_width="70dip"
        android:layout_height="60dip"
        android:background="#BCEE68">
        </TextView>
</LinearLayout>

Frame Layout
One of the simple layouts used to hold a section of the screen blank, for displaying an item at run time. One best example for frame layout is tab view. In tab view, we use frame layout to display different screens


<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
android:id="@+id/mainlayout"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:padding="5px"
android:src="@drawable/blue"/>
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:padding="5px"
android:src="@drawable/red"/>
</FrameLayout>

Relative Layout
Here the position of each of the widgets/view us in relative/dependent to each other. When a layout is needed such that it has a text view just to the left of an edit textbox and a button just below the edit text, you can use relative layout. 




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

    <Button
        android:id="@+id/btnButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"/>

    <Button
        android:id="@+id/btnButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:layout_toRightOf="@+id/btnButton1"/>

     <Button
        android:id="@+id/btnButton3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3"
        android:layout_below="@+id/btnButton1"/>

     <TextView
         android:id="@+id/textView1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_below="@+id/btnButton3"
         android:layout_marginTop="94dp"
         android:text="User :"
         android:textAppearance="?android:attr/textAppearanceLarge" />

     <EditText
         android:id="@+id/editText1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentRight="true"
         android:layout_alignTop="@+id/textView1"
         android:layout_toRightOf="@+id/btnButton3" />

     <Button
         android:id="@+id/btnSubmit"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentRight="true"
         android:layout_below="@+id/editText1"
         android:text="Submit" />

</RelativeLayout>



Table Layout

If the layout’s widgets or views need to be arranged in the form of rows and columns, we can use Table Layout

See more
Radio button
Checkbox
Toggle button
AutoComplete TextView 



Labels:

Comments

Post a Comment

Popular posts from this blog

Capture image without surface view as background service in android

Capture image without user knowledge in android/Capture image as background service in android/Take photo without preview in android/ Camera without preview in android  package com.example.picture; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; import android.app.Service; import android.content.Context; import android.content.Intent; import android.hardware.Camera; import android.hardware.Camera.Parameters; import android.media.AudioManager; import android.os.IBinder; import android.util.Log; import android.view.SurfaceHolder; import android.view.SurfaceView; public class CameraService extends Service {       //Camera variables       //a surface holder       private SurfaceHolder sHolder ;        //a variable to control the camera       private Camera mCamera ;   ...
10 comments
Read more

Custom Spinner in Android

Custom Spinner in Android/Spinner using custom adapter/spinner with icon and text  In this tutorial, i'll show you to customizing spinner in different methods.  To change the normal display of spinner view, add background image using the code " android:background="@drawable/myspinner_background" in the xml. You can also make it customizable by setting up an xml file in drawable folder Custom display with icon in the spinner   main.xml <? xml version = "1.0" encoding = "utf-8" ?> < LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"     android:orientation = "vertical"     android:layout_width = "fill_parent"     android:layout_height = "fill_parent"     >     < Spinner     android:drawSelectorOnTop = "true"     android:id = "@+id/spinner1"     android:layout_width = "match_parent"     and...
5 comments
Read more

Coroutine- A complete tutorial

 What are coroutines? To know about coroutine, first you need to know about asynchronous programming, thread and multithreading concept. What is a thread? Thread describes in which context the function or sequence of instructions should be executed. So, every block of code or functions runs in a thread, right? Also, you can load multiple threads to perform different block of codes  How to start a thread? Thread thread = new Thread(){     public void run(){       System.out.println("This is a thread");     }   }     thread.start(); So when coming to android, before learning about coroutines we need to discuss some scenarios. Normally how an app works when user launch an application. When user launchers the application, a main thread is created. This thread is intended to do small operations like button clicks, UI interaction , small mathematical operations. We cant perform long running op...
Post a Comment
Read more