实施汉堡包菜单后无法在网格视图布局中滚动

Question

I have a gridview layout in main activity file. Initially i was able to see all the images by scrolling but later when i added a hamburger menu in the same activity the gridview images didn't show all the images and i am also unable to scroll. I added the scrollview in activity.xml file, the app unfortunately stops. This is logcat:

08-01 13:14:05.028 6153-6153/com.example.luke.goweb E/AndroidRuntime: FATAL EXCEPTION: main
                                                                      Process: com.example.luke.goweb, PID: 6153
                                                                      java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.luke.goweb/com.example.luke.goweb.MainActivity}: android.view.InflateException: Binary XML file line #88: ScrollView can host only one direct child
                                                                          at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2416)
                                                                          at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2476)
                                                                          at android.app.ActivityThread.-wrap11(ActivityThread.java)
                                                                          at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1344)
                                                                          at android.os.Handler.dispatchMessage(Handler.java:102)
                                                                          at android.os.Looper.loop(Looper.java:148)
                                                                          at android.app.ActivityThread.main(ActivityThread.java:5417)
                                                                          at java.lang.reflect.Method.invoke(Native Method)
                                                                          at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
                                                                          at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)
                                                                       Caused by: android.view.InflateException: Binary XML file line #88: ScrollView can host only one direct child
                                                                          at android.view.LayoutInflater.inflate(LayoutInflater.java:539)
                                                                          at android.view.LayoutInflater.inflate(LayoutInflater.java:423)
                                                                          at android.view.LayoutInflater.inflate(LayoutInflater.java:374)
                                                                          at android.support.v7.app.AppCompatDelegateImplV7.setContentView(AppCompatDelegateImplV7.java:280)
                                                                          at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:140)
                                                                          at com.example.luke.goweb.MainActivity.onCreate(MainActivity.java:38)
                                                                          at android.app.Activity.performCreate(Activity.java:6237)
                                                                          at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1107)
                                                                          at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2369)
                                                                          at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2476) 
                                                                          at android.app.ActivityThread.-wrap11(ActivityThread.java) 
                                                                          at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1344) 
                                                                          at android.os.Handler.dispatchMessage(Handler.java:102) 
                                                                          at android.os.Looper.loop(Looper.java:148) 
                                                                          at android.app.ActivityThread.main(ActivityThread.java:5417) 
                                                                          at java.lang.reflect.Method.invoke(Native Method) 
                                                                          at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726) 
                                                                          at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616) 
                                                                       Caused by: java.lang.IllegalStateException: ScrollView can host only one direct child
                                                                          at android.widget.ScrollView.addView(ScrollView.java:269)
                                                                          at android.view.LayoutInflater.rInflate(LayoutInflater.java:839)
                                                                          at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:798)
                                                                          at android.view.LayoutInflater.inflate(LayoutInflater.java:515)
                                                                          at android.view.LayoutInflater.inflate(LayoutInflater.java:423) 
                                                                          at android.view.LayoutInflater.inflate(LayoutInflater.java:374) 
                                                                          at android.support.v7.app.AppCompatDelegateImplV7.setContentView(AppCompatDelegateImplV7.java:280) 
                                                                          at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:140) 
                                                                          at com.example.luke.goweb.MainActivity.onCreate(MainActivity.java:38) 
                                                                          at android.app.Activity.performCreate(Activity.java:6237) 
                                                                          at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1107) 
                                                                          at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2369) 
                                                                          at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2476) 
                                                                          at android.app.ActivityThread.-wrap11(ActivityThread.java) 
                                                                          at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1344) 
                                                                          at android.os.Handler.dispatchMessage(Handler.java:102) 
                                                                          at android.os.Looper.loop(Looper.java:148) 
                                                                          at android.app.ActivityThread.main(ActivityThread.java:5417) 
                                                                          at java.lang.reflect.Method.invoke(Native Method) 

It says scrollview can host only one direct child . It's working fine in framelayout but i am unable to see all the images and also not able to scroll. And in scrollview it unfortunately stops. But I want the gridview and the hamburger menu on the same activity page. Here is the activity.xml code:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:verticalSpacing="2dp"
        android:horizontalSpacing="2dp"
        android:stretchMode="columnWidth"
        android:numColumns="2"/>
    <android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<!-- The main content view -->
<RelativeLayout
    android:id="@+id/mainContent"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<!-- The navigation drawer -->
