How to make whole page scrollable

Question

I have a activity which has a DrawerLayout, ImageView, TextView and GridView. I want the whole page to scroll but only grid view ha scroll.

This is my xml.

 <ScrollView 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="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
    android:id="@+id/rel"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent">

    <!-- everything you already have -->
    <android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <include
            android:id="@+id/app_bar"
            layout="@layout/home_app_bar" />


            <ImageView
                android:id="@+id/imageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/picker1"
                android:layout_below="@+id/app_bar"
                android:layout_alignLeft="@+id/welcome"
                android:layout_alignStart="@+id/welcome"
                android:layout_marginTop="20dp"/>
            <android.support.v4.view.ViewPager
                android:id="@+id/pager"
                android:layout_below="@+id/welcome"
                android:layout_width="fill_parent"
                android:layout_height="150dp">
            </android.support.v4.view.ViewPager>

            <TextView
                android:id="@+id/welcome"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/imageView"
                android:padding="5dp"
                android:layout_marginTop="10dp"
                android:layout_marginLeft="5dp"
                android:text="Welcome,"
                android:textColor="#000000"
                android:textSize="15sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:text="Guest"
                android:textColor="@color/accentColor"
                android:textSize="15sp"
                android:id="@+id/name"
                android:layout_alignTop="@+id/welcome"
                android:layout_toRightOf="@+id/welcome"
                android:layout_toEndOf="@+id/welcome" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Date"
                android:layout_marginRight="10dp"
                android:padding="5dp"
                android:textColor="#000000"
                android:textSize="15sp"
                android:id="@+id/date"
                android:layout_alignTop="@+id/name"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true" />

            <GridView
                android:id="@+id/gridview"
                android:layout_width="match_parent"
                android:layout_height="fill_parent"
                android:columnWidth="80dp"
                android:numColumns="3"
                android:verticalSpacing="16dp"
                android:horizontalSpacing="16dp"
                android:padding="12dp"
                android:stretchMode="columnWidth"
                android:gravity="center"
                android:background="#ffffff"
                android:layout_below="@+id/pager"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Free Listing"
                android:id="@+id/buttonFreeListing"
                android:background="@color/primaryColorDark"
                android:textColor="#ffffff"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true" />

            <Spinner
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/spinnerCity"
                android:layout_marginLeft="20dp"
                android:background="@drawable/edittext"
                android:layout_marginTop="20dp"
                android:layout_marginRight="10dp"
                android:layout_alignBottom="@+id/imageView"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true"
                android:layout_toRightOf="@+id/name"
                android:layout_toEndOf="@+id/name"
                android:layout_below="@+id/app_bar" />


        <fragment
            android:id="@+id/fragment_navigation_drawer"
            android:name="com.techieweb.solutions.pickeronline.NavigationDrawerFragment"
            android:layout_width="280dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:layout="@layout/fragment_navigation_drawer"
            tools:layout="@layout/fragment_navigation_drawer" />

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

</RelativeLayout>
</ScrollView>

Please help me how to do this.

score 1 · Accepted Answer · edited May 23 '17 at 11:44

You can not put GridView inside ScrollView simply because both have scrolling effect..

So if you want to have GridView inside ScrollView you have to do programatically like Problems with GridView inside ScrollView in android and How to put GridView inside ScrollView posts..

You can have TableLayout in place of GridView and then put everything inside ScrollView like ..

<android.support.v4.widget.DrawerLayout  
  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:id="@+id/drawer_layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <ScrollView 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
     <RelativeLayout
     android:id="@+id/rel"
     android:layout_width="wrap_content"
     android:layout_height="fill_parent">

          //-----// 
     <TableLayout 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
          <TableRow
           android:layout_width="fill_parent"
           android:layout_height="fill_parent">
          </TableRow>
     </TableLayout> 
     </RelativeLayout>
  </ScrollView> 
<fragment
android:id="@+id/fragment_navigation_drawer"   
//--//
</android.support.v4.widget.DrawerLayout>

Archit Goel · Answer 2 · 2015-11-24T10:51:13.567

