I am trying to use PhotoView and I would like the image to be shown like it is in Android's Wallpaper app.
So it seems that the images in the wallpaper app are scaled down or up to fill the of the screen, but the width is seemingly unchanged such that if you want to view the whole picture you either have to zoom or scroll left and/or right? Is this making use of the setDisplayMatrix method? If so how would that method call look? Here is a sample of my xml, but I am making use of Glide to set the image, if I need to drop Glide and just use the PhotoView widget directly I am will to do that too if that would produce the desired effect.
<com.github.chrisbanes.photoview.PhotoView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/photoView"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:showIn="#layout/activity_wallpaper_viewer"/>
Threw the image into a HorizontalScrollView, changed the xml a bit to this
<com.github.chrisbanes.photoview.PhotoView
android:id="#+id/photoView" android:adjustViewBounds="true"
android:layout_width="wrap_content" android:layout_height="match_parent"/>
Simple... Embarrassing...
Related
I am developing an Android app. In my application, I need zoom image features like in Facebook. So, I used this library - https://github.com/chrisbanes/PhotoView. But I am having problem with showing full image when the image is first loaded.
This is how I set PhotoViewAttacher to ImageView
photoViewAttacher = new PhotoViewAttacher(imageView);
photoViewAttacher.setZoomable(true);
photoViewAttacher.update();
This is the xml layout of imageview
<ImageView
android:id="#+id/item_details_image"
android:scaleType="fitCenter"
android:layout_width="match_parent"
android:layout_height="match_parent" />
What I am trying to do is I want the image to show fit to the screen if the image is bigger then screen size. No matter how big it is. But image can be smaller than screen size. I just want to show full image at initial. But the above code gives me this result.
As you can see in the screenshot, it cannot show the whole image. It showing only partially. If I want to see other area of image, I want to scroll or swipe because the image does not fit to screen initially. So that I tried to change the XML to show the whole area of image initially. This is the XML I changed to.
<ImageView
android:id="#+id/item_details_image"
android:scaleType="centerInside"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
As you can see I changed the height from match_parent to wrap_content. Scale type as well. When I changed to that, it shows the full image initially like this.
It shows full image but smaller. It is totally ok for me. That is what I want to have. The problem is with zoom feature. When I zoom up, the image cannot go bigger than the image height. See the screenshot below.
As you can see above, it is not showing full image when I zoom up. ImageView height is not changing.
<ImageView
android:id="#+id/item_details_image"
android:scaleType="fitCenter"
android:layout_width="match_parent"
android:layout_height="match_parent" />
You Need to match_parent both height or width
Now I know how to make the translateAnimation, in order to go through the picture, and show it on the screen.
What I do not know how to do, is put the picture on the screen, and make it in such a way so that it will not scale it by the scale type. So I can start the translateAnimation.
I saw some posts about this, and a lot of suggestions are saying I should use a HorrizontalScrollView, in order to put a picture bigger than the device screen. But I need to make a animation go thought it, and not for me to be able to move the picture, so in my opinion that might not be the perfect way to go.
Do you guys have any other suggestions?
Did not use a horrizontalScrollView, instead, forced the width of the whole layout to be the size of a picture, set a RelativeLayout inside, with the size of the screen, and then made the animations.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="1103dp"
android:layout_height="736dp"
android:background="#color/white">
<ImageView
android:id="#+id/background"
android:visibility="invisible"
android:src="#drawable/story1"
android:scaleType="fitXY"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<RelativeLayout
android:id="#+id/screen_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
-----------------CODE inside relative layout for normal page--------
</RelativeLayout>
</RelativeLayout>
Then inside my code I set the screen width and height for my screen container (containing everything except the background picture which will translate):
screenContainer.setLayoutParams(new RelativeLayout.LayoutParams(Math.round(Constants.screenWidth), Math.round(Constants.screenHeight)));
This is my Translation for the ImageView that matches the parent (the size of the background pic):
TranslateAnimation translateBackground = new TranslateAnimation(
TranslateAnimation.RELATIVE_TO_PARENT,from,
TranslateAnimation.RELATIVE_TO_PARENT,-0.5f,
TranslateAnimation.RELATIVE_TO_PARENT,0.0f,
TranslateAnimation.RELATIVE_TO_PARENT,0.0f);
translateBackground.setDuration(15000);
background.setVisibility(View.VISIBLE);
background.startAnimation(translateBackground);
There is an an image set as a background for activity. I would like to scale an image so that it always fills the whole screen like in the example without excessive scaling. How to achieve it?
Try this
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/nSx3W"
android:scaleType="centerCrop"/>
I have two images that are positioned in the same space, effectively overlapping one another.
They are slightly different but identically sized.
I want to be able to crop the top laying image but retain the initial positioning.
So almost like cutting it in half, and keeping the left half in place, which would perfectly overlap the underlaying image.
The following is the code I have, just two ImageView's within a FrameLayout.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_gravity="center_horizontal"
android:layout_width="380dp"
android:layout_height="wrap_content"
android:src="#drawable/level_off">
</ImageView>
<ImageView
android:layout_gravity="center_horizontal"
android:layout_width="190dp"
android:layout_height="wrap_content"
android:src="#drawable/level_on">
</ImageView>
</FrameLayout>
Any ideas? I've done my best to explain what I mean! Thanks!
You could try an programmatic approach by inheriting ImageView and override onDraw(), doing so will also save you an extra layout group.
In onDraw()you have to:
obtain the imageMatrix from your original image
alter the canvas to left/right half of your original size
draw the second image in that altered canvas with the same matrix as the original image
I've done a similar thing and theoretically it should work for your case as well.
I have an image like this used as background in a RelativeLayout:
This image is used as background for all the levels of my game. Every level is drawn onto the blue area.
I want to keep fixed the aspect-ratio of the blue area, changing the size of the red edges to avoid to show to the user unused pixels of their screen. The green area must be fixed to 80dp for all phones. Then I must add a View (a GLSurfaceView) in my layout in such a way that it fit perfectly the blue area. Thus all levels of my Android game will be perfectly the same in all Android device.
How can I solve this problem?
The real image that I use is a little more complex. You can look it here:
Real image
I would use a FrameLayout for the middle part of the screen(blue), add an ImageView, containing the BackgroundImage you want to display, and put the GLSurfaceView on top of it.
Since the aspect ratio is always the same, you could set the ImageViews sclaing to fit xy and the image should always look the same.
Lets assume you are using a simple SurfaceView, the xml code id use to put a ImageView begind it would look like this
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_height="match_parent"
android:layout_width="match_parent"/>
<SurfaceView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
As i dont know how you build your View i cant post the code that does the job, but just add a FrameLayout instead of your GLSurfaceView to your View, with the Same Dimensions, the GLSurfaceView would have.
To that FrameLayout first add the ImageView, then the GLSurfaceView. Both with height and width set to match_parent.
To Figure out the size of your SurfaceView...
Retrieve Display Dimensions
Substract Green Bar Dimensions
Calculate the size of the Blue View, get the Height/Width (whatever is bigger) calculate the missing Dimension
Set the Red Views to Occupie the empty space.
So you would have to do this programmatically :)