Search code examples
androidscrollview

Mutiple Imageviews in one Screen with a ScrollView

I want to have several ImageView's on my front page, that is my main class, like say Six, arranged in columns of twos, I wanted to do this since I want to be able to implement simple on click listeners to events. I am however lost to how I can add the scroll view due to ScrollView always wanting one child. I am currently using LinearLayout vertical Orientation.

Here is the sample of what I want to achieve with a ScrollView in it

Here is the sample

My Code so far :)

<LinearLayout
    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"
    xmlns:card_view="http://schemas.android.com/tools"
    android:orientation="vertical"
    tools:context=".Activities.MainActivity"
    tools:showIn="@layout/app_bar_main"
    >


    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:layout_marginStart="4dp"
        android:layout_marginEnd="4dp"
        android:paddingTop="60dp">

        <android.support.v7.widget.CardView
            android:layout_width="182dp"
            android:layout_height="245dp"
            app:cardUseCompatPadding="true"
            card_view:cardCornerRadius="4dp"
            >

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/image1"
                android:scaleType="fitXY"
                app:srcCompat="@drawable/events_gradient"
                android:contentDescription="@string/todo" />

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

        <android.support.v7.widget.CardView
            android:layout_width="182dp"
            android:layout_height="245dp"
            app:cardUseCompatPadding="true"
            card_view:cardCornerRadius="4dp">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/image2"
                android:scaleType="fitXY"
                app:srcCompat="@drawable/kaa_rada"
                android:contentDescription="@string/todo" />
        </android.support.v7.widget.CardView>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="4dp"

        android:layout_marginStart="4dp">

        <android.support.v7.widget.CardView
            android:layout_width="182dp"
            android:layout_height="245dp"
            app:cardUseCompatPadding="true"
            card_view:cardCornerRadius="4dp">
            <ImageView
                android:id="@+id/image3"
                android:scaleType="fitXY"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:srcCompat="@drawable/doc"
                android:contentDescription="@string/todo" />

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

        <android.support.v7.widget.CardView
            android:layout_width="182dp"
            android:layout_height="245dp"
            app:cardUseCompatPadding="true"
            card_view:cardCornerRadius="4dp">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/image4"
                android:scaleType="fitXY"
                app:srcCompat="@drawable/mythgradient"
                android:contentDescription="@string/todo" />
        </android.support.v7.widget.CardView>
    </LinearLayout>

</LinearLayout>
Solution

  • Enclose your inner layout inside Scrollview like,

    <LinearLayout
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"
xmlns:card_view="http://schemas.android.com/tools"
android:orientation="vertical"
tools:context=".Activities.MainActivity"
tools:showIn="@layout/app_bar_main"
>

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

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

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    android:layout_marginStart="4dp"
    android:layout_marginEnd="4dp"
    android:paddingTop="60dp">

    <android.support.v7.widget.CardView
        android:layout_width="182dp"
        android:layout_height="245dp"
        app:cardUseCompatPadding="true"
        card_view:cardCornerRadius="4dp"
        >

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/image1"
            android:scaleType="fitXY"
            app:srcCompat="@drawable/events_gradient"
            android:contentDescription="@string/todo" />

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

    <android.support.v7.widget.CardView
        android:layout_width="182dp"
        android:layout_height="245dp"
        app:cardUseCompatPadding="true"
        card_view:cardCornerRadius="4dp">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/image2"
            android:scaleType="fitXY"
            app:srcCompat="@drawable/kaa_rada"
            android:contentDescription="@string/todo" />
    </android.support.v7.widget.CardView>
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="4dp"

    android:layout_marginStart="4dp">

    <android.support.v7.widget.CardView
        android:layout_width="182dp"
        android:layout_height="245dp"
        app:cardUseCompatPadding="true"
        card_view:cardCornerRadius="4dp">
        <ImageView
            android:id="@+id/image3"
            android:scaleType="fitXY"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:srcCompat="@drawable/doc"
            android:contentDescription="@string/todo" />

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

    <android.support.v7.widget.CardView
        android:layout_width="182dp"
        android:layout_height="245dp"
        app:cardUseCompatPadding="true"
        card_view:cardCornerRadius="4dp">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/image4"
            android:scaleType="fitXY"
            app:srcCompat="@drawable/mythgradient"
            android:contentDescription="@string/todo" />
    </android.support.v7.widget.CardView>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>