android android-layout android-scrollview horizontalscrollview

Horizontal ScrollView lagging after adding two or more horizontal scrollviews

{Horizontal ScrollView lagging after adding two or more horizantal scrollviews}

Application was working perfect when two horizontal scrollviews were in the activity, but when I added the third one it starts lagging.

Edit: added XML layout:

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#77a9f9"
tools:context="in.trentweet.socialaccess.home"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/social"
android:layout_marginTop="20dp"
android:text="Social Media:"
android:textSize="20sp"/>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:scrollbarAlwaysDrawHorizontalTrack="true"
android:fillViewport="true">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="90dp"
android:background="#e2e2e2"
android:orientation="horizontal"
android:weightSum="1">

<ImageButton
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginBottom="5dp"
android:clickable="true"
android:id="@+id/fb"
android:background="@drawable/facebook"/>
<ImageButton
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:id="@+id/tw"
android:clickable="true"
android:background="@drawable/twitter"/>
<ImageButton
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:id="@+id/google"
android:background="@drawable/google"/>
<ImageButton
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:id="@+id/insta"
android:background="@drawable/insta"/>
<ImageButton
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:id="@+id/tumblr"
android:background="@drawable/tumblr"/>
<ImageButton
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:id="@+id/yt"
android:background="@drawable/yt"/>
<ImageButton
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:id="@+id/gag"
android:background="@drawable/gag"/>
<ImageButton
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:id="@+id/pin"
android:background="@drawable/pin"/>

</LinearLayout>
</HorizontalScrollView>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/news"
android:text="News:"
android:textSize="20sp"
android:layout_marginTop="5dp"/>

<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:scrollbarAlwaysDrawHorizontalTrack="true"
android:fillViewport="true">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="90dp"
android:background="#e2e2e2"
android:orientation="horizontal"
android:weightSum="1">
<ImageButton
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginBottom="5dp"
android:id="@+id/toi"
android:clickable="true"
android:background="@drawable/toi"/>
<ImageButton
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:id="@+id/ndtv"
android:clickable="true"
android:background="@drawable/ndtv"/>
<ImageButton
android:layout_width="75dp"
android:layout_height="72dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:id="@+id/th"
android:clickable="true"
android:background="@drawable/th"/>
</LinearLayout>
</HorizontalScrollView>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sports:"
android:id="@+id/sports"
android:layout_marginTop="20dp"
android:textSize="20sp"/>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="5dp"
android:scrollbarAlwaysDrawHorizontalTrack="true"
android:fillViewport="true">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="90dp"
android:background="#e2e2e2"
android:orientation="horizontal"
android:weightSum="1">

<ImageButton
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginBottom="5dp"
android:id="@+id/espn"
android:clickable="true"
android:background="@drawable/espn"/>
<ImageButton
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:id="@+id/nba"
android:clickable="true"
android:background="@drawable/nba"/>
<ImageButton
android:layout_width="75dp"
android:layout_height="72dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:id="@+id/cric"
android:clickable="true"
android:background="@drawable/cricbuzz"/>
<ImageButton
android:layout_width="75dp"
android:layout_height="72dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:id="@+id/goal"
android:clickable="true"
android:background="@drawable/goal"/>
<ImageButton
android:layout_width="75dp"
android:layout_height="72dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:id="@+id/fot"
android:clickable="true"
android:background="@drawable/fotmob"/>
<ImageButton
android:layout_width="75dp"
android:layout_height="72dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:id="@+id/sky"
android:clickable="true"
android:background="@drawable/sky"/>

</LinearLayout>
</HorizontalScrollView>
</LinearLayout>

Solution

