Layout inside horizontalScrollView that is the size of the screen

Question

I am new to android and have been looking for a solution to this but so far no luck. I would like to create a layout that is something like the picture below.

I would like to have a linearLayout that is the size of the screen.Then have another linearLayout that is also the size of the screen but off screen. I can then scroll between the two virtual "screens".

There is an interesting article that explained how to extend the scrollView class so that I could get a cool snapping effect, so if I can get this to work, my app will feel much like scrolling between home screens.

I have read about weights and also about scrollView's fillViewport="true". I am afraid that I don't understand how these can be used with a horizontalScrollView to have the linearLayouts fill the screen. I have attempted all kinds of combinations of fill_parent and wrap_content but to no avail.

As I see it, this functionality will not hurt the portability of the app between devices that have different screens as long as I build the sub views (the elements in each "screen") with screen variability in mind.

Here is a simple example of the XML I was trying:

<HorizontalScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/HorizontalScrollView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="true">

<LinearLayout 
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <LinearLayout 
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <EditText
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@+id/txtTestBox"
            >
        </EditText>
    </LinearLayout>

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

        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Button 1"
        />

    </LinearLayout>

</LinearLayout>

</HorizontalScrollView>

Unfortunately, that does not even get close to what I am looking for. Hopefully this can be done...

Thanks for any help or suggestions.

Answer 1

See here The solution was to use android:fillViewport="true" on the ScrollView. no need to fix LinearLayout width.

     <HorizontalScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:fillViewport="true"
            android:orientation="vertical"
            android:scrollbars="none">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">
                //create your views
            </LinearLAyout>
</HorizontalScrollView>

Answer 2

A horizontal scroll view can scale infinitely side to side, so "Fill Parent" most likely won't work like you expect on the internal layouts. Have you tried explicitly specifying a width on the internal layouts?

Something like:

<HorizontalScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/HorizontalScrollView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="true">

<LinearLayout 
    android:orientation="horizontal"
    android:layout_width="400dp"
    android:layout_height="fill_parent">

.....

</LinearLayout>


</HorizontalScrollView>