如何使相对布局垂直/水平滚动？

Question

I have made a layout using relative layout and it turns out to be very long. I wanted to make a ListView instead but it is pretty complicated to do this on ListView.

I know somehow Android OS can adjust pan the screen up and down or left or right whenever the screen overflows the edges of the screen.

So far here is what I am currently doing, I inserted my relative layout inside a ScrollView in the hopes that it will scroll downwards as the UI content is longer than the screen. I want it to scroll down just as you would in so many apps.

Here is my code:

    <?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingStart="@dimen/activity_horizontal_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:fillViewport="true"
    tools:context=".TaskActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.design.widget.TextInputLayout
            android:id="@+id/textinputlayout_task_location"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginTop="24dp"
            android:paddingEnd="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin">

            <EditText
                android:id="@+id/edittext_location"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:singleLine="true"
                android:padding="8dp"
                android:hint="@string/edittext_task_location_hint"/>

        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/textinputlayout_task_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/textinputlayout_task_location"
            android:paddingTop="16dp"
            android:paddingEnd="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin">

            <EditText
                android:id="@+id/edittext_task"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:singleLine="true"
                android:textSize="32sp"
                android:padding="8dp"
                android:hint="@string/edittext_task_title_hint"/>

        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/textinputlayout_task_description"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/textinputlayout_task_title"
            android:layout_above="@+id/linearlayout_task_buttons"
            android:paddingEnd="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin">

            <EditText
                android:id="@+id/edittext_todo"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="top"
                android:hint="@string/edittext_task_content_hint"/>

        </android.support.design.widget.TextInputLayout>

        <LinearLayout
            android:id="@id/linearlayout_task_buttons"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/simpledividerview_schedule"
            android:orientation="horizontal">

            <ImageButton
                android:id="@+id/imagebutton_insert_note"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/ic_content_add_black"
                android:contentDescription="@string/content_description_choose_note"
                style="?android:attr/borderlessButtonStyle" />

            <ImageButton
                android:id="@+id/imagebutton_expand_note"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:src="@drawable/ic_open_in_new_black_24dp"
                android:contentDescription="@string/content_description_expand_note"
                style="?android:attr/borderlessButtonStyle" />

        </LinearLayout>

        <com.neonwarge.android.notifire.utils.view.SimpleDividerView
            android:id="@id/simpledividerview_schedule"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/linearlayout_task_start_date"
            app:showHeaderText="true"
            app:headerText="@string/header_schedule"/>

        <LinearLayout
            android:id="@id/linearlayout_task_start_date"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/linearlayout_task_end_date"
            android:paddingBottom="4dp"
            android:paddingTop="4dp"
            android:layout_marginEnd="@dimen/activity_horizontal_margin"
            android:layout_marginRight="@dimen/activity_horizontal_margin"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textview_start_date"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="8"
                android:text="@string/textview_start_date"
                style="@android:style/Widget.Holo.Light.Spinner" />

            <android.support.v7.widget.SwitchCompat
                android:id="@+id/switchcompat_alarm_on_start"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:textOff="@string/switchcompat_off"
                android:textOn="@string/switchcompat_on"
                android:background="@android:color/transparent" />

        </LinearLayout>

        <LinearLayout
            android:id="@id/linearlayout_task_end_date"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/simpledividerview_reminder"
            android:paddingBottom="4dp"
            android:paddingTop="4dp"
            android:layout_marginEnd="@dimen/activity_horizontal_margin"
            android:layout_marginRight="@dimen/activity_horizontal_margin"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textview_end_date"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="8"
                android:text="@string/textview_end_date"
                style="@android:style/Widget.Holo.Light.Spinner" />

            <android.support.v7.widget.SwitchCompat
                android:id="@+id/switchcompat_alarm_on_end"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:textOff="@string/switchcompat_off"
                android:textOn="@string/switchcompat_on"
                android:background="@android:color/transparent" />

        </LinearLayout>

        <com.neonwarge.android.notifire.utils.view.SimpleDividerView
            android:id="@id/simpledividerview_reminder"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/linearlayout_task_alarm_before_start_date"
            app:showHeaderText="true"
            app:headerText="@string/header_reminder"/>

        <LinearLayout
            android:id="@+id/linearlayout_task_alarm_before_start_date"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/linearlayout_task_before_end_date"
            android:paddingBottom="4dp"
            android:paddingTop="4dp"
            android:layout_marginEnd="@dimen/activity_horizontal_margin"
            android:layout_marginRight="@dimen/activity_horizontal_margin"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textview_before_start_date"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="8"
                android:text="@string/textview_alarm_before_start_date"
                style="@android:style/Widget.Holo.Light.Spinner"/>

            <android.support.v7.widget.SwitchCompat
                android:id="@+id/switchcompat_alarm_before_on_start"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:textOff="@string/switchcompat_off"
                android:textOn="@string/switchcompat_on"
                android:background="@android:color/transparent" />

        </LinearLayout>

        <LinearLayout
            android:id="@id/linearlayout_task_before_end_date"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/simpledividerview_settings"
            android:paddingBottom="4dp"
            android:paddingTop="4dp"
            android:layout_marginEnd="@dimen/activity_horizontal_margin"
            android:layout_marginRight="@dimen/activity_horizontal_margin"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textview_before_end_date"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="8"
                android:text="@string/textview_alarm_before_end_date"
                style="@android:style/Widget.Holo.Light.Spinner" />

            <android.support.v7.widget.SwitchCompat
                android:id="@+id/switchcompat_before_alarm_on_end"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:textOff="@string/switchcompat_off"
                android:textOn="@string/switchcompat_on"
                android:background="@android:color/transparent" />

        </LinearLayout>

        <com.neonwarge.android.notifire.utils.view.SimpleDividerView
            android:id="@id/simpledividerview_settings"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/linearlayout_task_show_notification"
            app:showHeaderText="true"
            app:headerText="@string/header_reminder"/>

        <LinearLayout
            android:id="@id/linearlayout_task_show_notification"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:paddingBottom="4dp"
            android:paddingTop="4dp"
            android:layout_marginEnd="@dimen/activity_horizontal_margin"
            android:layout_marginRight="@dimen/activity_horizontal_margin"
            android:orientation="horizontal">

            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="8">

                <TextView
                    android:id="@+id/textview_task_show_notifications"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_weight="8"
                    android:text="@string/textview_task_alarm_sound" />

            </android.support.design.widget.TextInputLayout>

            <android.support.v7.widget.SwitchCompat
                android:id="@+id/switchcompat_task_show_notifications"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:textOff="@string/switchcompat_off"
                android:textOn="@string/switchcompat_on"
                android:background="@android:color/transparent" />

        </LinearLayout>


    </RelativeLayout>
</ScrollView>

The problem with this is that, if I view it on my phone. The Layout is squished to fit the screen. I don't like this. I must be able to scroll.

I can't make my relative layout very long content to scroll inside a scrollview.

Base on the code, what might be the problem?

Thanks!

Answer 1

Your problem is this:

android:layout_alignParentBottom="true"

You are telling the OS to anchor this view to the bottom of the screen, and some views are laid above this one. This forces everything to fit in a single screen.

You need to replace your RelativeLayout with a LinearLayout with vertical orientation and then lay things out in order, from top to bottom.

Answer 2

I think your ScrollView should not be the master layout (not 100% sure though), your master layout should be a Layout (RelativeLayout or LinearLAyout with match_parent width, and wrap_content height), and ScrollView nested inside it.

As for horizontal scrolling ( Source ):

ScrollView only supports vertical scrolling. For horizontal scrolling, use HorizontalScrollView

Answer 3

您应该为您的RelativeLayout设置android:layout_height="wrap_content"