<RelativeLayout
    android:layout_width="280dp"
    android:layout_height="match_parent"
    android:id="@+id/drawerPane"
    android:layout_gravity="start">

    <!-- Profile Box -->

    <RelativeLayout
        android:id="@+id/profileBox"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@color/material_blue_grey_800"
        android:padding="8dp" >

        <ImageView
            android:id="@+id/avatar"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/ic_account_circle_black_24dp"
            android:layout_marginTop="15dp" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="42dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="15dp"
            android:layout_toRightOf="@+id/avatar"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/userName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Username"
                android:textColor="#fff"
                android:textSize="16sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/desc"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_marginTop="4dp"
                android:text="View Profile"
                android:textColor="#fff"
                android:textSize="12sp" />
        </LinearLayout>
    </RelativeLayout>

    <!-- List of Actions (pages) -->
    <ListView
        android:id="@+id/navList"
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:layout_below="@+id/profileBox"
        android:choiceMode="singleChoice"
        android:background="#ffffffff" />

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

Any help ? Or any suggestions ? Thank you in advance.

Answer 1

Hmm, that shouldn't happen. Try wrapping your GridView in a LinearLayout and then placing that LinearLayout inside the ScrollView. I've always had good luck with LinearLayouts inside ScrollViews...

EDIT: maybe your hamburger menu is partly to blame as well. Try Google's approach to Navigation Drawers (documentation here ), which is to place them in a separate fragment entirely. This has the benefit of allowing you to use that menu in multiple Activities without having to copy that XML everywhere.

EDIT 2: I just noticed you're including the DrawerLayout from the approach above inside your FrameLayout. Inside a ScrollView, it is guaranteed to cause a crash. If you move it outside the ScrollView, your problems should go away.

Answer 2

As you mentioned you were able to view and scroll all the images in grid view. But the scroll didn't work after implementing the hamburger menu or the navigation drawer. What i will say that don't mix up the layout code of navigation drawer and grid layout you better separate these two files and call it whenever you need. Here is the complete code to implement navigation drawer. Hope this helps you. First create an xml file and add these codes:

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- The main content view -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!-- The navigation drawer -->
    <ListView android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#111"/>
</android.support.v4.widget.DrawerLayout>

Later create a DrawerItemClickListener class and add these code:

private class DrawerItemClickListener implements ListView.OnItemClickListener {
    @Override
    public void onItemClick(AdapterView parent, View view, int position, long id) {
        selectItem(position);
    }
}

/** Swaps fragments in the main content view */
private void selectItem(int position) {
    // Create a new fragment and specify the planet to show based on position
    Fragment fragment = new PlanetFragment();
    Bundle args = new Bundle();
    args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position);
    fragment.setArguments(args);

    // Insert the fragment by replacing any existing fragment
    FragmentManager fragmentManager = getFragmentManager();
    fragmentManager.beginTransaction()
                   .replace(R.id.content_frame, fragment)
                   .commit();

    // Highlight the selected item, update the title, and close the drawer
    mDrawerList.setItemChecked(position, true);
    setTitle(mPlanetTitles[position]);
    mDrawerLayout.closeDrawer(mDrawerList);
}

@Override
public void setTitle(CharSequence title) {
    mTitle = title;
    getActionBar().setTitle(mTitle);
}

Now it's time to write something in your MainActivity source file

public class MainActivity extends Activity {
    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;
    private CharSequence mDrawerTitle;
    private CharSequence mTitle;
    ...

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

        mTitle = mDrawerTitle = getTitle();
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
                R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {

            /** Called when a drawer has settled in a completely closed state. */
            public void onDrawerClosed(View view) {
                super.onDrawerClosed(view);
                getActionBar().setTitle(mTitle);
                invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
            }

            /** Called when a drawer has settled in a completely open state. */
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                getActionBar().setTitle(mDrawerTitle);
                invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
            }
        };

        // Set the drawer toggle as the DrawerListener
        mDrawerLayout.setDrawerListener(mDrawerToggle);
    }

    /* Called whenever we call invalidateOptionsMenu() */
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        // If the nav drawer is open, hide action items related to the content view
        boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
        menu.findItem(R.id.action_websearch).setVisible(!drawerOpen);
        return super.onPrepareOptionsMenu(menu);
    }
}

After this you will be able to view your full grid layout as well as navigation drawer. Swipe the screen from left to right you will see the navigation drawer. To add the action with an App icon you can go through the link by @Shobhik . You can also go for RecyclerView with a GridLayout as suggested by @cricket_007 . Follow any of these advice or this code will get your job done !!

Answer 3

FrameLayout can contain a lot of child but ScrollView can not. If you want to still use ScrollView add a LinearLayout or something else as parent of other childs.