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.

score 3 · Accepted Answer · answered Aug 15 '13 at 09:15

3

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.

answered Aug 15 '13 at 09:15

Eric B.

4,622
2
18
33

Hmm ok. I will try this tomorrow at work. Is there a particular reason you chose 10dp? Does it actually matter what is chosen for the dp value or is it just a placeholder til its set in the activity code at runtime? – crow Aug 15 '13 at 13:58
Thanks, this worked for me. I used [this](http://stackoverflow.com/questions/1016896/how-to-get-screen-dimensions#4847027) to get the screen dimensions and [this](http://stackoverflow.com/questions/3144940/set-imageview-width-and-height-programmatically#5257851) as a guide to setting the width of the imageviews in the activity – crow Aug 16 '13 at 01:48

score 1 · Answer 2 · answered Aug 15 '13 at 09:13

1

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.

answered Aug 15 '13 at 09:13

metalmonkeysoftware

626
1
4
7

I will have a look at how viewpager works when i get to work tomorrow – crow Aug 15 '13 at 13:55

score 0 · Answer 3 · answered Nov 11 '15 at 07:44

0

how about using

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

In the imageViews

and match_parent else where in your layout.

answered Nov 11 '15 at 07:44

A_rmas

784
2
10
26

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

3 Answers3