I have an image that I scale to the width of the phone/tablet. It is 224x1632. The imageview is within the scrollview, and I need to be able to scroll up and down on that image.
The issue is that the scrollview sets according to the image size (1632 in length) on create, but when the image scales/stretches it is 3x taller than the original. Now the scroll-view is too small to scroll the entire image.
Any way to make the scrollview fit the image?
Note: the image length will differ per phone, so I can't set it to a predetermined size.
XML Code:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="centerCrop"
android:scrollbars="vertical"
android:src="#drawable/tiles" />
</ScrollView>
You set your ScrollView's height to wrap_content which means "be as big as my content." You also set your ImageView's height to fill_parent which means "be as big as my parent." Either one of these statements is enough to prevent scrolling. Your ImageView should be wrap_content and your ScrollView should be fill_parent.
Try scaleType="center" instead of "centerCrop"
Related
I'm making horizontal RecyclerView with photos in it, and I have faced up with wrap_parent problem. If I put in my View width = wrap_content, it is screenWidth width, although image consumes very small space. If I change wrap_content to some value it works perfectly.RecyclerView is 75dp height and match_parent.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="75dp"
android:layout_height="wrap_content"
android:clickable="true"
android:foreground="#drawable/card_foreground">
<ImageView
android:id="#+id/bitmap"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/image" />
</LinearLayout>
Screenshoot
Dark blue is screen and light blue is photos. Problem is I have case 1 when I set view to wrap_content.
SOLUTION:
I have solved this problem recently, there is some bug or something simmilar, when you try to have on scaled ImageView wrap_parent. It doesn't work very well.
To solve this, I have resized every photo to final size before put it in RecyclerView. In adition, I have some small space between ImageView again, and I have solved by adding padding=0 and margin=0 to childern of RecyclerView.
First solution: LinearLayout weight attribute
As long as you would use for that view LinearLayout you may use for all of your ImageView views this attribute:
android:layout_weight="{number_value}"
Shortly, if you add for all of your ImageView views the same value for weight they would get calculated the same space, but not more than their parent view attributes.
http://developer.android.com/guide/topics/ui/layout/linear.html
Read please this issue:
What does android:layout_weight mean?
If you still face the problem, give me a call.
Second solution: ImageView scale attribute
For ImageView you can use scaleX, scaleY, scaleType attributes. For having the same height you should use the same scaleY value for all your ImageView items.
Think also about using TableLayout or GridLayout for this purpose.
i'm new in android development and i'm trying rotating an image view inside a listview. I have the follow xml for the custom cell:
<RelativeLayout
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true">
<ImageView
android:id="#+id/borderImageView"
android:layout_width="#dimen/photoReceiverWidth"
android:layout_height="#dimen/photoReceiverHeight"
android:scaleType="fitXY"
android:rotation="-10"/>
</RelativeLayout>
When it display, it cut a peace of the image. The view is not calculating the size for the rotation.
I don't want to create a new bitmap because the cost is too high.
android:adjustViewBounds="true"
This is an image view property, so place it within the image view rather than the relative layout. I am not sure if adjustViewBounds works on a fixed size ImageView.
You could change the width and height to wrap_content and use a maxHeight or minHeight property to define some additional bounding rules.
The scale type should also probably be centerInside, but play with these to see what suits.
I have a image view inside of a relative view, as per code below
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/maintenance_banner"
android:layout_alignParentTop="false"
android:layout_margin="0dp"
android:padding="0dp"/>
</RelativeLayout>
what i don't understand is the gaps at the top & bottom, as I have set both height to wrap_content, the gaps shouldn't be part of the content, only the imageview it self isn't it? Or does it means the gaps are part of the image view it self? but i set the padding to 0. also, for some reason I can get ride of them by setting scale type.
The image probably has another aspect ratio then your imageView.
Try to set the android:scaleType to centerCrop or whatever else does work for you.
The default scale type is: FIT_CENTER and FIT_XY for buttons.
Hope this helps
EDIT: Sorry I haven't seen the wrap content.
From the screenshot it looks like you have other views below, are you including this layout file into another one?
Cheers
I have a complex xml layout with part of it being:
...
<FrameLayout
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_weight="1" >
<ImageView
android:id="#+id/flexible_imageview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#drawable/gradient"
android:orientation="vertical"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingTop="8dp" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</FrameLayout>
...
The height of the FrameLayout #+id/parent must be determined at runtime because it is displayed above many other views, and they must be shown in the layout. This way the FrameLayout fills the remaining space perfectly (using height="0dp" and weight="1" properties).
The ImageView #+id/flexible_imageview receives an image from the network, and it always shows with the correct aspect ratio. This part is already ok as well. This View is the largest and should determine the size of the FrameLayout #+id/parent.
The problem is that when the image is drawn, the width of the FrameLayout #+id/parent is not adjusted to wrap and be the ImageView #+id/flexible_imageview as it should be.
Any help is appreciated.
-- update --
I've updated the layout to clarify some of the missing parts, and to add the reasoning behind all of it.
What I want is to have an Image (ImageView #+id/flexible_imageview) with unknown dimensions to have, on top of it, a gradient and some text on top of the gradient. I can't set the FrameLayout #+id/parent dimensions to both wrap_content because there is more Views after this Image that must be shown. If there's not enough space in the layout, the Image (ImageView #+id/flexible_imageview) is reduced until it all fits in the layout, but it should maintain its aspect ratio, and the gradient/texts on top of it.
The #drawable/gradient is just:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="270"
android:endColor="#aa000000"
android:startColor="#00000000" />
</shape>
-- update 2 --
I added two images below to demonstrate what's happening, and what should happen:
Bug:
Correct:
If would help if you explained more about what you are trying to accomplish in your layout (not the layout itself but what should the user see on the screen and what are the other elements in the layout).
A FrameLayout with multiple children is usually a "code smell". Usually, FrameLayouts should have only one child element. So this makes me wonder whether there is something wrong with your design.
-- Edit --
If I understand correctly, you are trying the framelayout to wrap the content of the image but at the same time match the space left from the other layout views before/after the frame layout.
What is the parent view/layout of the frame layout?
I see a couple of problems with this design or your explanation:
You have framelayout width set to match parent, but you want to wrap the content of the image.
You want the imageView to be reduced but you are not taking into account the text views in the linear layout. You have them set to wrap content. So when the fame layout is small, you will not see all the textviews. (Unless you are resizing them as well somehow).
Sorry if this isn't helpful enough but it's difficult to understand what you are trying to accomplish with this layout. A sample use-case would help in providing you a better recommendation.
When a dimension (width / height) is MeasureSpec.EXACTLY adjustViewBounds will not effect it.
In your case, having android:width="match_parent" ensures that the image view is the size of the parent, regardless of adjustViewBounds.
It works to begin with because the height is wrap_content - the height is adjusted when the image is scaled to fill the width.
When you override the height to fit everything on the screen (this may not be a great idea to begin with), the width is still matching the parent and doesn't get adjusted. However, because the scale type is ScaleType.FIT_CENTER the image is scaled and positioned so that the entirety of it fits in the bounds of the ImageView (and centred.. hence the name).
If you turn on the debug option for drawing layout bounds, or look at your app using hierarchyviewer, you'll see that the image view is still matching the width of its parent.
There are a couple of ways you could do what you want.
Since you're already manually calculating the height, setting the width shouldn't be that hard.
Drawable drawable = imageView.getDrawable();
if (drawable != null && drawable.getIntrinsicWidth() > 0 && drawable.getIntrinsicHeight() > 0) {
int height = // however you calculate it
int width = height / (getDrawable().getIntrinsicHeight() / getDrawable().getIntrinsicWidth());
}
You might also get away with
<ImageView
android:id="#+id/flexible_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:minWidth="9999dp" />
Even if this works, you probably wouldn't be able to use it in a horizontal LinearLayout using weights any more (for example, if you wanted a landscape variant of the layout), or a number of other scenarios.
I'm just starting out with android and trying to make a simple user interface.
I'm using TableLayout and each TableRow is supposed to contain an image and several buttons next to it. I set the width and height of the buttons to wrap_content, which is exactly what I want. Now I want the image to have exactly the same height as the buttons. The image is way bigger, so wrap_content doesn't work.
Obviously I can just adjust the dp value of the image height until it fits, but there has to be an easier way and I guess that pretty much defeats the purpose of using wrap_content in the first place...
Set the height of the image to match_parent. Your buttons are doing all the height-sizing work having the wrap_content set. When the row gets sized it uses the button height, as they say "you will be as tall as our content", and then when the image is going to be sized, it will use the available height, as specified before by the buttons. Even if the buttons are smaller than the image, the image will still take the available space.
Try this
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
</TableLayout>