How to set a toolbar in a List Activity?

Question

I want to change the app I have created so far, in order to implement a ListView. I followed this example and this example. The examples alone work, but not together with the changes I had to make to my so-far existing app.

I have a avticity_main.xml defined as follows:

<android.support.design.widget.CoordinatorLayout
    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:fitsSystemWindows="true"
    tools:context=".MainActivity" >

    <android.support.design.widget.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"/>

    </android.support.design.widget.AppBarLayout>

    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/main_grid"

        android:useDefaultMargins="true"
        android:alignmentMode="alignBounds"
        android:columnOrderPreserved="false"

        android:columnCount="4"
        >

        <TextView
            android:text="MainTitle"
            android:textSize="32dip"
            android:layout_columnSpan="4"
            android:layout_gravity="center_horizontal"
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <ListView
            android:id="@+id/list"
            android:layout_height="wrap_content"
            android:layout_width="match_parent">
        </ListView>                            
    </LinearLayout>

</android.support.design.widget.CoordinatorLayout>

and I have the following code for my main activity:

public class MainActivity extends AppCompatActivity  {
    static final String[] MOBILE_OS =
        new String[] { "Android", "iOS", "WindowsMobile", "Blackberry"};

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

        setContentView(R.layout.activity_main);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        ListView list = (ListView) findViewById(R.id.list);
        list.setAdapter(new ListAdapter(this, MOBILE_OS));

The code compiles fine, but no list is shown.

Answer 1

ListActivity is a "convenience" class to implement a simple ListView. And that's pretty much all you can do. So, there's no setSupportActionBar(Toolbar) there.

To achieve what you want, use AppCompatActivity or default Activity.

This link provides a nice tutorial on how to use the new ToolBar instead of the old ActionBar.

You want something like this:

This layout example could be used:

P.S.: "@color/primary" could be any color like #FF009688.

activity_main.xml

<?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"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:id="@+id/toolbar"
        android:background="@color/primary"
        android:elevation="4dp">

    </android.support.v7.widget.Toolbar>

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar"
        android:id="@+id/lv"></ListView>

</RelativeLayout>

And on the Java side:

YourActivity.java

public class MainActivity extends AppCompatActivity {


    private Toolbar toolbar;
    private ListView lv;


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

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        lv = (ListView) findViewById(R.id.lv);
        setSupportActionBar(toolbar);

        final ActionBar actionBar = getSupportActionBar();

        if (actionBar != null) {
            actionBar.setHomeAsUpIndicator(R.drawable.ic_menu_white_24dp);
            actionBar.setDisplayShowTitleEnabled(false);
            actionBar.setDisplayHomeAsUpEnabled(true);
        }

        // Populate the ListView here...

    }

}

---

EDIT: This other answer of mine can show you how to create a Custom Adapter to display the data you want on the ListView.

Second edit: Use this layout

<android.support.design.widget.CoordinatorLayout
    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:fitsSystemWindows="true"
    tools:context=".MainActivity" >

    <android.support.design.widget.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"/>

    </android.support.design.widget.AppBarLayout>

    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/main_grid"

        android:useDefaultMargins="true"
        android:alignmentMode="alignBounds"
        android:columnOrderPreserved="false"

        android:columnCount="4"
        android:orientation="vertical">

        <TextView
            android:text="MainTitle"
            android:textSize="32dip"
            android:layout_columnSpan="4"
            android:layout_gravity="center_horizontal"
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <ListView
            android:id="@+id/list"
            android:layout_height="wrap_content"
            android:layout_width="match_parent">
        </ListView>
    </LinearLayout>

</android.support.design.widget.CoordinatorLayout>

What did I do?

Your LinearLayout was lacking the orientation parameter on the XML, and your TextView had a android:layout_height set to match_parent, so it was filling the entire layout. I've changed it to wrap_content and you're good to go.