0

Adjust your Views in such a way that parent view is ScrollView and it has just one child View and the rest of your code is in this one child view. For example:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
      <RelativeLayout>
        <!-- everything you already have -->
      </RelativeLayout>
</ScrollView>

edited Nov 24 '15 at 10:51

answered Nov 24 '15 at 10:41

Archit Goel

694
5
19

You tried putting all of your code inside a scrollview? – Archit Goel Nov 24 '15 at 10:44
Using a scrollview instead of DrawerLayout? – Archit Goel Nov 24 '15 at 10:47
try using LinearLayout instead of RelativeLayout as child of scrollview with orientation as vertical – Archit Goel Nov 24 '15 at 11:32

score 0 · Answer 3 · answered Nov 24 '15 at 10:50

0

Make two childs inyour DrawerLayout

ScrollView
DrawerFragment

Inside ScrollView have LinearLayout with orientation vertical and put everything else inside the LinearLayout.

This will sure help you.

answered Nov 24 '15 at 10:50

Aawaz Gyawali

3,244
5
28
48

score 0 · Answer 4 · answered Nov 24 '15 at 10:55

you can try like this....

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" >

<RelativeLayout android:id="@+id/rel" >

    <include
        android:id="@+id/app_bar"
        layout="@layout/home_app_bar" />

    <ScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        // your other view
    </ScrollView>
</RelativeLayout>

<fragment android:id="@+id/fragment_navigation_drawer" />

score 0 · Answer 5 · answered Nov 24 '15 at 10:56

try this code

     <android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<RelativeLayout
    android:id="@+id/rel"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent">

    <ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    >
    <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="fill_parent">

    <include
        android:id="@+id/app_bar"
        layout="@layout/home_app_bar" />


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/picker1"
        android:layout_below="@+id/app_bar"
        android:layout_alignLeft="@+id/welcome"
        android:layout_alignStart="@+id/welcome"
        android:layout_marginTop="20dp"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_below="@+id/welcome"
        android:layout_width="fill_parent"
        android:layout_height="150dp">
    </android.support.v4.view.ViewPager>

    <TextView
        android:id="@+id/welcome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView"
        android:padding="5dp"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="5dp"
        android:text="Welcome,"
        android:textColor="#000000"
        android:textSize="15sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:text="Guest"
        android:textColor="@color/accentColor"
        android:textSize="15sp"
        android:id="@+id/name"
        android:layout_alignTop="@+id/welcome"
        android:layout_toRightOf="@+id/welcome"
        android:layout_toEndOf="@+id/welcome" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Date"
        android:layout_marginRight="10dp"
        android:padding="5dp"
        android:textColor="#000000"
        android:textSize="15sp"
        android:id="@+id/date"
        android:layout_alignTop="@+id/name"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />


    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:columnWidth="80dp"
        android:numColumns="3"
        android:verticalSpacing="16dp"
        android:horizontalSpacing="16dp"
        android:padding="12dp"
        android:stretchMode="columnWidth"
        android:gravity="center"
        android:background="#ffffff"
        android:layout_below="@+id/pager"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Free Listing"
        android:id="@+id/buttonFreeListing"
        android:background="@color/primaryColorDark"
        android:textColor="#ffffff"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <Spinner
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/spinnerCity"
        android:layout_marginLeft="20dp"
        android:background="@drawable/edittext"
        android:layout_marginTop="20dp"
        android:layout_marginRight="10dp"
        android:layout_alignBottom="@+id/imageView"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_toRightOf="@+id/name"
        android:layout_toEndOf="@+id/name"
        android:layout_below="@+id/app_bar" />

</RelativeLayout>
</ScrollView>
</RelativeLayout>
<fragment
    android:id="@+id/fragment_navigation_drawer"
    android:name="com.techieweb.solutions.pickeronline.NavigationDrawerFragment"
    android:layout_width="280dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:layout="@layout/fragment_navigation_drawer"
    tools:layout="@layout/fragment_navigation_drawer" />

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

How to make whole page scrollable

5 Answers5