I have created custom image and I am setting it at the bottom of the layout :
<?xml version="1.0" encoding="utf-8"?>
<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">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#drawable/btn_1"/>
</RelativeLayout>
It works with smaller devices but not with nexus 6 and above:
I have drawable-mdpi,hdpi,xhdpi,xxhdpi,xxxhdpi with image size:
360*174
540*261
720*347
1080*521
1440*676
It has gap on left and right side in nexus 6 and nexus 7,9,10 are not re-sizing ? Is there anything like xxxxhdpi and xxxxxhdpi? How can I get it to work ? I really appreciate any help.
1) There's white space on both sides because image is smaller than phone's size.
You have to scale your image so it set's at the bottom without showing any empty space.
You can achieve this by setting scaleType here's one example of how you can use it.
2) You are setting width and height to wrap_content. It means it will reduce the ImageView size based on actual image size. If you want to fit all to your screen then set match_parent.
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="100dp"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/btn_1"
/>
You can set some height otherwise it will take full screen.
If it doesn't work for you then you can try to change scaleType to desire value such as center, centerInside, fitCenter
Related
Problem: trying to give multi device support screen for a simple layout but in Nexus 6 its creating the problem,means not showing fit.
It's side is cutting down where as per as docs for nexus-6 resolution is 1440*2560 and image should be in drawable-xxxhdpi .so i keep a image with resolution of 1440*2560.
<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">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
android:id="#+id/imv" />
</RelativeLayout>
if i ll give match_parent so obvious it will stretch the image.
Please help me to get out of it.
Here is screen shots of screen -
http://s10.postimg.org/43od5j5h5/screen_shot_layout.png
Set the width of the Image to fill_parent (you can set margins if you want a bit smaller imageView or you could also just set a fixed width)
Use android:adjustViewBounds to keep aspect ratio
Set height to wrap_content (it will take whatever it takes to maintain aspect ratio)
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/icon"
android:id="#+id/imv"
android:scaleType="fitCenter" />
If you want to fit the image on the imageview, replace android:src with android:background in the ImageView in the xml code.
Try to use these lines of code in the layout
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
android:scaleType="fitXY"
android:id="#+id/imv" />
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
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:layout_x="0dip"
android:layout_y="0dip"
android:background="#drawable/mlview1" />
I'm using android emulator 2.2 . My image occupies the screen horizontally but vertically shows a large gap from the Bottom. The image size is 800X600 . should it be re-sized and then used?
Make sure that:
1. Both height and width on both parent and child is fill_parent
2. You are setting the src property and not the background one on the image
Note: You also don't need the layout_x nor layout_y
I need to remove the black borders appears around the pictures in android screen.
My pcture are full blade but I always get a kind of black borders both in portrait or landscape orientation. I tried to change parameters but unsuccessfully.
this is my xml layout code
<?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">
<ImageView
android:src="#drawable/map"
android:id="#+id/fullmap"
android:layout_height="fill_parent" android:layout_width="fill_parent"> </ImageView>
</LinearLayout>
Can someone help me to find the error? Pictures are bigger than the screen 480x320 - 800x480 - 1280x800
Thank you
If by black border you mean the empty space around your picture left and right in landscape then you need to set ScaleType in you imageView Tag.
The first one will stretch the image and not preserve aspect ratio
android:scaleType="fitXY"
this one will zoom in to the image till all the sides are filled and it preserves aspect ratio.
android:scaleType="centerCrop"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/wallpaper" />
</RelativeLayout>
The size of #drawable/peetscoffee_wallpaper is 640x480, but it is not centered horizontally.
How can I fix this?
Try android:gravity="center", or android:layout_gravity="center", instead of centerHorizontal="true".
However, i doubt this will behave sensibly with an image that size set to wrap_content - you may want to define some image scaling method with android:scaleType (eg fitCenter) and set it to fill_parent rather than wrap_content. 640x480 is bigger than the 320x480 the current real-world Android devices support. Or just scale down that image you're using so the device doesn't have to do the work.