Scrolling wide image with imageview (Android)
I am trying to get a large image (10345x1280 px) to fit on my android screen (in landscape mode), basically I want the 1280px size to fit the height of the screen and I want the longer size to be scrolled from left to right.
I've been using various methods, but really don't have much luck due to the scrolling not working or the image not scaling correctly. Right now I am trying to use an image in a scroll and the main problem is that nesting the image in the scrollview causes the image to be scaled. The attached photos show a comparison before and after the image is viewed as a scroll.
The first image is the perfect solution trying to achieve with scrolling, so if anyone has an idea on how best to do this, I'd really appreciate it.
thank
http://i.imgur.com/OWkPNqp.png http://i.imgur.com/YGIdEY1.png
EDIT: I made some changes to the xml code, I also resized my image to have a height of 400 (so it's 3233x400 now). The picture now fits the screen better, but still not perfect and it scrolls up / down but doesn't leave the right as I need it ... There must be a way to properly fit the image so that the height fills the screen on all types of devices?
<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>
source to share
You have a lot of problems in your layout, most notably the nested layout in ScrollView a LinearLayout
that only contains an ImageView which is not needed.Also ScrollView
will automatically scroll the vertical axis of the image, not its horizontal axis, consider using HorizontalScrollView
that suits your needs.
I'll rewrite your layout with HorizontalScrollView
to scroll horizontally , which works great:
<?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>
source to share