Tutorial 12 : Sort List Example

Hi, guys! Sorry for long time, didn't update my blog because recently are busy with my personal stuff. In this tutorial, we will learn how to sort the list by ascending or descending order. This able to done by using sort() method and comparator class.

1. Sort Method

Ascending Order

By referring tutorial 9, we are creating a list view layout and put some elements in an array. Now we would like to modify the previous project in order to sort the them in ascending order. Use the Arrays.sort(items) command to sort them as shown in Figure 12.1.

public class ListMonth extends ListActivity {

    static final String[] MONTHS = new String[] { "January", "February",
             "March", "April", "May", "June", "July", "August",
             "September", "October", "November", "December" };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Arrays.sort(MONTHS);

       setListAdapter(new ArrayAdapter<String>(this, R.layout.activity_list
       _month, MONTHS));

        ListView listView = getListView();
        listView.setTextFilterEnabled(true);

        listView.setOnItemClickListener(new OnItemClickListener() {
        public void onItemClick(AdapterView<?> parent, View view,
                                   int position, long id) {
               // When clicked, show a toast with the TextView text
               Toast.makeText(getApplicationContext(),
               ((TextView) view).getText(), Toast.LENGTH_SHORT).show();
             }
        });

    }

Figure 12.1

Tutorial 11 : Web View Example

Hi, everyone. Do you feel fun with create your own Android application? In this tutorial, we will learn how to navigate a web pages by using web view layout in Android application. It is useful when the application need to show something from the web. It might be easy as just click a button or text to surf the web or net.

1. Create Android Layout

We need to create two Android layout for this tutorial. One is for the main activity layout and another one is for the web activity layout, they are shown in Figure 11.1 and Figure 11.2 respectively.

<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".webapplication">

    <Button
        android:id="@+id/btnGoogle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Google"
        android:padding="10sp"
        android:textSize="20sp" />

</RelativeLayout>

Figure 11.1

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webView1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    />

Figure 11.2

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