Why is my Support Gridlayout with Images so slow (only 5 images)?

Question

I'm currently working on an app where I need to have 5 to 6 "home menu" buttons. These buttons I create with a linear layout that contains a background xml to make the button have a border. And inside that linear layout there is an ImageView and a TextView.

This means I got currently 5 LinearLayouts like that in a android.support.v7.widget.GridLayout element. This is then put in a scroll view because it needs to be scrollable when it overflows the screen.

It renders nicely on the screen how I want it, but it's just way to slow at the moment. Scrolling is undoably slow and clicks respond really slow.

I have already tried to remove the onclick to see if anything changes but I think it's mainly in the xml somewhere.

Code Here:

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/layout_tab_home"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/backgroundColor"
    android:orientation="vertical">

    <android.support.v7.widget.GridLayout
        android:id="@+id/gridlayout_home"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:columnCount="2"
        app:useDefaultMargins="true">

        <LinearLayout
            android:id="@+id/relative_home_button_1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@drawable/border"
            android:orientation="vertical"
            android:paddingBottom="8dp"
            app:layout_columnWeight="1">

            <ImageView
                android:id="@+id/imageview_home_icon1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:padding="8dp"
                android:scaleType="fitStart"
                android:src="@drawable/icon_installationhelp"
                />
            <TextView
                android:id="@+id/textview_home_item_title1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginTop="8dp"
                android:text="@string/title_activity_installatiehulp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/relative_home_button_2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@drawable/border"
            android:orientation="vertical"
            android:paddingBottom="8dp"
            app:layout_columnWeight="1">

            <ImageView
                android:id="@+id/imageview_home_icon2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:padding="8dp"
                android:scaleType="fitStart"
                android:src="@drawable/icon_productfinder"
                tools:background="@color/buttonFontColor" />

            <TextView
                android:id="@+id/textview_home_item_title2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginTop="8dp"
                android:text="@string/title_activity_producten" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/relative_home_button_3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@drawable/border"
            android:orientation="vertical"
            android:paddingBottom="8dp"
            app:layout_columnWeight="1">

            <ImageView
                android:id="@+id/imageview_home_icon3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:padding="8dp"
                android:scaleType="fitStart"
                android:src="@drawable/icon_materials"
                tools:background="@color/buttonFontColor" />

            <TextView
                android:id="@+id/textview_home_item_title3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginTop="8dp"
                android:text="@string/title_activity_materialen" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/relative_home_button_4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@drawable/border"
            android:orientation="vertical"
            android:paddingBottom="8dp"
            app:layout_columnWeight="1">

            <ImageView
                android:id="@+id/imageview_home_icon4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:padding="8dp"
                android:scaleType="fitStart"
                android:src="@drawable/icon_dealers"
                tools:background="@color/buttonFontColor" />

            <TextView
                android:id="@+id/textview_home_item_title4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginTop="8dp"
                android:text="@string/title_activity_verkooppunten" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/relative_home_button_5"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@drawable/border"
            android:orientation="vertical"
            android:paddingBottom="8dp"
            app:layout_columnWeight="1">

            <ImageView
                android:id="@+id/imageview_home_icon5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:padding="8dp"
                android:scaleType="fitStart"
                android:src="@drawable/icon_contact"
                tools:background="@color/buttonFontColor" />

            <TextView
                android:id="@+id/textview_home_item_title5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginTop="8dp"
                android:text="@string/text_title_contact" />
        </LinearLayout>
    </android.support.v7.widget.GridLayout>
</ScrollView>

Image example:Icon example

Answer 1

For anyone stumbling across this question.

I solved it by moving my images from /drawable to /drawable-xxhdpi My images where to high resolution for the screen density.

It's not fully explained why but it might put you in the right direction.

Answer 2

Did you try to use RecyclerView with layout manager?

recyclerView.setLayoutManager(new GridLayoutManager(context, columnsCount));