HorizontalScrollView and image wrapping

Question

I've implemented a LinearLayout with a tall/narrow image on the left side (top to bottom) and a HorizontalScrollView on the right side for showing a long image.

The problem is that I have not managed to handle the HorizontalScrollView properly. It does not show the left part of the image (I am unable to scroll in that direction), and it is possible to scroll far beyond the image borders on the other side...

I have tried different types of wrapping for the image and the HorizontalScrollView, but the problem is always the same.

Additionally, I have trouble with the left image; the wrapping does not work so there's white space on both sides of it.

This is hard to explain, so I will instead give you some example code that presents the problem:

XML file (I've made many versions of it but always having the same problem):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:adjustViewBounds="true"
    android:orientation="horizontal" >

    <LinearLayout 
        android:id="@+id/leftContainer"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:adjustViewBounds="true"
        android:orientation="horizontal" >
        <ImageView
            android:id="@+id/ivExampleBar"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:paddingLeft="0dp"
            android:paddingRight="0dp"
            android:contentDescription="Bar on the left side"
            android:src="@drawable/examplebar" />
    </LinearLayout>

    <HorizontalScrollView
        android:id="@+id/hscroll"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent" 
        android:layout_gravity="left"
        android:scrollbarFadeDuration="0">

        <LinearLayout 
                android:id="@+id/container"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_gravity="center_horizontal"
                android:orientation="horizontal" >

                <ImageView
                android:id="@+id/ivExampleImg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:contentDescription="Big scrollable image"
                android:src="@drawable/exampleimg" 
            />
        </LinearLayout>
    </HorizontalScrollView>

</LinearLayout>

Java file (I've tried ScrollTo in order to show also the left part of the image, but it works only on a specific resolution/phone...):

import android.app.Activity;
    import android.os.Bundle;
    import android.view.Window;
    import android.view.WindowManager;
    import android.widget.LinearLayout;

    public class TestActivity extends Activity {

        //private LinearLayout scrollContainer;

        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);

            // FULL SCREEN
            requestWindowFeature(Window.FEATURE_NO_TITLE);
            getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
            this.setContentView(R.layout.testlayout);

            //scrollContainer = (LinearLayout) findViewById(R.id.container);
            //scrollContainer.scrollTo(-195, 0);


        }

        @Override
        protected void onPause(){
            super.onPause();
            finish();
        }
    }

Do you have any help on these problems?

make the HorizontalScrollView wrap my image so there's no white space around it
make it possible to scroll all the way to the borders of the image
avoid the white space around the left image

score 0 · Answer 1 · edited May 23 '17 at 11:56

0

this answer works for me: Massive unwanted whitespace with LinearLayout in ScrollView

basically, you just need to set the ImageView's adjustViewBounds to true, like so:

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"/>

edited May 23 '17 at 11:56

Community

1
1

answered Oct 09 '14 at 18:17

SMASHHANDS

66
4

score 0 · Answer 2 · answered Feb 29 '12 at 22:41

0

Try setting wrap_content on all views/layout that you want to be wrapped...

answered Feb 29 '12 at 22:41

ChristopheCVB

7,269
1
29
54

the width is set to wrap_content on all views except the LinearLayout parent...The height should be identical to the screen height so I've set it to fill_parent for the ImageView and the horizontalScrollView. – anderfo Feb 29 '12 at 22:43
So the image view get the same width/height of his parent, the linearlayout, try using a relativelayout. – ChristopheCVB Feb 29 '12 at 22:46
Any remaining space is filled in a linearlayout so the imageview occupy all available space. – ChristopheCVB Feb 29 '12 at 22:49
now i've used a RelativeLayout for the overall layout, and I removed the LinearLayout inside the HorizontalScrollView. it helped a little bit, but the left image still has white space on both sides...and there's plenty of white space at both sides of the right image. (i'll update the code above) – anderfo Mar 01 '12 at 00:47
still haven't managed to solve this problem. apparently, on some phones it's even impossible to scroll towards left. and on some phones the whole image is cropped to half the size. i don't get it. – anderfo Mar 12 '12 at 22:13

HorizontalScrollView and image wrapping

2 Answers2