Scrollview having HorizontalScrollview lags when scrolling

Question

I am trying to use horizontal scrollview inside a scroll view. My parent scroll isn't scrolling smoothly. Although my child scroll is scrolling smoothly, I want to achieve smooth scrolling of parent scroll. I have tried every method, I have in my mind setting HardwareAccelerated to false worked but it removed elevation from my views.

Main Activity

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"

android:background="#ECEFF1"

android:clipToPadding="false">

<RelativeLayout
    android:layout_width="250dp"
    android:layout_height="90dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginLeft="75dp"
    android:layout_marginTop="100dp"
    android:background="@drawable/round_corners"
    android:clipToPadding="false"


    android:elevation="5dp"
    android:translationZ="5dp"
    tools:layout_editor_absoluteX="42dp"
    tools:layout_editor_absoluteY="121dp">

    <ImageView
        android:id="@+id/enquiry"

        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_alignParentEnd="true"
        android:layout_alignTop="@+id/visa"
        android:layout_marginEnd="35dp"
        app:srcCompat="@drawable/phone" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignTop="@+id/textView2"
        android:layout_marginEnd="20dp"
        android:text="Enquiry"
        android:textColor="@color/navigationBarColor"
        android:textSize="15sp" />

    <ImageView
        android:id="@+id/visa"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_alignTop="@+id/holidays"
        android:layout_centerHorizontal="true"
        app:srcCompat="@drawable/globe" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/textView3"
        android:layout_centerHorizontal="true"
        android:text="Visa"
        android:textColor="@android:color/background_dark"
        android:textSize="15sp" />

    <ImageView
        android:id="@+id/holidays"
        android:layout_width="25dp"
        android:layout_height="32dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="35dp"
        android:layout_marginTop="18dp"
        app:srcCompat="@drawable/plane" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="14dp"
        android:layout_marginStart="20dp"
        android:text="Holidays"
        android:textColor="@android:color/background_dark" />
 </RelativeLayout>

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

 <Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="false"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:background="@color/colorPrimary"
    android:fontFamily="serif"
    android:text="Call"
    android:textColor="@color/textColorPrimary"
    android:textSize="20sp" />

<ScrollView
    android:id="@+id/parent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"


    android:layout_marginTop="200dp"
    android:scrollbars="none">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="30dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentStart="true"
            android:layout_marginBottom="0dp"
            android:layout_marginLeft="25dp"
            android:layout_marginTop="50dp"
            android:text="Pilgrimage"
            android:textColor="@android:color/background_dark"
            android:textSize="25sp"
            android:textStyle="bold" />

        <android.support.v7.widget.CardView
            android:id="@+id/pilg"
            class="com.example.admin.myapplication.Pilgrimage"
            android:layout_width="320dp"
            android:layout_height="240dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginLeft="25dp"
            android:layout_marginTop="20dp"

            android:background="@drawable/round_corners"
            android:elevation="5dp">


            <ImageView
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:background="@drawable/hu" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="100dp"
                android:layout_marginTop="155dp"
                android:fontFamily="serif"
                android:text="Hajj And Umrah"
                android:textColor="@color/navigationBarColor"
                android:textSize="15sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="190dp"
                android:text="Ramzan Umrah"
                android:textColor="@color/colorPrimaryDark"
                android:textSize="12sp"

                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="210dp"
                android:layout_marginTop="190dp"
                android:text="29 Days/30 Nights"
                android:textColor="@color/colorPrimaryDark"
                android:textSize="12sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="205dp"
                android:text="Starts From Rs.65,000/-"
                android:textColor="@color/colorPrimaryDark"
                android:textSize="12sp" />

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

        <TextView
            android:id="@+id/textView6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="25dp"
            android:layout_marginTop="25dp"
            android:text="Holiday Packages"
            android:textColor="@color/navigationBarColor"
            android:textSize="25sp"
            android:textStyle="bold" />

        <HorizontalScrollView
            android:id="@+id/child"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="none">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:orientation="horizontal">

                <RelativeLayout
                    android:id="@+id/international"
                    class="com.example.admin.myapplication.International"
                    android:layout_width="200dp"
                    android:layout_height="225dp"
                    android:layout_marginBottom="30dp"
                    android:layout_marginLeft="25dp"
                    android:layout_marginTop="20dp"

                    android:background="@mipmap/ll"
                    android:elevation="5dp"
                    android:padding="-25dp">

                    <TextView
                        android:id="@+id/textView11"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentBottom="true"
                        android:layout_centerHorizontal="true"
                        android:layout_marginBottom="11dp"
                        android:fontFamily="serif"
                        android:text="International"
                        android:textColor="@color/textColorPrimary"
                        android:textSize="20sp" />
                </RelativeLayout>


                <RelativeLayout
                    android:id="@+id/dom1"
                    android:layout_width="200dp"
                    android:layout_height="225dp"
                    android:layout_marginBottom="30dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="25dp"
                    android:layout_marginTop="20dp"
                    android:background="@mipmap/rajasthan"
                    android:elevation="5dp">


                    <TextView
                        android:id="@+id/textView12"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentBottom="true"
                        android:layout_centerHorizontal="true"
                        android:layout_marginBottom="12dp"
                        android:fontFamily="serif"
                        android:text="Domestic"
                        android:textColor="@color/textColorPrimary"
                        android:textSize="20sp" />
                </RelativeLayout>
            </LinearLayout>
        </HorizontalScrollView>

        <TextView
            android:id="@+id/textView10"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="30dp"
            android:layout_marginLeft="25dp"
            android:layout_marginTop="25dp"
            android:text="Social"
            android:textColor="@color/navigationBarColor"
            android:textSize="25sp" />

        <LinearLayout
            android:layout_width="335dp"
            android:layout_height="50dp"
            android:layout_marginBottom="100dp"
            android:layout_marginLeft="25dp"
            android:orientation="horizontal">

        </LinearLayout>

    </LinearLayout>
 </ScrollView>

 <TextView
    android:id="@+id/textView13"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="14dp"
    android:fontFamily="serif"
    android:text="Al Shariq Enterprises"
    android:textColor="@color/textColorPrimary"
    android:textSize="20sp"
    android:textStyle="bold" />


  </RelativeLayout>

