Android Containers

Android containers are view group containing lists and search views and even web views. Android containers includes ListView, Custom ListView, GridView, WebView, SearchView etc.

ListView

ListView is a view group that displays a list of scrollable items. These list items are inserted from the source using an Adapter Class. The Adapter is like a “middleman” between the items and the ListView. The source could be arrays of any data types or database queries.

Note: You don’t need to create a ScrollView to make the list scrollable. The items are scrollable by default. All thanks to the ListView.

How to implement a ListView to display list of items?

In your .java fie

//Create array that will be our list items
String[] languages = {"Java", "JavaScript", "PHP", "C", "C++", "Python", "SQL"};
//Referencing the listView by its Id
ListView listView = (ListView) findViewById(R.id.listView);
//Define the adapter
//Declare the layout e.g android.R.layout.simple_list_item_1
ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1,languages);
//set the adapter to the ListView
listView.setAdapter(adapter);

In your .xml file

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

Custom ListView

ArrayAdapter by default is limited in terms of displaying only single view per row. Due to the limitation, Android developers grants us to create a Custom ListView.

Steps to follow in creating a Custom ListView

1.       Create two Layouts, one for the ListView items and the other for the ListView container

2.       Create a custom class.

3.       Create a custom Adapter class.

4.       In the MainActivity, create the data source and create the adapter and set the adapter to the ListView.

Create ListView container Layout

activity-main.xml

An example of a custom ListView with a SearchView

<?xml version="1.0" encoding="utf-8"?>
<ListView 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:orientation="vertical"
    android:id="@+id/list"
    android:padding="16dp">

    </ListView>

Create the Layout for the ListView items

display.xml

<LinearLayout    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"
    tools:context="com.android.rexben.blogdemo.City">

    <ImageView
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:id="@+id/imageView"/>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/city"
        tools:text="Lagos"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/description"
            tools:text="The beautiful City"/>

    </LinearLayout>
</LinearLayout>

Create a Custom Class

public class City {
    private String mCity;
   private String mDescription;
    private int mImage;

    public City(String city, String desc, int image){
        mCity = city;
        mDescription = desc;
        mImage = image;
    }

    public int getmImage() {
        return mImage;
    }

    public String getmCity() {
        return mCity;
    }

    public String getmDescription() {
        return mDescription;
    }
}

Create a custom Adapter Class

public class CityAdapter extends ArrayAdapter<City> {


    public CityAdapter(Context context, ArrayList<City> city) {
        super(context, 0, city);
    }
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View listView = convertView;
        if (listView == null){
            listView = LayoutInflater.from(getContext()).inflate(R.layout.activity_display, parent,false);
        }
        City currentCity = getItem(position);

        TextView city = (TextView) listView.findViewById(R.id.city);
        city.setText(currentCity.getmCity());

        TextView desc = (TextView) listView.findViewById(R.id.description);
        desc.setText(currentCity.getmDescription());

        ImageView imageView = (ImageView) listView.findViewById(R.id.imageView);
        imageView.setImageResource(currentCity.getmImage());

        return listView;
    }
}

In your MainActivity.java

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ArrayList<City> cities = new ArrayList<>();
        cities.add(new City("Lagos", "Center of excelence", R.drawable.lagos));
        cities.add(new City("New York", "Center of civilization", R.drawable.newyork));
        cities.add(new City("Shanghai", "Center of technology", R.drawable.shanghai));
        cities.add(new City("Moscow", "Center of posterity", R.drawable.moscow));
        cities.add(new City("London", "Center of entertainment", R.drawable.london));

        ListView listView = (ListView) findViewById(R.id.list);
        CityAdapter cityAdapter= new CityAdapter(MainActivity.this,cities);
        listView.setAdapter(cityAdapter);

    }
}

GridView

GridView is just like ListView but it displays items in a two-dimensional and scrollable grid.

How to implement the GridView ViewGroup, it is just likeListView as I have stated earlier

In your .java fie

//Create array that will be our list items
String[] languages = {"Java", "JavaScript", "PHP", "C", "C++", "Python", "SQL"};
//Referencing the listView by its Id
GridView gridView = (GridView) findViewById(R.id.gridView);
//Define the adapter
//Declare the layout e.g android.R.layout.simple_list_item_1
ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1,languages);
//set the adapter to the GridView
gridView.setAdapter(adapter);

In your .xml file

<GridView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:numColumns="2"
    android:id="@+id/gridView"/>

WebView

WebView as the name implies  is a view group that displays website. I will explain further in another post where I will be teaching you how create a Web Apllication for you Website or blog.

In your .xml file

<WebView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/webView"/>

SearchView

SearchView as the name implies provides users the opportunity to enter a search query and submit the search request to a search provider. In a nutshell, it is a view where user can type in keyword in order to search for something.

In your .xml file

<SearchView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/search"
    />

In your .java file

SearchView searchView = (SearchView)findViewById(R.id.search);
    searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
       @Override
        public boolean onQueryTextSubmit(String s) {
            return false;

        }
        @Override
        public boolean onQueryTextChange(String s) {
        return false;

        }
    });
}