Android: ListView / GridView Overlapping Toolbar in MainActivity/Fragment

Question

so I've recently been following this tutorial in order to create a ListView within my HomePage which is a Fragment. As this wouldn't work (to my knowledge?), I instead implemented the following code into my Main Activity, which holds a Navigation Drawer. I have tried to simplify your understanding along with app's order of what I'd like to achieve below:

1. User logs into app
2. User is the taken to the "Main Activity" which holds a Navigation Drawer via Intent
3. User has a choice of selecting from various Fragments within the Navigation Drawer (Home, Favourites, Help, etc.) <-- This does not work any longer as the list view overlaps the MainActivity completely, including the toolbar which allows access to the Navigation Drawer (which is what I want to display within my Fragment "Home") -->

I have also created Product class to hold methods for Image, Title and Description within the ListView/GridView. I've also created ListViewAdapter and GridViewAdapter classes to extend the 'Products' held within the ListView/GridView.

MainActivity.java:

import android.content.SharedPreferences;
import android.os.Bundle;
import android.support.v4.app.FragmentTransaction;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewStub;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.ListView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity
        implements NavigationView.OnNavigationItemSelectedListener {

    private ViewStub stubGrid;
    private ViewStub stubList;
    private ListView listView;
    private GridView gridView;
    private ListViewAdapter listViewAdapter;
    private GridViewAdapter gridViewAdapter;
    private List<Product> productList;
    private int currentViewMode = 0;

    static final int VIEW_MODE_LISTVIEW = 0;
    static final int VIEW_MODE_GRIDVIEW = 1;

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

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

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        drawer.setDrawerListener(toggle);
        toggle.syncState();

        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);

        stubList = (ViewStub) findViewById(R.id.stub_list);
        stubGrid = (ViewStub) findViewById(R.id.stub_grid);

        // Inflate ViewStub before we get view
        stubList.inflate();
        stubGrid.inflate();

        listView = (ListView) findViewById(R.id.myListView);
        gridView = (GridView) findViewById(R.id.myGridView);

        // Get list of products
        getProductList();

        // Get current view mode in shared preferences
        SharedPreferences sharedPreferences = getSharedPreferences("View Mode", MODE_PRIVATE);
        currentViewMode = sharedPreferences.getInt("currentViewMode", VIEW_MODE_LISTVIEW); // Default view is ListView

        // Register item click
        //listView.setOnItemClickListener(onItemClick);
        //gridView.setOnItemClickListener(onItemClick);

        switchView();
    }

    private void switchView() {
        if (VIEW_MODE_LISTVIEW == currentViewMode) {
            // Display ListView
            stubList.setVisibility(View.VISIBLE);
            // Hide GridView
            stubGrid.setVisibility(View.GONE);
        } else {
            // Hide ListView
            stubList.setVisibility(View.GONE);
            // Display GridView
            stubGrid.setVisibility(View.VISIBLE);
        }

        setAdapters();

    }

    private void setAdapters() {
        if (VIEW_MODE_LISTVIEW == currentViewMode) {
            listViewAdapter = new ListViewAdapter(this, R.layout.list_item, productList);
            listView.setAdapter(listViewAdapter);
        } else {
            gridViewAdapter = new GridViewAdapter(this, R.layout.grid_item, productList);
            gridView.setAdapter(gridViewAdapter);
        }
    }

    @Override
    public void onBackPressed() {
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        if (drawer.isDrawerOpen(GravityCompat.START)) {
            drawer.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.item_menu_1:
                if (VIEW_MODE_LISTVIEW == currentViewMode) {
                    currentViewMode = VIEW_MODE_GRIDVIEW;
                } else {
                    currentViewMode = VIEW_MODE_LISTVIEW;
                }
                // Switch view
                switchView();
                // Save view mode in share preferences
                SharedPreferences sharePreferences = getSharedPreferences("ViewMode", MODE_PRIVATE);
                SharedPreferences.Editor editor = sharePreferences.edit();
                editor.putInt("currentViewMode", currentViewMode);
                editor.commit();

                break;
        }
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        /*
        if (id == R.id.action_settings) {
            return true;
        }
        */

        return super.onOptionsItemSelected(item);
    }

    @SuppressWarnings("StatementWithEmptyBody")
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        // Handle navigation view item clicks here.
        int id = item.getItemId();

        if (id == R.id.first_fragment) {
            setTitle("Home");
            FirstFragment fragment = new FirstFragment();
            FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
            fragmentTransaction.replace(R.id.frame, fragment, "fragment1");
            fragmentTransaction.commit();
        } else if (id == R.id.second_fragment) {
            setTitle("Favourites");
            SecondFragment fragment = new SecondFragment();
            FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
            fragmentTransaction.replace(R.id.frame, fragment, "fragment2");
            fragmentTransaction.commit();
        } else if (id == R.id.third_fragment) {
            setTitle("Account");
            ThirdFragment fragment = new ThirdFragment();
            FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
            fragmentTransaction.replace(R.id.frame, fragment, "fragment3");
            fragmentTransaction.commit();
        } else if (id == R.id.fourth_fragment) {
            setTitle("Help & Feedback");
            FourthFragment fragment = new FourthFragment();
            FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
            fragmentTransaction.replace(R.id.frame, fragment, "fragment4");
            fragmentTransaction.commit();
        }

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawer.closeDrawer(GravityCompat.START);
        return true;
    }

    public List<Product> getProductList() {
        // Pseudo code to get product, replace your code to get product here
        productList = new ArrayList<>();
        productList.add(new Product(R.drawable.nightclub, "Title 1", "This is description 1"));
        productList.add(new Product(R.drawable.nightclub, "Title 2", "This is description 2"));
        productList.add(new Product(R.drawable.nightclub, "Title 3", "This is description 3"));
        productList.add(new Product(R.drawable.nightclub, "Title 4", "This is description 4"));
        productList.add(new Product(R.drawable.nightclub, "Title 5", "This is description 5"));
        productList.add(new Product(R.drawable.nightclub, "Title 6", "This is description 6"));
        productList.add(new Product(R.drawable.nightclub, "Title 7", "This is description 7"));
        productList.add(new Product(R.drawable.nightclub, "Title 8", "This is description 8"));
        productList.add(new Product(R.drawable.nightclub, "Title 9", "This is description 9"));
        productList.add(new Product(R.drawable.nightclub, "Title 10", "This is description 10"));

        return productList;
    }

    /*
    AdapterView.OnItemClickListener onItemClick = new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            // Do something when u ser clicks an item
            Toast.makeText(getApplicationContext(), productList.get(position).getTitle() + " - " + productList.get(position).getDescription(), Toast.LENGTH_SHORT).show();
        }
    };*/
}

