Android Product Directory

PART 1: Create Standard ListView

The ListView is one of the most popular views that is used to create an app when you need to display a list of items that need to be scrolled vertically because they cannot all fit in the overall screen area (viewport).

  1. Create a new project using the Basic Activity and name it ProductDirectoryApp Part 1.
  2. Delete the default TextView (“Hello, World!”) component.
  3. Right-click on the Values folder and select New > XML > Values resource file and in the New Resources dialog box that appear, give it a file name of clothing and then click the OK button.
  4. In the clothing.xml file that opens, add the following highlighted attribute and elements between the resource tags to create a resource file:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
    <string-array name="clothing">
    <item>Cross-back training tank</item>
    <item>Stretchy dance pants</item>
    <item>Ultra-soft tank top</item>
    <item>V-neck t-shirt</item>
    <item>V-neck sweater</item>
    <item>Polo shirt</item>
    <item>Skater graphic T-shirt</item>
    <item>Thermal fleece jacket</item>
    <item>V-neck pullover</item>
    <item>Grunge skater jeans</item>
    <item>Thermal vest</item>
    </string-array>
    </resources>

    XML EXPLANATION: This resource file has a string-array (as the name implies, an array of strings) element included in it. This is an excellent way to store a limited but fixed amount of data that does not need to be changed at runtime for an app without having to use a database.
  5. In the content_main.xml file in Design mode from the Palette panel, drag-and-drop a ListView component to the top/left corner of the screen.

    NOTE: While you can “see” the ListView display a list of Items and Sub items. If you were to attempt to view this app in an emulator, you would not see anything because it has no data connected to it yet.
  6. In the Text view, change the height and width to match_parent so that the ListView expands to fill the screen when displayed and an id of android:id="@+id/listView"
  7. Open the MainActivity class file and add the following highlighted code in the onCreate() method:

    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
        // Get data from resource file
    String[] items = getResources().getStringArray(R.array.clothing);
    }

    CODE EXPLANATION:
    - The string array named items (String [ ] items) is used to get the data from the resource file (R.array.clothing).
    - The getStringArrray() method is passed an argument to the clothing resource. With a simple string, the resource ID is R.string; however, for a string array, it is R.array.
  8. Create an instance of a class called an ArrayAdapter below the code added earlier:

    // Get data from resource file
    String[ ] items = getResources().getStringArray(R.array.clothing);
    // Create an ArrayAdapter that will be used to bind the data to the ListView
    ArrayAdapter<String> adapter = new ArrayAdapter<String>();

    CODE EXPLANATION:
    - An instance of the ArrayAdapter named adapter is assigned to the ArrayAdapter's constructor method that requires four arguments that will be added in the next step.
    - Like a variable, the ArrayAdapter data type has to be set to the “type of data” that will be passed into it. In this case, since we are working with an array of strings, it is set to <String>.
  9. Set the following four arguments to the ArrayAdapter method:
    - Context—which is this activity. So the keyword “this” is used.
    - Resource—is a resource file that is part of the Android SDK that starts with android:, then R.layout. and then the name of the resource file. In this case, simple_list_item_1. If you CTRL+CLICK on this resource link to open it and in Text view, you will see that it has a single TextView with a built-in Androd id attribute of @android:id/text1.
    - TextView Resource ID that will display a string for each single row. As mentioned earlier, it is @android:id/text1 which is another built-in Android resource.
    - Object (items) that will be displayed—the string array created earlier. This can be a simple array of strings or a complex list of strings.

    ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, android.R.id.text1, items);

    CODE EXPLANATION: Now, the ArrayAdapter knows what:     
  10. Write the following highlighted code below the previously written code:

    ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, android.R.id.text1, items);
    // Get a reference to the ListView component in the layout
    ListView listview = (ListView) findViewById(R.id.listView);
    // Set the Adapter to the ListView by passing it as an argument
    listview.setAdapter(adapter);
  11. CHECK POINT: Run the app in an emulator. You should see the list of items in the string array displayed in the ListView in the Portrait orientation mode. Change to the Horizontal orientation mode and scroll the list to see additional items. We basically did three major steps: