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"
Related
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
I created an XML with a relativelayout that has a webview and a relativelayout inside it. What I did is that I load my app on the webview and the app logo below it using the relativeLayout1.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/urlContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<WebView
android:id="#+id/webView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/relativeLayout1" />
<ProgressBar
android:id="#+id/progressBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:background="#drawable/footerl" >
</RelativeLayout>
</RelativeLayout>
But what happens is that the image is correct on portrait on small devices, but becomes distorted on larger devices or when on landscape mode(Once I rotate it). So what I did was I added different sizes of the image on the /res folder:
res/drawable-hdpi/footer.png
res/drawable-ldpi/footer.png
res/drawable-xdpi/footer.png
res/drawable-xxdpi/footer.png
each of the image has a different size, using the maximum width of every device(320px, 480px, 780px, 1200px)
I also used different layouts:
layout/activity_web.xml
layout-large/activity_web.xml
layout-xlarge/activity_web.xml
layout-xlarge-land/activity_web.xml
Still the logo below is distorted. All of the layouts are in portrait mode except the layout-xlarge-land which is in landscape mode. Should I create landscape modes for layout & layout-large ?
UPDATE
I tried Darnmason's answer by adding an image view to see if it will work even though it is rotated into landscape mode:
but what happens is that the image showing but it's width is similar to portrait mode. Did I miss anything as to why it is not stretching?
Using an image as a background doesn't give you much control over image scaling. I would recommend using an ImageView setting
android:src="#drawable/footer"
android:scaleType="centerCrop"
and maybe you'll need android:adjustViewBounds="true"
This will ensure the image fills the screen, cropping as necessary depending on the aspect ratio of the device. It would still make sense to have a portrait and landscape version but you won't have to care about the slight variances in aspect ratio between devices. Some are more wide-screen than others!
I'm trying to display a photo with so that it fills the display vertically, and is scrollable horizontally. My photos are of arbitrary dimensions, but always in landscape aspect ratio.
I placed an ImageView inside a HorizonalScrollView, and it almost works, except the aspect ratio is off. The ImageView is resized to fit exactly vertically, but the image is horizontally stretched or compressed.
I've tried every combination of values for scaleType and adjustViewBounds, and nothing works.
Can it be done with pure XML or do I have to resize my views in Java?
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/image_photo"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/panoramic_1" />
</HorizontalScrollView>
Thanks in advance...
The problem is the:
android:scaleType="fitXY"
It scales in X and Y independently, so that imageview matches the maximum visible width and height.
Change to:
android:scaleType="centerInside"
This will keep the original aspect.
More info here: http://developer.android.com/reference/android/widget/ImageView.ScaleType.html
I am developing a sort of ebook application and I am trying to display an image in the following two ways. When the screen is in portrait, I have the image horizontally fitted and vertically centered. When the screen is in landscape, I want the image to fill the screen horizontally with the aspect ratio maintained. Since the images that I am using are longer than they are wide, I have a ScrollView to allow viewing of the entire image.
How should I be scaling my ImageView to achieve this? I know that FIT_CENTER comes close to what I want to do, but since the image is narrower than it is tall, it does not fill the width. I tried FIT_XY with setAdjustViewBounds set to true but that still doesnt maintain my aspect ratio. Does anyone have any ideas?
Here is my code so far:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:isScrollContainer="true"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:layout_gravity="center_vertical|clip_horizontal"
android:scrollbarAlwaysDrawVerticalTrack="true"
android:id="#+id/Root">
<ScrollView android:id="#+id/ScrollView01"
android:tag="scroller"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|clip_horizontal">
<ImageView android:scaleType="fitCenter"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/imgView"
android:adjustViewBounds="true"></ImageView>
</ScrollView>
</LinearLayout>
http://i.stack.imgur.com/9J8IW.png
This is in portrait. It is exactly as I want it. The image fits the width of the screen and aspect ratio is maintained.
http://i.stack.imgur.com/Kw68o.png
This is in landscape. The image's aspect ratio is maintained and the scrollview works as needed, but I need the imageview to stretch the width of the screen
I would like to place an image into the background of my activities. This image is effectively a circle shaped logo which will be semi-transparent, and should sit behind any other content on the UI. I will also offset it into the bottom corner.
What is the best way I can place this image without it become "squashed" (egg shaped) under varying screen dimensions? My app will operate in portrait mode only.
This is what I'm trying to achieve:
So far, I've placed my circle image onto 3 white rectangle canvases for the popular sized screens 480x854, 320x480 and 240x320 which seems to work, but I don't think its very solid.
Any tips?
This probably is not the perfect solution, and will require a bit of maintenance on the UI, but here's my thought:
<FrameLayout
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_gravity="bottom|right"
android:layout_marginRight="-15dp"
android:layout_marginBottom="-15dp"
android:src="#drawable/circle"
/>
<!--Rest of Layout goes here-->
</FrameLayout>
Just wrap this around your current layout, and adjust the right and bottom margins to whatever negative margins you wish for the offsetting. This should work for any screen size, assuming you have drawables for each density.
EDIT: Yeah, you also shouldn't have to worry about a white rectangle this way, either. Just add the android:background tag to the FrameLayout with whatever color you want for the background, and save the logo as a transparent PNG.
I would do it like this, use a relative layout to have an ImageView in the background with on top of that a relative layout containing the rest of your layout
This way the image is as big as it can be keeping the correct dimensions
<?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">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:scaleType="centerInside"
android:src="#drawable/splash_picture"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<!-- rest of your layout -->
</LinearLayout>
</RelativeLayout>