in top of your layout please try using nestedScroll then I guess it should work fine! just_a_tip — Rizwan Atta, Apr 25 '18 at 08:16
for horizontal scroll people are oriented towards usage of RecyclerView single row gridView! that is way smoother! HorizontalScrollView its famous for its lacky behave — Rizwan Atta, Apr 25 '18 at 08:43

Abhinav Gupta · Accepted Answer · 2018-04-25T09:55:49.593

Try this NestedScrollView like this :-

  <LinearLayout
        android:layout_width="match_parent"                
        android:layout_height="wrap_content"                
        android:layout_marginTop="200dp">

  <android.support.v4.widget.NestedScrollView
        android:id="@+id/parent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="30dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentStart="true"
            android:layout_marginBottom="0dp"
            android:layout_marginLeft="25dp"
            android:layout_marginTop="50dp"
            android:text="Pilgrimage"
            android:textColor="@android:color/background_dark"
            android:textSize="25sp"
            android:textStyle="bold" />

        <android.support.v7.widget.CardView
            android:id="@+id/pilg"
            class="com.example.admin.myapplication.Pilgrimage"
            android:layout_width="320dp"
            android:layout_height="240dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginLeft="25dp"
            android:layout_marginTop="20dp"

            android:background="@drawable/round_corners"
            android:elevation="5dp">


            <ImageView
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:background="@drawable/hu" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="100dp"
                android:layout_marginTop="155dp"
                android:fontFamily="serif"
                android:text="Hajj And Umrah"
                android:textColor="@color/navigationBarColor"
                android:textSize="15sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="190dp"
                android:text="Ramzan Umrah"
                android:textColor="@color/colorPrimaryDark"
                android:textSize="12sp"

                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="210dp"
                android:layout_marginTop="190dp"
                android:text="29 Days/30 Nights"
                android:textColor="@color/colorPrimaryDark"
                android:textSize="12sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="205dp"
                android:text="Starts From Rs.65,000/-"
                android:textColor="@color/colorPrimaryDark"
                android:textSize="12sp" />

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

        <TextView
            android:id="@+id/textView6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="25dp"
            android:layout_marginTop="25dp"
            android:text="Holiday Packages"
            android:textColor="@color/navigationBarColor"
            android:textSize="25sp"
            android:textStyle="bold" />

        <HorizontalScrollView
            android:id="@+id/child"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="none">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:orientation="horizontal">

                <RelativeLayout
                    android:id="@+id/international"
                    class="com.example.admin.myapplication.International"
                    android:layout_width="200dp"
                    android:layout_height="225dp"
                    android:layout_marginBottom="30dp"
                    android:layout_marginLeft="25dp"
                    android:layout_marginTop="20dp"

                    android:background="@mipmap/ll"
                    android:elevation="5dp"
                    android:padding="-25dp">

                    <TextView
                        android:id="@+id/textView11"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentBottom="true"
                        android:layout_centerHorizontal="true"
                        android:layout_marginBottom="11dp"
                        android:fontFamily="serif"
                        android:text="International"
                        android:textColor="@color/textColorPrimary"
                        android:textSize="20sp" />
                </RelativeLayout>


                <RelativeLayout
                    android:id="@+id/dom1"
                    android:layout_width="200dp"
                    android:layout_height="225dp"
                    android:layout_marginBottom="30dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="25dp"
                    android:layout_marginTop="20dp"
                    android:background="@mipmap/rajasthan"
                    android:elevation="5dp">


                    <TextView
                        android:id="@+id/textView12"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentBottom="true"
                        android:layout_centerHorizontal="true"
                        android:layout_marginBottom="12dp"
                        android:fontFamily="serif"
                        android:text="Domestic"
                        android:textColor="@color/textColorPrimary"
                        android:textSize="20sp" />
                </RelativeLayout>
            </LinearLayout>
        </HorizontalScrollView>

        <TextView
            android:id="@+id/textView10"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="30dp"
            android:layout_marginLeft="25dp"
            android:layout_marginTop="25dp"
            android:text="Social"
            android:textColor="@color/navigationBarColor"
            android:textSize="25sp" />

        <LinearLayout
            android:layout_width="335dp"
            android:layout_height="50dp"
            android:layout_marginBottom="100dp"
            android:layout_marginLeft="25dp"
            android:orientation="horizontal">

        </LinearLayout>

    </LinearLayout>
 </android.support.v4.widget.NestedScrollView>
</LinearLayout>

For basic details you can check this link.

score 0 · Answer 2 · edited Apr 25 '18 at 08:52

0

I think that this happens because both of your ScrollViews reacts to scrolling so it seems to you that it lags, but it actually don't, its just vertical ScrollView interrupting horizontal ScrollView.

It is not recommended using ScrollView inside another ScrollView. Instead use NestedScrollView as in this answer.

edited Apr 25 '18 at 08:52

Rumit Patel

8,830
18
51
70

answered Apr 25 '18 at 08:17

Equa

54
5

Problem persists.. it is still scrolling slowly – Shariq Ahmed Shah Apr 25 '18 at 08:28

Scrollview having HorizontalScrollview lags when scrolling

2 Answers2