Content_Main.xml

<?xml version="1.0" encoding="utf-8"?>
<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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.example.michael.whatsupldn.MainActivity"
    tools:showIn="@layout/app_bar_main">

    <FrameLayout
        android:id="@+id/frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:alpha="200"/>
</LinearLayout>

Activity_Main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayoutx mlns: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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer"/>

    <ViewStub
        android:id="@+id/stub_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:inflatedId="@+id/showlayout"
        android:layout="@layout/my_listview"/>

    <ViewStub
        android:id="@+id/stub_grid"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:inflatedId="@+id/showlayout"
        android:layout="@layout/my_gridview"/>

</android.support.v4.widget.DrawerLayout>

app_bar_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context="com.example.michael.whatsupldn.MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/london_skyline_dark"
        android:layout_alignParentTop="true"
        android:id="@+id/imageView"
        android:contentDescription="@string/london_skyline"/>

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        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"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <include layout="@layout/content_main" />

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

Emulator Output of MainActivity:

Expected Output:

Navigation Drawer with Fragments: (I'd like to insert the list view into 'Home' Fragment

Any help will be much appreciated!

Answer 1

First of all, DrawerLayout can hold at-most two child views. First view contains the main content for the screen (your primary layout when the drawer is hidden) and Second view contains the contents of the navigation drawer.

See Documentation

SOLUTION:

1. Remove ViewStub for ListView and GridView from activity_Main layout.

// activity_Main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayoutx mlns: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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer"/>

</android.support.v4.widget.DrawerLayout>

2. Instead of ListView and GridView, just use only RecyclerView with different LayoutManager. Use LinearLayoutManager for list and GridLayoutManager for grid. Assuming that you are using FirstFragment as HomeFragment. In your FirstFragment layout XML, add a RecyclerView for showing list or grid.

// first_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_height="match_parent"
    android:layout_width="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false" />

</RelativeLayout>

3. In your FirstFragment class, add two layout manager(LinearLayoutManager and GridLayoutManager).

If you want to show List then use LinearLayoutManager and for Grid use GridLayoutManager with RecyclerView. Toggle view by calling method toggleListGrid().

Update your FirstFragment as below:

//FirstFragment.java

.........
...............

RecyclerView mRecyclerView;

RecyclerView.LayoutManager mGridLayoutManager;
RecyclerView.LayoutManager mLinearLayoutManager;

boolean isList = false; // By default list will be shown


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

    // Required for option menu
    setHasOptionsMenu(true);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.first_fragment, null);

    //REFERENCE
    mRecyclerView = (RecyclerView) rootView.findViewById(R.id.recycler_view);

    // Layout manager
    mGridLayoutManager = new GridLayoutManager(getActivity(), 2);
    mLinearLayoutManager = new LinearLayoutManager(getActivity(), LinearLayoutManager.VERTICAL, false);

    // Set layout manager
    toggleListGrid();


    // Set adapter to RecyclerView
    ...............
    ....................

    return rootView;
}

public void toggleListGrid() {

    isList = !isList;

    if(isList)
        mRecyclerView.setLayoutManager(mLinearLayoutManager);
    else
        mRecyclerView.setLayoutManager(mGridLayoutManager);
}

@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) 
{
    // Inflate the menu; this adds items to the action bar if it is present.
    inflater.inflate(R.menu.main, menu);

    super.onCreateOptionsMenu(menu, inflater);
}   

@Override
public boolean onOptionsItemSelected(MenuItem item)
{
    switch(item.getItemId())
    {
        case R.id.item_menu_1:
        {
            // Change view
            toggleListGrid();
            return true;
        }
        default:
            return super.onOptionsItemSelected(item);       
    }
}

.........
...................

4. Add an RecyclerView.Adapter to populate your data on RecyclerView.

Here is a good tutorial about RecyclerView: Android NavigationView – Fragments With RecyclerView

Hope this will help~

Answer 2

You should add this line of code app:layout_behavior="@string/appbar_scrolling_view_behavior" in your stub_list and stub_list ViewStub xml declaration, that should position it directly below the appbar; you can read more about that here under the CoordinatorLayout and the app bar section