Android User Interface Layouts

Android User Interface Layouts

Android User Interface Layouts are the essential building blocks for User Interface is a View object which is made from the View class and involves a rectangular range on the screen and is in charge of drawing and event handling of. Perspective is the base class for gadgets, which are utilized to make intuitive UI parts like buttons, content fields, and so on.

android user interface layouts

The ViewGroup is a subclass of View and gives imperceptible holder that hold different Views or different ViewGroups and characterize their layout properties.

At third level we have distinctive layouts which are subclasses of ViewGroup class and a common format characterizes the visual structure for an Android UI and can be made either at the run time utilizing View/ViewGroup objects or you can proclaim your layout utilizing main_layout.xml which is situated in the res/design directory of your project.

android user interface layouts

In this tutorial, we concentrated on creating your own Graphical User Interface (GUI) which is explained in the XML file. Layout defined different types of widgets for example labels, textboxes, buttons etc. Example of XML having linear layout is following below

<?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" >
   
   <TextView android:id="@+id/text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="This is a TextView" />
      
   <Button android:id="@+id/button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="This is a Button" />
      
   <!-- More GUI components go here  -->
   
</LinearLayout>

At that time once your layout has made, you may load the layout resource from your app code, in your Activity.onCreate() callback implementation as given below

public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
}

 

Android User Interface Layouts Types

There are number of Layouts gave by Android which you will use in all the Android applications to give distinctive view, look and feel.

Layout and Description

Linear Layout

LinearLayout is a view group that adjusts all youngsters in a solitary course, vertically or on a level plane.

Relative Layout

RelativeLayout is a perspective groups that showcases youngster views in relative positions.

Table Layout

TableLayout is a perspective that groups views into lines and sections.

Absolute Layout

AbsoluteLayout empowers you to determine the precise area of its youngsters.

Frame Layout

The FrameLayout is a placeholder on screen that you can use to show a single view.

List View

ListView is a perspective group that shows a rundown of scroll-able things.

Grid View

GridView is a View-group that presentations things in a two-dimensional, scroll-able grid.

Android User Interface Layouts Attributes

Every layout has an arrangement of attributes which characterize the visual properties of each and every  layout. There are couple of basic attributes among every one of the layouts and their are different attributes which are particular to that layout. Taking after are regular attributes and will be connected to every one of the layouts:

Attribute and Description

android:id 

This is the ID which remarkably recognizes the view.

android:layout_width

This is the width of the layout.

android:layout_height 

This is the stature/height of the layout

android:layout_marginTop 

This is the additional space on the top side of the layout.

android:layout_marginBottom 

This is the additional space on the base side of the layout.

android:layout_marginLeft

This is the additional space on the left half of the layout.

android:layout_marginRight 

This is the additional space on the right half of the layout.

android:layout_gravity 

This determines how child Views are situated.

android:layout_weight 

This determines the amount of the additional space in the layout ought to be designated to the View.

android:layout_x 

This determines the x-direction of the layout.

android:layout_y

This indicates the y-direction of the layout.

android:layout_width 

This is the width of the layout.

android:paddingLeft

This is the left cushioning/padding filled for the layout.

android:paddingRight 

This is the right cushioning/padding filled for the layout.

android:paddingTop 

This is the top cushioning/padding  filled for the layout.

android:paddingBottom

This is the base cushioning/padding filled for the layout.

Here width and tallness are the measurement of the layout/view which can be determined as far as Density-autonomous Pixels,  Scale-free Pixels, Points which is 1/72 of an inch,  Pixels, Millimeters lastly inches.

You can indicate height and width with definite estimations yet all the more frequently, you will utilize one of these constants to set the height or width−

 

  • android:layout_width=wrap_content advises your view to size itself to the measurements required by its content.
  • android:layout_width=fill_parent advises your perspective/view to wind up as large as its parent view.

View Identification

A view object may have an extraordinary ID doled out to it which will distinguish the View extraordinarily inside the tree. The sentence structure for an ID, inside a XML tag is –

android:id="@+id/my_button"

Pursuing is a brief explanation of @ and & signs –

  • The at-symbol (@) at the start of the string shows that the XML parser should parse and grow the rest of the ID string and identify it as an IDENTITY resource.
  • The plus-symbol (+) means that this is a new resource name that needs to be created and added to our resources. To create an instance of the view object and record it from the design, use the following –
Button myButton = (Button) findViewById(R.id.my_button);