I have a drawable which i want to display. I want it to fit the screen horizontally, and to be scrollable vertically (when its height is bigger than the screen), while keeping it scaled.
I'm putting the drawable into a ImageView. The drawable is changeable (pictures of different heights and widths). I could scale every drawable to fit to the width of the screen, but when I do the drawable's higher than the screen will get cut of at the top, and i get a black bar at the bottom of my ScrollView.
I've tried every combination of ScrollView and ImageView I could think of, but the Image is either stretched or part of it falls out. Any help is much appreciated!
My current code:
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center" >
<ImageView
android:id="#+id/iv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center" />
</ScrollView>
<ImageView
android:id="#+id/iv1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:adjustViewBounds="true"
/>
But I am not sure this is able to make image bigger than parent height. If this don't help I try to find in my archive working solution.
Related
I have a problem to make a proper layout for a special case. I experimented on that already for a while both in the designer and in code, but I couldn't find a solution, that's why I need your help.
I have to create a layout which should have a structure like pictured in the images below. It is mainly a combination of several linearLayouts. The problem I have is, that the picture can only be added within the code, because this layout is a detail view that displays information about items from a list.
On the top is the layout without an image place holder (no loaded picture - indicated in black), here the width of "linearLayout_BigLeft" is given by the width of the two buttons and the textView (which all have content) in the "linearLayout_BelowImage".
In the middle you see the layout after the picture has been loaded (image indictated in orange) in code. Depending on the aspect ratio of the android device the black colored gaps differ. I can't get the image to resize to the whole available height and adjusting its width accordingly. The "linearLayout_BelowImage" adjusts itself to the image size (the textView in it is getting wider).
On the bottom is the layout which shows the ideal state. The image always should use the whole available space in height and resize accordingly in width. The "linearLayout_BelowImage" adjusts itself to the image size (the textView in it is getting wider).
Question:
How can I get a layout (after the image is loaded in code) that looks like the bottom picture? The image, after loaded in code, has to resize itself, so it uses the whole available height and resizes its width accordingly. The "relativeLayout_Top" and the "linearLayout_BelowImage" have both fixed heights. The "scrollView_BigRight" adjusts itself based on the space that the "imageView_OrangeImage" doesn't need for itself.
I can deal with solutions that adjust the layout in code, after the image has been added, or solutions that makes the layout.xml itself flexilbe enough to deal with this situation.
Any help is highly appreciated. If you need any more information please let me know.
Below is the main content of my layout.xml, that is needed for this problem.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#color/white">
<RelativeLayout
android:id="#+id/relativeLayout_Top"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/blue" >
</RelativeLayout>
<LinearLayout
android:id="#+id/linearLayout_Big"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#color/transparent" >
<LinearLayout
android:id="#+id/LinearLayout_BigLeft"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/transparent" >
<ImageView
android:id="#+id/imageView_OrangeImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/black" />
<LinearLayout
android:id="#+id/linearLayout_BelowImage"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/blue_white_blue" >
<Button
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/blue" />
<TextView
android:id="#+id/textView_BelowImageMiddle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/white" />
<Button
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/blue" />
</LinearLayout>
</LinearLayout>
<ScrollView
android:id="#+id/scrollView_BigRight"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/grey" >
</ScrollView>
</LinearLayout>
</LinearLayout>
android:adjustViewBounds="true"
This one’s a manual fix for “optimized” code in scaleType="fitCenter". Basically when Android adds an image resource to the ImageView it tends to get the width & height from the resource instead of the layout. This can cause layouts to reposition around the full size of the image instead of the actual viewable size.
AdjustViewBounds forces Android to resize the ImageView to match the resized image prior to laying everything else out. There are times where this calculation won’t work, such as when the ImageView is set to layout_width="0dip". If it’s not working, wrap the ImageView in a RelativeLayout or FrameLayout which handles the 0dip flexible size instead
get it from this site
OR
Mode android:scaleType="centerCrop" uniformly stretches the image to fill the entire container and trims unnecessary.
You can change the way it default scales images using the android:scaleType parameter. By the way, the easiest way to discover how this works would simply have been to experiment a bit yourself!
get it here
In my widget I've an image of a refresh icon and circular progress bar (CPB) that is showed when the refresh icon is pressed (obviously only one view can be showed in the same time).
The CPB is too big, so I try to set scaleX and scaleY to 0.7 and my CPB is smaller, but this had the side effect that there is empty space where there was a bigger CPB.
How do I set this 2 view in the same position with the same height and width?
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="right"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/navigation_refresh" />
<ProgressBar
android:id="#+id/progressBar1"
android:scaleX="0.7"
android:scaleY="0.7"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</FrameLayout>
I can remove the scale and force the frame layout width and height to 28dp for example, and in this way it works fine, but I'm not sure if this is the best practice to do.
(For example in this way in a tablet with a big screen maybe the images will be a little big bigger because I'm using "dp", but not of the right size. Am I wrong?)
I managed to set views at the same location UNINTENTIONALLY using relative layout.
Try surround the views you want to be on top of each other with relativelayout.
I am using a relativelayout to overlay to images. On all screen sizes so far that I have tested (from 2.7 to 10.1 inch) I always get white space on top of my image. In my IDE I always see that my relativelayout is causing the extra space on top and on the bottom of my image.
Why is that? I have set all height attributes to wrap_content and even added the adjustViewBounds attribute.
Note: You should know that my image is a lot bigger in size, meaning that there will be some sort of scaling.
Thanks for your tips!
Here is the code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="vertical"
android:focusable="true"
android:focusableInTouchMode="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/bgf"
android:textColor="#000000"
android:textSize="25sp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:paddingRight="5dp"
android:paddingLeft="5dp"
android:paddingBottom="5dp"
android:layout_gravity="center_horizontal"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:src="#drawable/cde"
android:contentDescription="#string/cde" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_gravity="center_horizontal"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:src="#drawable/fgh"
android:contentDescription="#string/abc" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
I had the exact problem. After struggling for quite some time, I solved it by following this
and add the following to my program
android:adjustViewBounds="true"
It works perfectly
This is occuring as the image is scaled down to fit the area available without losing the image's aspect ratio. You are getting white space because the image first occupied the available width and according to the aspect ratio of the original image the height of the was brought down.
To get a clearer understanding, I suggest you to do the following :
Set the background color of the relative layout to some color
Now you can understand the space between the imageView and the relativelayout.
Once you have checked that on your device, Do the following change and try again
Set the attribute scaleType = "fitXY" in your imageView.
This will make the image to scale and occupy the complete area available to the imageView. (The aspect ratio of the original image will be lost in this case). Now you will come to know the amount of area the imageView occupied.
I suppose once you do this you can conclude that :
In the first run if you had set the background of relativeLayout as black, it won't be visible since the imageView occupies the entire area without leaving any gap.
In the second run the image will cover the entire height and width, although the aspect ratio was lost. Hence this ascertains that imageView does cover the width and height and no space is left, its the image's aspect ratio ie the problem
In case you arrive at a different result altogether please do inform, we can work it out
EDIT :
Please do remove the paddings you have given for imageView too
I have a LinearLayout (Horizontal) that I am using to display 3 ImageViews. When I first add the ImageViews the last one is shrunk because the images are too big to fit 3 across. Here is what my designer screen looks like:
Notice the third image is shrunk.
To fix this issue I set the following attributes on each ImageView.
width: 0dp
weight: 1
Here is how my images look after setting those attributes:
The problem I am running into is even though the images have been shrunk there is still space at the top and bottom as shown by the blue rectangle in the following image:
My question is, why is this extra padding there and how can I get rid of it?
Thank you
UPDATE - adding my layout file
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:background="#color/app_background_color"
android:contentDescription="#string/game_image_button"
android:gravity="center"
tools:context=".EasyActivity" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/ImageView02"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="#string/game_image_button"
android:src="#drawable/ruler200x200" />
<ImageView
android:id="#+id/ImageView01"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="#string/game_image_button"
android:src="#drawable/ruler200x200" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="#string/game_image_button"
android:src="#drawable/ruler200x200" />
</LinearLayout>
</RelativeLayout>
ImageViews support different ScaleTypes, the default is FIT_CENTER. here are the other options. FIT_CENTER means its going to start out with height and width equal to your image (what your images looked like in the first screen shot before you added weight). What I believe happened is that it then resized the width of the image based on your layout_weight, and maintained the image's aspect ratio by shrinking it to fit the new width. It left the height to be the original height and centered the result.
I think one of the other scale types would do what you want. Maybe CENTER or CENTER_INSIDE
You can use the following code
<Imageview.....
android:adjustViewBounds="true"
..../>
I'm trying to place an image that fills the width of the screen, has the height of the actual image (wrap_content) and sits at the very bottom of the Layout.
I've wrote the below code, but between the second ImageView (the one with drawable/user_board) and the very bottom of the screen, there is a small space. Why is this? I've tried setting padding and margins to 0dp, but it seems it doesn't do the trick. Any ideas?
Here is the code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/LayoutBoard"
android:noHistory="true"
android:padding="0dp" >
<ImageView
android:src="#drawable/game_interface_background"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="matrix" />
<ImageView
android:src="#drawable/user_board"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_margin="0dp"
android:padding="0dp" />
</RelativeLayout>
Doesn't your user_board image have some transparent space at the bottom? Or maybe you can try setting negative value in the padding field of the second ImageView.
Use android:scaleType="fitXY" and the bitmap contained in your ImageView will be resized to fit the whole ImageView. So using this attribute in both your imageViews will probably hide that empty space. However keep in mind that this does not keep the aspect ratio of the image. See here for more information about the android:scaleType attribute tag and the possible values it can take.