How to make 2 images views each be sized to cover screen inside a linear layout inside a horizontal scrollview

Question

I'm trying to get 2 (or more as needed) imageviews inside a linearlayout inside a horizontalscrollview, such that each image is scaled to fit the screen height without distorting the image ie one image showing as large as possible on screen, scroll to see next one.

once the second image is added, i get 2 small images next to each other (dimensions are 217 * 300px for both images). currently my activity_main.xml looks like the following..

    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
        >

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            >
            <ImageView
                android:id="@+id/image1"
                android:src="@drawable/luke"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitCenter"
                />
            <ImageView
                android:id="@+id/image2"
                android:src="@drawable/luke"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitCenter"
                />


        </LinearLayout>
    </HorizontalScrollView>


</FrameLayout>

I've tried various combinations of match_parent, fill_parent, wrap_content on the layouts, all the scaleTypes on the image views and spent over a day browsing the net looking for an example similar to what i want, but no luck.

Answer 1

I would say to set these two things:

     <ImageView
          android:layout_height = "match_parent"
          android:layout_width = "10dp" />

This is the tricky part. Get the screen width at runtime, and set it to the imageView.

Answer 2

I'd be inclined to use a viewpager with a custom page adapter showing your scaled imageview instead of trying to do it in way you are currently.

The view pager / adapter would handle view recyling, page snapping etc for you.

Answer 3

how about using

android:width="0"
android:weight ="1"
android:height="match_parent"

In the imageViews

and match_parent else where in your layout.