Wednesday, August 17, 2016

Android ListView. (How to use an Android ListView.)





1. Android ListView

ListView is a view group that displays a list of scrollable items. ListView items are listed in a vertical direction.
ListView and ViewGroup
the ListView is one of the components used most frequently in constituting Android UI (User Interface). And Contacts and Preferences of the Android system are prime example of the ListView.
ListView Example

1.1 Adapter

An Adapter acts as a bridge between an ListView and the underlying data for that view.
Adapter's role.

2. How to use an Android ListView.

Now, let's make the example that can see how to use an Android ListView.

2.1 Workflow

Workflow for an Android ListView example.

2.2 Add ListView to Activity.

The first thing to do when you use ListView is to add ListView to Activity. In this example, MainActivity will be the owner of ListView. Declare "<ListView>" to "activity_main.xml"(or "content_main.xml") that is layout resource XML file of MainActivity.
[STEP-1] "activity_main.xml" - Declare "<ListView>"
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.recipes4dev.example.listviewexample1.MainActivity"
    tools:showIn="@layout/activity_main">

    <ListView
        android:id="@+id/listview1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

2.3 Declare the user data.

the ListView of the example will show the text by using a TextView widget. So, I declare an array of String type.
[STEP-2] "MainActivity.java" - Declare array of String type.
public class MainActivity extends AppCompatActivity {
    static final String[] LIST_MENU = {"LIST1", "LIST2", "LIST3"} ;

    // ... continued.
}

2.4 Create an Adapter and set it to the ListView.

Now that your data is ready, you have to create an adapter and set it to the ListView. There are several kinds of Adapter in Android SDK. You can choose to use for your application. Here, ArrayAdapter are used because String array are declared as an input. (But BaseAdapter is normally used.)
[STEP-3] "MainActivity.java" - Create Adapter and set it to ListView in onCreate().
@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState) ;
        setContentView(R.layout.activity_main) ;

        ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, LIST_MENU) ;

        ListView listview = (ListView) findViewById(R.id.listview1) ;
        listview.setAdapter(adapter) ;

        // ... continued.
    }

2.5 Handle the click event for ListView items.

Usually the ListView is simply used to display the data as a list form, but it may be used clickable menu item by handling the click event for ListView items. You can set the click event listener for handling the event and have to override onItemClick() method.
[STEP-4] "MainActivity.java" - Handle click event for ListView items.
listview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView parent, View v, int position, long id) {

            // get TextView's Text.
            String strText = (String) parent.getItemAtPosition(position) ;

            // TODO : use strText
        }
    }) ;
onItemClick()'s Parameters are,
  • parent : The ListView where the click happened.
  • view : The view within the ListView that was clicked
  • position : The position of the view in the adapter.
  • id : The row id of the item that was clicked.
If "LIST2" item is clicked,
  • parent : listview
  • view : TextView's object within listview.
  • position : 1
  • id : 1

2.6 Build and run.

Finally, Build and run "app".

3. Android ListView Basic Example Screenshot.

you can see the following screen. it was captured at Nexus 7 2nd(2013) version.
ListView Example Screenshot

4. References

.END.

No comments:

Post a Comment