So I'm trying to put an image inside a scrollview and have the image stretch to fit different sized screens. It'll stretch horizontally, but vertically it always comes out messed up.
I've read so many pages of people with similar problems, but their solutions never work for me. I've tried every different combination possible using different scaleType,layout_width and layout_height, along with trying changing other things around. The closest I've gotten to getting it to work is shown in the code below, using scaleType="centerCrop". It's the only one that stretches the image vertically in ratio, but it cuts off a big chunk of the image from the top and bottom, it'll scroll up and down the image, but only the middle part shows.
The image is a 480x5500 jpeg, if that matters. Originally before I started messing with all that, the app worked just fine on my phone, but then later I realized the image was crunched when I tried it on a tablet. There's gotta be a way to do this in the xml right? I really don't want to have to do things with the image in the java code part. Also I'm hoping to be able to do this using just one image, I don't want to have use a different image for different screen sizes. Please help, thanks.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/paper" />
</ScrollView>
may be this help you,
make both height and width wrap_content of ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
and no need ScrollView here.
Try using custom ImageView like AspectRatioImageView mentioned here:
https://stackoverflow.com/a/4688335/944070
the next sample is more than what you ask for :
http://www.androidviews.net/2012/11/photoview/
https://github.com/chrisbanes/PhotoView/tree/master/sample
https://play.google.com/store/apps/details?id=uk.co.senab.p
hotoview.sample
it fits the image to the screen , plus it allows to zoom in/out using pinching gestures.
Related
I'm currently trying to make a simple tic-tac-toe game, consisting of ImageViews on top of the board (also an ImageView). However, when I run the app and click on a tile, the picture appears out of place, even though it seems I had lined up the ImageViews correctly.
What I did was I set each original tile to a blank square, and then when the user clicks on a tile, it would change to either "X" or "O," depending on whose turn it was.
I'm pretty sure the problem has to do with dpi scaling on different devices, but I'm not quite sure how to fix it. Any help would be greatly appreciated!
I've included an image of my problem below:
Instead of using an image to display the grid, I would suggest to use XML views.
Horizontal line:
<View
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#android:color/black"/>
Vertical Line:
<View
android:layout_width="5dp"
android:layout_height="match_parent"
android:background="#android:color/black"/>
And constraint them between the images.
So I'm working on Pacman for Android as a learning exercise. I've got the background set in my activity layout, but I'm having trouble making the background fit properly.
I've tried centerCrop and fitXY, with different results, neither of which work exactly. I want to stretch the view to the dimensions of the screen. It appears however that the image view is restricted to the center, like I have 3 imageviews ... but I have only one.
Any thoughts? Do I have to do some of this in code?
Thanks!
<RelativeLayout 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:background="#000FFF"
tools:context="srg.pmd.GameActivity"
>
<ImageView
android:id="#+id/emptyPacman"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/blank_screen"
android:scaleType="fitXY"
/>
First screenshot is fitXY
Second is centerCrop
The image you are using must be 320x480 then only the image will fit the screen other wise it will get distorted here is a link for more info about the image size Android: Background Image Size (in Pixel) which Support All Devices .hope it works for u
Well, nuts to me. The actual png file was wrong -- it was a lot wider than I assumed. Taking a closer look with an image editor revealed the problem.
I have a layout:
<RelativeLayout
android:id="#+id/wordToFindLayout"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:orientation="horizontal">
</RelativeLayout>
On which I am programmatically adding images (images of letters), and I would like these images to go to the next line when they reach the right part of the screen (kind of carriage return). I initially don't know how many images will be displayed.
At the moment I just don't see the images exceeding the screen width and I didn't find a way to programmatically know when they reach the right side of the screen.
What would be the best way to do that?
I suggest you to use the GridView with the property android:numColumns="X" where X is the number of images per row.
See http://developer.android.com/guide/topics/ui/layout/gridview.html
You can use this library to go to next line:https://github.com/blazsolar/FlowLayout
I've been trying to find an answer to this all of last evening with no luck so I decided to come ask here. I just started getting into front end dev for Android apps and I'm trying to do something really simple that just doesn't work. All I want to do is add an image on the screen and be able to resize it EXACTLY what size I want regardless of proportions. This is the code I'm currently using inside a relative layout:
<ImageView
android:layout_width="400dp"
android:layout_height="200dp"
android:id="#+id/imageView"
android:scaleType="fitXY"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:src="#drawable/statsus_logo" />
My image is a horizontal rectangle. When I first add it, it shows up inside a small square centered with a bit of padding all around. When I make the width 400dp that square appears to strech almost 100% across the screen however the logo stays the EXACT same size, centered vertically and horizontally inside this imageview container. When I increase the height of the imageview, the logo increases its size but almost as if it was taking the height and using it as a width. I feel like what its trying to do right now is use the height as its width and the only time when its width is the value i put in, is if the height is also the same value and even then there's some extra unwanted padding.
Again, all I want is for this damn image to be the size I tell it to, so if I want it 5dp wide and 100dp tall, it does just that. Can anyone please help? Thank you very much in advance.
Try to add this attribute to your imageview
android:scaleType="fitXY"
Scale type reference
android:scaleType="fitXY" is the way to scale your image however you want without keeping your proportions however my issue was a little bit different... I'm using android studio and for some reason the settings I was using to "add a new image asset" was making my image act the way I described it above... if I just add an image manually by just click and dragging into the folder, then the image works the way I want it... so long story short, the issue was with how I added my new image asset
thanks to everyone for all of your answers and help!
So I created a simple little app that contains rather tall images inside an ImageSwitcher and due to the height of the images, I've wrapped the ImageSwitcher inside a ScrollView (so the entire image is eventually visible). The interesting thing is that the Image doesnt start at the top of the ScrollView but rather the bottom. The scrolling all works correctly, but I was just curious as to why the top of the image is almost at the bottom of the device screen.
Does anyone know what is causing this behavior?
My images are large drawables (800x600) that are obviously being scaled down in order to fit in the device window, but that still doesn't explain why there is such a large amount of empty space above the image.
I would prefer to just scroll the ImageSwitcher itself but that hasn't worked thus far.
Here is my layout:
<ScrollView android:id="#+id/scroll"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageSwitcher android:id="#+id/switcher"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"/>
</ScrollView>
My suspicion is that the images are being displayed due to the resolution of the original image. I set ImageView.setScaleType(ScaleType.FIT_START); and this appears to have fixed the problem.
Try to call ImageView.setAdjustViewBounds(true) in addition to setScaleType. If you still have problems with your ImageView (inside ImageSwitcher) taking more space than needed, try to peek at the ImageView with the hierarchyviewer in the SDK tools.