Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Scrolling a wide image using imageview (Android)

I've been trying to get a big image (10345x1280 px) to fit on my android screen (in landscape mode) basically I want the 1280px dimension to fit to the height of the screen and I want the longer dimension to be scrollable from left to right.

I've been using various methods but really not having much luck either due to the scrolling not working or the image not being scaled correctly. Right now I'm trying to use an imageview within a scrollview and the main issue is that embedding the imageview in the scrollview messes up the scaling of the image. The attached photos show the comparison before and after the imageview is embededded in the scroll view.

The first image is the ideal im trying to achieve with scrolling so if anyone has an idea on what the best way to go about this, I'd really appreciate it.

Thanks

https://i.sstatic.net/tNF35.png https://i.sstatic.net/g7Q85.png

EDIT: I made some adjustments to the xml code, I also resized my image to have a height of 400 (so its now 3233x400). The picture fits better on the screen now, but still not perfect, and it scrolls up/down but not left right as I need it to.... There must be a way to properly fit an image so that the height fills the screen on all device types?

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#0099cc"
    tools:context=".FullscreenActivity"
    android:nestedScrollingEnabled="true">

    <!-- The primary full-screen view. This can be replaced with whatever view
         is needed to present your content, e.g. VideoView, SurfaceView,
         TextureView, etc. -->
    <TextView android:id="@+id/fullscreen_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:keepScreenOn="true"
        android:textColor="#33b5e5"
        android:textStyle="bold"
        android:textSize="50sp"
        android:gravity="center"
        android:text="@string/dummy_content" />

    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginTop="0dp" >

        <LinearLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="0dp"
            tools:context=".HelpActivity"
            android:layout_gravity="center">

            <ImageView
                android:id="@+id/imageHelp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:layout_marginTop="0dp"
                android:src="@drawable/fretz" />
        </LinearLayout>
    </ScrollView>

</FrameLayout>
like image 521
user67081 Avatar asked Mar 10 '26 09:03

user67081


1 Answers

You have a lot of problems in your layout first of all the nested layout within the ScrollView a LinearLayout that only holds ImageView which is unnecessary, Also ScrollView will automatically scroll the vertical axis of the Image not its Horizontal axis consider using HorizontalScrollView that fit in your needs.

I remake your layout with the use of HorizontalScrollView to scroll on it horizontally which work perfectly:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#0099cc"
    tools:context=".FullscreenActivity" >

    <TextView
        android:id="@+id/fullscreen_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:keepScreenOn="true"
        android:text="SAMPLE"
        android:textColor="#33b5e5"
        android:textSize="50sp"
        android:textStyle="bold" />

    <HorizontalScrollView
        android:layout_width="500dp"
        android:layout_height="fill_parent"
        android:layout_marginTop="0dp" >


            <ImageView
                android:id="@+id/imageHelp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/lal" />
    </HorizontalScrollView>

</FrameLayout>
like image 71
Rod_Algonquin Avatar answered Mar 13 '26 00:03

Rod_Algonquin