I Modified your code now as follow. I used weightSum property of linear layout to manage your layout. I also changed your LinearLayout height inside Horizontal scrollview 90dp to match parent. Now just copy and paste it. it will fine with almost all screen size

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#77a9f9"
    android:weightSum="6"
    tools:context="in.trentweet.socialaccess.home"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1.1"
        android:id="@+id/social"
        android:layout_marginTop="10dp"
        android:text="Social Media:"
        android:textSize="20sp"/>
    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="5dp"
        android:layout_weight=".9"
        android:scrollbarAlwaysDrawHorizontalTrack="true"
        android:fillViewport="true">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="#e2e2e2"
            android:orientation="horizontal"
            android:weightSum="1">

            <ImageButton
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp"
                android:layout_marginBottom="5dp"
                android:clickable="true"
                android:id="@+id/fb"
                android:background="@drawable/facebook"/>

            <ImageButton
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp"
                android:id="@+id/tw"
                android:clickable="true"
                android:background="@drawable/twitter"/>

            <ImageButton
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp"
                android:id="@+id/google"
                android:background="@drawable/google"/>
            <ImageButton
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp"
                android:id="@+id/insta"
                android:background="@drawable/insta"/>
            <ImageButton
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp"
                android:id="@+id/tumblr"
                android:background="@drawable/tumblr"/>
            <ImageButton
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp"
                android:id="@+id/yt"
                android:background="@drawable/yt"/>
            <ImageButton
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp"
                android:id="@+id/gag"
                android:background="@drawable/gag"/>
            <ImageButton
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp"
                android:id="@+id/pin"
                android:background="@drawable/pin"/>

        </LinearLayout>
    </HorizontalScrollView>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:id="@+id/news"
        android:text="News:"
        android:layout_weight="1.1"
        android:textSize="20sp"
        android:layout_marginTop="5dp"/>


    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="5dp"
        android:layout_weight=".9"
        android:scrollbarAlwaysDrawHorizontalTrack="true"
        android:fillViewport="true">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="#e2e2e2"
            android:orientation="horizontal"
            android:weightSum="1">
            <ImageButton
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp"
                android:layout_marginBottom="5dp"
                android:id="@+id/toi"
                android:clickable="true"
                android:background="@drawable/toi"/>

            <ImageButton
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp"
                android:id="@+id/ndtv"
                android:clickable="true"
                android:background="@drawable/ndtv"/>

            <ImageButton
                android:layout_width="75dp"
                android:layout_height="72dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp"
                android:id="@+id/th"
                android:clickable="true"
                android:background="@drawable/th"/>
        </LinearLayout>
    </HorizontalScrollView>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="Sports:"
        android:layout_weight="1.1"
        android:id="@+id/sports"
        android:layout_marginTop="20dp"
        android:textSize="20sp"/>
    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="5dp"
        android:layout_weight=".9"
        android:scrollbarAlwaysDrawHorizontalTrack="true"
        android:fillViewport="true">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="#e2e2e2"
            android:orientation="horizontal"
            android:weightSum="1">

            <ImageButton
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp"
                android:layout_marginBottom="5dp"
                android:id="@+id/espn"
                android:clickable="true"
                android:background="@drawable/espn"/>
            <ImageButton
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp"
                android:id="@+id/nba"
                android:clickable="true"
                android:background="@drawable/nba"/>
            <ImageButton
                android:layout_width="75dp"
                android:layout_height="72dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp"
                android:id="@+id/cric"
                android:clickable="true"
                android:background="@drawable/cricbuzz"/>
            <ImageButton
                android:layout_width="75dp"
                android:layout_height="72dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp"
                android:id="@+id/goal"
                android:clickable="true"
                android:background="@drawable/goal"/>
            <ImageButton
                android:layout_width="75dp"
                android:layout_height="72dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp"
                android:id="@+id/fot"
                android:clickable="true"
                android:background="@drawable/fotmob"/>
            <ImageButton
                android:layout_width="75dp"
                android:layout_height="72dp"
                android:layout_marginTop="5dp"
                android:layout_marginLeft="5dp"
                android:id="@+id/sky"
                android:clickable="true"
                android:background="@drawable/sky"/>

        </LinearLayout>
    </HorizontalScrollView>
</LinearLayout>

thank you