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 ;       //the camera parameters       private Parameters parameters ;       /** Called when the activity is first created. */     @Override     p
10 comments
Read more

Open front camera in android program

How to access front camera in android/get number of cameras in android/Program to open front camera in android Using the code explained below, we can easily find out number of cameras in your android device. Camera.CameraInfo cameraInfo = new Camera.CameraInfo();         Log. d ( "No of cameras" ,Camera. getNumberOfCameras ()+ "" );         for ( int camNo = 0; camNo < Camera. getNumberOfCameras (); camNo++) {             CameraInfo camInfo = new CameraInfo();             Camera. getCameraInfo (camNo, camInfo);                         if (camInfo. facing ==(Camera.CameraInfo. CAMERA_FACING_FRONT )) {                 mCamera = Camera. open (camNo);             }         }         if ( mCamera == null ) {            // no front-facing camera, use the first back-facing camera instead.            // you may instead wish to inform the user of an error here...               mCamera = Camera. open ();         } A sample program that take photo using front camer
1 comment
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"     android:layout_height = "wrap_content&
5 comments
Read more