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.

I thought it may be helpful to place a link to the 'snap' code I was referring to. It can be found here: http://blog.velir.com/index.php/2010/11/17/android-snapping-horizontal-scroll/ — Arbiter of buffoonery, Dec 20 '10 at 14:10
An additional example of the functionality I am looking to implement can be found in the Firefox mobile app for android. The tab bar that is along the left side of the page (off screen until you scroll over) seems to somehow create a scrollable surface that has a subview that is the exact size of the screen (it creates a "screen" that is the size of the physical phone screen, and when the user scrolls, they can view their tabs and the screen). Hopefully this makes my question clear. — Arbiter of buffoonery, Dec 21 '10 at 22:13

score 6 · Answer 1 · answered Feb 15 '18 at 12:52

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>

android:fillViewport="true" sovled my problem – Rohan Pawar Apr 08 '20 at 07:16 — Rohan Pawar, Apr 08 '20 at 07:16

score 2 · Accepted Answer · answered Jan 24 '11 at 18:46

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>

This is the approach I am now taking. I hoped to avoid manually formatting each view, but it would appear that this is the only option. Thanks! — Arbiter of buffoonery, Jan 28 '11 at 19:42

score 0 · Answer 3 · answered Dec 20 '10 at 06:49

0

Is there a specific reason you need to have virtually 2 screens inside one? Why not just make them separate? You could extend GestureDetector so when a scroll gesture occurs, it will 'snap' to the next screen automatically

answered Dec 20 '10 at 06:49

ninjasense

13,756
19
75
92

Good question, I am interested in this because I think it will allow a more intuitive interface. Since my interface is somewhat complex, I think the ability to 'peek' at what is on the next screen will prove useful. Also, at this point, I want to know how to do this for the knowledge that it can be done (I have been banging my head against this problem for a while now, so I don't want to give up). If I can't find an answer, I plan on falling back to something like you propose. – Arbiter of buffoonery Dec 20 '10 at 14:06
By the way, the link to the 'snap' code I was referring to can be found here: http://blog.velir.com/index.php/2010/11/17/android-snapping-horizontal-scroll/ – Arbiter of buffoonery Dec 20 '10 at 14:09
This is not really an answer to the question. Hopefully a better answer is out there. Maybe I can find an answer in the Firefox mobile source code... – Arbiter of buffoonery Dec 21 '10 at 22:15

Layout inside horizontalScrollView that is the size of the screen

3 Answers3