Make custom ArrayAdapter using custom Word class and custom ArrayAdapter.

-Create a custom ArrayAdapter

By default, the ArrayAdapter class expects that it’ll be populating a single TextView.
So we need to create a custom ArrayAdapter and override ‘getView method’.

WordAdapter.java

package com.example.android.miwok;

import android.app.Activity;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;

import java.util.ArrayList;

public class WordAdapter extends ArrayAdapter<Word> {

    /**
     * Make constructor of 'WordAdapter' class.
     * @param context The context.(Where we are)
     */
    public WordAdapter(Activity context, ArrayList<Word> words){
        // Initialize WordAdapter using ArrayAdapter's constructor.
        // Because second parameter is used to populate single TextView, we don't use it here. We customize.
        // So, put the value 0.
        super(context, 0, words);
    }

    /*
     * @param convertView is an existing view we can reuse.(recycle)
     */
    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {

        // Use 'Ctrl+O' to generate override method.
        // Check if the existing view(convertivew) is being reused, otherwise inflate the view
        // Such as opening the screen first time.
        View listItemView = convertView;
        if(listItemView == null) {
            listItemView = LayoutInflater.from(getContext()).inflate(
                    R.layout.list_item, parent, false);
        }

        // Get 'Word' object located at this position in the list.
        Word currentWord = getItem(position);

        // Find the TextView in the list_item.xml layout with the ID miwok_text_view
        TextView miwokTextView = (TextView) listItemView.findViewById(R.id.miwok_text_view);
        // Get the miwok word from the current Word object and
        // set this text on the miwok TextView
        miwokTextView.setText(currentWord.getMiwokTranslation());

        // Find the TextView in the list_item.xml layout with the ID default_text_view
        TextView defaultTextView = (TextView) listItemView.findViewById(R.id.default_text_view);
        // Get the default word from the current Word object and
        // set this text on the default TextView
        defaultTextView.setText(currentWord.getDefaultTranslation());

        // Return the whole list item layout (containing 2 TextViews)
        // so that it can be shown in the ListView
        return listItemView;
    }
}

Also change list_item.xml

<?xml version="1.0" encoding="utf-8"?>

<!--
    xmlns is short for xml namespace.
    in tools namespace, we can set texts.
    Go 'tools.android.com/tech-docs/tools-attributes' and find attributes in tools namespace.
    Or 'https://developer.android.com/studio/write/tool-attributes'
    'tools:text' is one of 'Design time attributes'  which are used when the layout is rendered in the tool,
    but have no impact on the runtime.
    -->

<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="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/miwok_text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:text="lutti"/>

    <TextView
        android:id="@+id/default_text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:text="one"/>

</LinearLayout>

Also need to change ArrayAdapter to -> WordAdapter

package com.example.android.miwok;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.TextView;

import java.util.ArrayList;

public class NumbersActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_numbers);

        //Create ArrayList of numbers by using Word object.
        ArrayList<Word> words = new ArrayList<Word>();

        // Add words by using 'add' function.

        words.add(new Word("one", "lutti"));
        words.add(new Word("two", "otiiko"));
        words.add(new Word("three", "tolookosu"));
        words.add(new Word("four", "oyyisa"));
        words.add(new Word("five", "massokka"));
        words.add(new Word("six", "temmokka"));
        words.add(new Word("seven", "kenekaku"));
        words.add(new Word("eight", "kawinta"));
        words.add(new Word("nine", "wo'e"));
        words.add(new Word("ten", "na'aacha"));

        // Create a WordAdapter (custom adapter), using constructor.
        WordAdapter itemsAdapter =
                new WordAdapter(this, words);

        // Find the ListView object in the view hierarchy of the Activity.
        // There should be a ListView with the view ID called list, which is declared in the
        // activity_numbers.xml layout file.
        ListView listView = findViewById(R.id.list);

        // Make the ListView use the ArrayAdapter we created above, so that the
        // ListView will display list items for each word in the list of words.
        // Do this by calling the setAdapter method on the ListView object and pass in
        // 1 argument, which is the ArrayAdapter with the variable name itemsAdapter.
        listView.setAdapter(itemsAdapter);
        // setAdapter needs ListAdapter as an input parameter.
        // ListAdapter is an Interface, BaseAdapter is an Abstract class and lastly ArrayAdapter is a Concrete class.
        // ListAdapter -> BaseAdapter -> ArrayAdapter.
        // ArrayAdapter is also used with GridList and Spinner
    }
}

How to create a ListView with an ArrayAdapter

  1. Create a way to store custom objects.
  2. Create a custom Adapter that extends from ArrayAdapter and takes the custom object we created.
  3. Modify getView method that in the custom Adapter to provide a list item view for your ListView.