I am trying to add ImageView programatically inside a LinearLayout, which has vertical orientation. My layout file is describe as the xml below:
<?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="wrap_content"
android:paddingTop="5dip"
android:id="#+id/mainView"">
<TextView android:id="#+id/tvTituloInformacao"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="#color/white"
android:gravity="center_horizontal"
android:shadowColor="#color/black_translucent"
android:shadowDx="2.0"
android:shadowDy="2.0"
android:shadowRadius="3.0"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true" />
<LinearLayout android:id="#+id/resourceContainer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dip"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:layout_marginBottom="10dip"
android:padding="3dip"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_below="#+id/tvTituloInformacao"
android:background="#color/black_translucent2" />
</RelativeLayout>
And my java source code that adds the ImageViews to the LinearLayout is as follow:
for(Resource r : mUser.getPictures()) {
ImageView img = new ImageView(this);
img.setVisibility(View.VISIBLE);
img.setTag(r.getThumb60());
imageLoader.DisplayImage(r.getThumb60(), this, img);
((LinearLayout) tempFotosView.findViewById(R.id.resourceContainer)).addView(img);
}
What happens is that before and after each ImageView I am getting some extra spaces that should not be there, so the height of the images container increases a lot. One test that I did and got the expected result was not to use the imageLoader and instead I set the ImageResource programatically to a static image file. This way I didn't get any extra space.
The weird result is illustrated in the image below:
Is there a way to not add this extra space?
I think images you are loading in image views may have some extra spacing on top and bottom, and other assumption you are loading images in imageview, with different resolution than your screen-size, and setting scaleType of ImageView to centerInside, if it is the case please try using following by fixing height of the image view as well, and set scaleType to fixXY.
This happens when the image is wider than the screen size after the ImageView has been built. Android shrinks the image's dimensions accordingly to aspect ratio, but doesn't remove the allocated space around it earlier.
For a cleaner fix, try this code after your imageLoader.
((LinearLayout)findViewById(R.id.resource)).add(img);
Related
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 want to display an image (image1 of 629x470 pixels) in a relative layout and use another complete white image (image2 of 1896x470 pixels) to scroll over image1 to hide/reveal image1.
My image1 is visible correctly. But image2 is automatically resized to a smaller version and positioned vertically centered to image1 due to which I am not able to completely coverup image1. How do I display image2 as is so that it completely covers image1?
adjustViewBounds and scaleType did not help.
My Layout is as follows:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/image1" />
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image2" />
</RelativeLayout>
Please suggest.
If you want to use image2 to scroll over and cover up your image1, you may instead create custom layout(linearlayout type) for image2 and then call it up when you make events(scroll down etc.)
You may use android:layout_width="wrap_content" for image1 and use android:layout_width="match_parent" for image2 to set up their size.
The way you put imageview together in same xml will fix their position. Image2 will always stay under image1.
put some gravity for both images, e.g the below code will center them in center
android:layout_centerInParent="true"
or you can use
android:layout_gravity="center"
you can use other gravity options too, for more about gravity, refer to this link
http://developer.android.com/reference/android/view/Gravity.html
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.
Please advice how to place an image as background for LinearLayout so this image would look as is, not stretched, titled or something.
Other solution is to define your image in a XML and refer to this XML on your background as explained here : Background Image Placement
Like that you can control your image (background) layout
Jojo's solution might work if the content of Linear layout is smaller than image height.
if i add two or edit text automatically the image starts stretching. if u still want to avoid and make the imageview at background use the below xml layout.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageButton android:id="#+id/imageButton1" android:src="#drawable/icon" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#null"></ImageButton>
<Button android:text="Button" android:id="#+id/button1" android:layout_width="wrap_content" android:layout_height="100px"></Button>
</RelativeLayout>
Because only image button has the src options that remains constant to width and height of image.
make android height and width of LinearLayout into wrap_content using this code in .xml file
android:layout_height="wrap_content"
android:layout_width="wrap_content"
to set background to the image use code
android:background="#drawable/image"
Now place the image in the drawable file
I have a n app widget that is pretty much working, with one quirk. I've got a LinearLayout in the widget, and I can add rows of my data to it just fine. There doesn't seem to be any obvious way for me to tell how big the linear layout is and if a given row will fit, so I just add the entire data set (since it isn't very large). The text in my layout gets cropped at the bottom, which is what I'd expect. However, the ImageView next to it is not being cropped, but is instead being scaled. It, frankly, looks goofy.
If there's a way for me to tell if a row will fit in my LinearLayout, that would be great. If there's a way I can tell it to just crop my image, that would be fine too. This is what the cropping looks like.
The layout for the rows I'm adding (if there's a goof here, it's probably from the anonymization I applied):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/checkbox"
android:layout_width="28sp"
android:layout_height="28sp"
android:src="#drawable/check_off"
android:layout_marginLeft="5dp"
android:layout_marginTop="1dp"
android:layout_alignParentLeft="true"/>
<TextView
android:id="#+id/textview"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textSize="16sp"
android:minHeight="28sp"
android:paddingLeft="5dp"
android:layout_centerVertical="true"
android:layout_alignWithParentIfMissing="true"
android:layout_toRightOf="#id/checkbox"/>
</RelativeLayout>
EDIT: The container for the rows is just a simple LinearLayout:
<LinearLayout
android:id="#+id/list_items"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_above="#id/logo"
android:layout_marginBottom="4dp"
android:padding="1dp"
android:orientation="vertical"
android:background="#drawable/widget_background"/>
Try adding a scaletype to your ImageView:
android:scaleType="centerCrop"
or
android:scaleType="fitCenter"
or any of the other options listed here:
http://developer.android.com/reference/android/widget/ImageView.ScaleType.html
It turns out that giving the RelativeLayout that corresponds to the row a specific height (30sp, for this layout) instead of "wrap_content" fixed the problem. The image now crops correctly.