Different Android User Interface (UI) Layouts

Different Android UI Layouts - androidhunger.com

Hello Android enthusiasts, welcome back. Here I am going to tell you about different types of layouts you can use in your android applications.

Layouts are the UI for android applications. You can define your layout in any type like Linear Layout or Relative Layout or any other layout. Depending upon your requirements you can choose which type of layout is needed.

A good thing to know is that you can also nest different layouts, for example, you can define Linear Layout as the root Layout and you can also include a GridView as its child.

Here in this post, I will give some examples on all these layouts and nesting them as well.

  • Linear Layout
  • Relative Layout
  • Grid View
  • List View

App Demo:

Project on Github

Linear Layouts:

As the name suggests it’s linear, you can align the children either horizontally or vertically.

See below images for horizontal and vertical Linear Layouts,

Different Android UI Layouts - androidhunger.com

Different Android UI Layouts – androidhunger.com

Different Android UI Layouts - androidhunger.com

Different Android UI Layouts – androidhunger.com

Some of the main attributes for Linear Layout are:

  • android:gravity
  • android:orientation
  • android:weightSum

In the above screenshots, we can see the main attribute  android:orientation which is set to horizontal and vertical

Code for above examples:

Horizontal Linear Layout:

The following code is for the horizontal layout example, shown in figure above (left side image),

Vertical Linear Layout:

The following code is for the vertical layout example, shown in figure above (right side image),

Relative Layout:

In this relative layout, all the child elements are relative to each other.

Different Android UI Layouts - androidhunger.com

Different Android UI Layouts – androidhunger.com

Some of the main attributes for Relative Layout are:

  • android:layout_above
  • android:layout_alignParentTop
  • android:layout_alignParentLeft
  • android:layout_alignParentStart
  • android:layout_below
  • android:layout_alignParentRight
  • android:layout_alignParentEnd

As we notice the above attributes, all these are relative to each other, i.e alignLeft to some element, alignParentRight to right of its parent element and so on.

Code for above example:

Project on Github

Grid View:

GridView is a view which can be used in your layouts when the content needs to dynamic. One can use Adapter class to add data to the GridView, we mostly use the ArrayAdapter class for our data source.

Different Android UI Layouts - androidhunger.com

Different Android UI Layouts – androidhunger.com

In the above image example, we used a simple array of strings and set it is adapter to gridView which displays the above result.

Here I also covered the nesting part I used GridView as a child element to RelativeLayout.

The code for GridView,

The code for getting some data from some data source like array and show it in your grid view,

Here you can also a custom adapter to get the data but for simplicity sake, we used an array to display data, however,  I will post about CustomAdapters later.

ListView :

This is similar as GridView, the difference is here we can set data in a list view.

Different Android UI Layouts - androidhunger.com

Different Android UI Layouts – androidhunger.com

Code for ListView,

Populating data in ListView,

Project on Github

Code Explanation Video:

That’s if for this post guys. In next posts, I will cover about Activities, Fragments, and Intents and will also tell about how to create your first android app.

Leave a Reply

Your email address will not be published. Required fields are marked *