Tutorial 10 : Grid View Example

In this tutorial, we will learn how to arrange the components in two-dimensional gridView which is shown as Figure 10.1.

Figure 10.1

Same as the previous tutorial, we will show you in two ways (e.g. normal and customize adapter) to build up the gridView layout in Android application.

1. Normal Grid View

In the first part, we would like to display number from 1 to 25 in grid view layout. It is quite simple to implement grid view layout by using <GridView /> tag in XML layout coding (Figure 10.2). There are few settings can be set for the grid view layout such as android:numColumns="..." to set the number of column, android:columnWidth="..." to set the width of the column, android:gravity="..." to set the position of the content and other settings.

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridView1"
    android:numColumns="5"
    android:gravity="center"
    android:columnWidth="50dp"
    android:stretchMode="columnWidth"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

</GridView>

Figure 10.2

Tutorial 9 : Android List View Example

Now we will learn the most common XML layout, ListView to apply in our Android application. List View is a layout which able to let you arrange components in vertical scrollable list.

In this tutorial, we will show you two examples of List View. One is normal list view and another is with array adapter. Let's see what are the differences between them at below.

1. Normal ListView

First of all, we need to create a new XML layout for ListView activity. In this layout, we will create a normal list view which is only contain text. The XML source code is shown in Figure 9.1. 

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="10dp"
    android:textSize="20sp" >
</TextView>

Figure 9.1

Tutorial 8 : Android Table Layout Example

In this tutorial, we will learn how to arrange components in rows and columns by using TableLayout. With this layout, our layout will be look more systematic, especially for those data which are needed to tabulated in the table form.

First of all, we need to create a new XML layout file for TableLayout. Same as last two tutorials before, go to File>New>XML>XML Layout File and fill in TableLayout into Root Tag column of the pop-out window (Figure 8.1).

Figure 8.1

Tutorial 7 : Android Relative Layout Example

In this tutorial, we will discuss how to apply RelativeLayout in Android application layout. RelativeLayout is the most flexible layout in Android application, this is because it allow you to position the component to display at anywhere you want. In RelativeLayout, we can use "left, right, above and below" to arrange the component position.

First, we would like to create a new RelativeLayout by using the step, File>New>XML>XML Layout File. A similar situation as previous tutorial, a window will pop-out. But this time, we need to change the root type became RelativeLayout and named your layout with the name you want.

Figure 7.1

Tutorial 6 : Android Linear Layout Example

In this tutorial, we will show you how to use Linear Layout to design for XML layout. This able to help you to design your layout more systematic. Besides that, we will show you how the "weight" works.

There are 3 options you can use to design your XML Linear Layout: horizontal, vertical and mix up both together. We will show these one by one for you to let you have a better understanding on it.

1. Linear Layout (Horizontal)

Now go to File>New>XML>XML Layout File to create a new XML layout. A window shown as Figure 6.1 will pop-out and please ensure you are selecting LinearLayout as the Root Tag. Then put the desired name you want in the Layout File Name column.

Figure 6.1

Click on the Finish button, therefore you are successfully create a new LinearLayout file in your project and can start coding at there (Figure 6.2).

<?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">

</LinearLayout>

Figure 6.2

Tutorial 5 : Android Button Example

In this tutorial, we show you how to add a button on the XML layout and a click listener on it. When the user click on the button, the font size of text which are created before in the previous tutorial will change.

1. Add Button

First, drag and drop a button into the GUI from the palette window is shown as Figure 5.1.

Figure 5.1

Tutorial 4 : TextView Example

In this tutorial, we show you how to modify the textview on the Android XML layout. You will learn how to change the display text, font size and font colour.

1. Change the Display Text

There are two ways to change the display. As discuss before you able to design your layout through graphical interface or hard code interface in the XML file. In this tutorial, we will use both of them in our XML layout design. The reason is they have different benefit over each other. For graphical interface, it is more user friendly; while hard code interface, it is more controllable.

Graphical Interface

Figure 4.1

Tutorial 3 : Android Activity, Layout and Manifest

In this tutorial, we would discuss about the three main elements for Android application development: Android Activity, Android XML Layout and Android Manifest. Each of them plays different role in the Android application, if without one of them, the application will not work perfectly.

1. Android Activity (*.java)

The Activity class is an important part of Android application's overall life cycle and the way of activities are launched. Besides, it also is a fundamental part of the platform's application model. If you want to know more how the activities behave, please read the application fundamentals and tasks and back stack developer guides.

Figure 3.1

Tutorial 2 : Hello World

In this tutorial, I will show you how to run the Android Studio and create a simple "Hello World" project with Android Virtual Device (AVD).

1. Project Setup

If you were successfully install Android Studio in your desktop or laptop, then your development environment should be set up correctly. Now you are ready to create your first Android application by using Android Studio.When you launch Android Studio, you should see a welcome screen is shown as Figure 2.1 which offering you several choices to start with it.

Figure 2.1

Tutorial 1 : Starting with Android Studio

Android Studio is a brand new Integrated Development Environment (IDE) for Android platform. It provides some new features and improvements over Eclipse ADT. Android Studio offers:

• Flexible Gradle-based build system.
• Build variants and multiple APK generation.
• Expanded template support for Google Services.
• Rich layout editor with support for theme editing.
• ProGuard and app-signing capabilities.
• Lint tools to catch performance, usability, version compatibility and other problems.
• Built-in support for Google Cloud Platform, making it easy to integrated Google Cloud Messaging and App Engine.

From now, this Android IDE is available for download on Windows, Mac OS X and Linux. You can download this IDE at here.

I installed the Android IDE in Linux OS and have nice user experience for it . The GUI view of Android IDE is shown as Figure 1.1.

Figure 1.1

What you still waiting for? Hurry up go to download Android Studio and join us as an Android apps developer.