Different Android User Interface (UI) Layouts
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
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,
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),
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center"><Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button" /><Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button" /><Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
/>
</LinearLayout>
Vertical Linear Layout :
The following code is for the vertical layout example, shown in figure above (right side image),
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
tools:context="mycodingcorner.androidhunger.LinearLayoutVerticalActivity"><Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1" /><Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2" /><Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3"
android:id="@+id/button3"
android:layout_gravity="center_horizontal" />
</LinearLayout>
Relative Layout :
In this relative layout, all the child elements are relative to each other.
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 :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:gravity="center"><Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Test Button"
android:id="@+id/button9"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" /><Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Test Button"
android:id="@+id/button10"
android:layout_below="@+id/button9"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" /><Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Test Button"
android:id="@+id/button11"
android:layout_alignTop="@+id/button10"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" /><Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Test Button"
android:id="@+id/button12"
android:layout_below="@+id/button10"
/>
</RelativeLayout>
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.
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,
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="mycodingcorner.androidhunger.GridViewActivity"><GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:id="@+id/gridView"
android:numColumns="auto_fit"
android:columnWidth="50pt"
android:stretchMode="columnWidth"
android:layout_centerHorizontal="true"></GridView>
</RelativeLayout>
The code for getting some data from some data source like array and show it in your grid view,
public class GridViewActivity extends AppCompatActivity {
GridView gridView;static final String[] numbers = new String[]{
"Cupcake", "Donut", "Eclair", "Froyo", "Gingerbread",
"Honeycomb", " Ice Cream Sandwich", "Jelly Bean", "KitKat", "Lollipop",
"Marshmallow", "Nougat", "Cupcake", "Donut", "Eclair", "Froyo", "Gingerbread",
"Honeycomb", " Ice Cream Sandwich", "Jelly Bean", "KitKat", "Lollipop",
"Marshmallow", "Nougat", "Cupcake", "Donut", "Eclair", "Froyo", "Gingerbread",
"Honeycomb", " Ice Cream Sandwich", "Jelly Bean", "KitKat", "Lollipop",
"Marshmallow", "Nougat"};@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_grid_view);
gridView = (GridView) findViewById(R.id.gridView);ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, numbers);gridView.setAdapter(adapter);
}
}
Here you can also 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.
Code for ListView,
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="mycodingcorner.androidhunger.ListViewActivity"><ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/listView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
Populating data in ListView,
public class ListViewActivity extends AppCompatActivity {
ListView listView;
static final String[] version_codes = new String[]{
"Cupcake", "Donut", "Eclair", "Froyo", "Gingerbread",
"Honeycomb", " Ice Cream Sandwich", "Jelly Bean", "KitKat", "Lollipop",
"Marshmallow", "Nougat"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_list_view);
listView = (ListView) findViewById(R.id.listView);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, version_codes);listView.setAdapter(adapter);
}
}
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.
