How to make the following Android activity scrollable when ScrollView isn't working?

Question

I have the following activity.

I tried encapsulating the whole RelativeLayout with a ScrollView. But, it doesn't work, and only the last 2 images were displayed. So, I removed it and posting the RelativeLayout in question. Please help. I have 2 dummy views that mark an imaginary vertical and horizontal line at the center of the screen, and all images are aligned relative to those.

<?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:id="@+id/content_front"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorWhite"
        android:fillViewport="true"
        android:gravity="center_vertical"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:context=".FrontActivity"
        tools:showIn="@layout/activity_front"
        >

        <View
            android:id="@+id/dummy"
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true" />

        <View
            android:id="@+id/dummy2"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true" />

        <ImageView
            android:id="@+id/all1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_above="@+id/part2"
            android:layout_margin="20dp"
            android:layout_toLeftOf="@+id/dummy"
            android:layout_toStartOf="@+id/dummy"
            android:adjustViewBounds="false"
            android:contentDescription="@string/app_name"
            android:scaleType="fitCenter"
            android:src="@mipmap/all" />

        <ImageView
            android:id="@+id/part1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_above="@+id/part3"
            android:layout_margin="20dp"
            android:layout_toEndOf="@+id/dummy"
            android:layout_toRightOf="@+id/dummy"
            android:adjustViewBounds="false"
            android:contentDescription="@string/app_name"
            android:scaleType="fitCenter"
            android:src="@mipmap/part1" />

        <ImageView
            android:id="@+id/part2"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_above="@+id/dummy2"
            android:layout_marginBottom="0dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="20dp"
            android:layout_toLeftOf="@+id/dummy"
            android:layout_toStartOf="@+id/dummy"
            android:adjustViewBounds="false"
            android:contentDescription="@string/app_name"
            android:scaleType="fitCenter"
            android:src="@mipmap/part2" />

        <ImageView
            android:id="@+id/part3"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_above="@+id/dummy2"
            android:layout_marginBottom="0dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="20dp"
            android:layout_toEndOf="@+id/dummy"
            android:layout_toRightOf="@+id/dummy"
            android:adjustViewBounds="false"
            android:contentDescription="@string/app_name"
            android:scaleType="fitCenter"
            android:src="@mipmap/part3" />

        <ImageView
            android:id="@+id/part4"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_below="@+id/dummy2"
            android:layout_marginEnd="20dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="40dp"
            android:layout_toLeftOf="@+id/dummy"
            android:layout_toStartOf="@+id/dummy"
            android:adjustViewBounds="false"
            android:contentDescription="@string/app_name"
            android:scaleType="fitCenter"
            android:src="@mipmap/part4" />

        <ImageView
            android:id="@+id/part5"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_below="@+id/dummy2"
            android:layout_marginLeft="20dp"
            android:layout_marginStart="20dp"
            android:layout_marginTop="40dp"
            android:layout_toEndOf="@+id/dummy"
            android:layout_toRightOf="@+id/dummy"
            android:adjustViewBounds="false"
            android:contentDescription="@string/app_name"
            android:scaleType="fitCenter"
            android:src="@mipmap/part5" />
    </RelativeLayout>

Any tips on how to make this more efficient would also be appreciated, thanks.

Answer 1

First tip: whenever you want dummy views that are nothing but spaces in your layouts, use the Space view.

Second tip: if you're supporting API 17 and above, include support for Start and End qualifiers, not (just, depending on your minSdk) Left and Right.

---

That said, what you're doing can be accomplished with either a TableLayout or GridLayout without using fake anchor views. It can still use a RelativeLayout without them, just aligning the position of [0,1] relative to [0,0], [1,0] according to [0,0], [1,1] to [1,0] and [0,1] and so on.

You did not fully specified your requirements, so I'll take the liberty to use a GridLayout because of code simplicity and flexibility to adapt to different configurations/needs in the future (I also suspect it will be less expensive than aligning positions relative to other views, but you'd have to check that yourself). Here I don't include Left and Right qualifiers because I'd probably be setting minSdk to 17 anyway:

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingStart="@dimen/activity_horizontal_margin"
    android:paddingEnd="@dimen/activity_horizontal_margin"
    android:columnCount="2"
    android:layout_gravity="center_horizontal">
    <!-- Set columnCount according to your needs. -->

    <ImageView
        android:id="@+id/image_1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:adjustViewBounds="false"
        android:layout_margin="20dp"
        android:contentDescription="@string/app_name"
        android:scaleType="fitCenter"
        android:src="@mipmap/icon_1" />

    <ImageView
        android:id="@+id/image_2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:adjustViewBounds="false"
        android:layout_margin="20dp"
        android:contentDescription="@string/app_name"
        android:scaleType="fitCenter"
        android:src="@mipmap/icon_2" />

<!-- Rinse and repeat. -->

</GridLayout>