Android: Handling images size for multiple screens

Question

I find it really hard to handle images with Android, I think it's the hardest part of Android development...

1) I have an image, I want it to be the background of my application so I do

<?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="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".MainActivity" 
    android:background="@drawable/accueil">
</RelativeLayout>

The background should fill the entire screen but it's not the cas. Only a part of the background is shown on some (small) screens. How could I say: I want the image to fill all the screen even if the image is bigger then the screen the image should be reduced so I see all the background?

Maybe I should put my background instead of using it as a background

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".MainActivity">


       <ImageView
           android:id="@+id/imageView1"
           android:layout_width="500dp"
           android:layout_height="500dp"
           android:adjustViewBounds="false"
           android:src="@drawable/accueil" />

</RelativeLayout>

Yet in some devices the image is a bit cropped.

2) I have to place a layout in another layout but I want its position to be precise, its width to be relative to the parent layout. Yet if I do

<?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:background="@drawable/fond">

 <LinearLayout
     android:layout_width="300dp"
     android:layout_height="350dp"
     android:layout_marginTop="20dp"
     android:background="@drawable/fondshare"
     android:orientation="vertical" >

you can see the result is not what I expected (the linear layout being the rectangle with the smiley and all the buttons) enter image description here

have you different output for different layout using same image? — Android_coder, Feb 07 '13 at 09:25
Thank you. Now I only have 1 image for all the screen resolutions, and only this layout is using this image. I don't think I have to put 1 image for each resolution (small, medium, large) because my image should widen to match the borders — morg, Feb 07 '13 at 09:39
you can some help from here http://stackoverflow.com/questions/16706076/font-size-and-images-for-different-devices/16910589#16910589 — Bhavesh Jethani, Jul 16 '14 at 06:51

score 2 · Answer 1 · edited Feb 15 '13 at 22:36

Android categorizes device screens using two general properties: size and density. You should expect that your app will be installed on devices with screens that range in both size and density. As such, you should include some alternative resources that optimize your app’s appearance for different screen sizes and densities. There are four generalized sizes: small, normal, large, xlargeAnd four generalized densities: low (ldpi), medium (mdpi), high (hdpi), extra high (xhdpi)

To declare different layouts and bitmaps you'd like to use for different screens, you must place these alternative resources in separate directories, similar to how you do for different language strings.

Also be aware that the screens orientation (landscape or portrait) is considered a variation of screen size, so many apps should revise the layout to optimize the user experience in each orientation.

See android.com's "Supporting Different Screens" article for more information.

But even if I create multiple folders for each screen width it won't fit every mobile.. — morg, Feb 07 '13 at 10:21
Yes Read this link it will work on every screen.and also add manifest to support all screen and all resulation. — Md Maidul Islam, Feb 07 '13 at 14:14

score 0 · Answer 2 · answered Feb 07 '13 at 09:29

0

I think if you want use Bitmap as your background, there are some ways of solution:

Design several size of image for different devices.(drawable-hdpi, drawable-xhdpi...)
Use different layout and put them into different resource package that using qualifiers.(layout-sw600dp...)

answered Feb 07 '13 at 09:29

Andrew Wang

81
1
3

I don't think it's the right solution, my image should fit all the screen and widen if necessary, not being cropped – morg Feb 07 '13 at 09:31

score 0 · Answer 3 · edited May 23 '17 at 12:16

0

I would suggest you to adjust your layout on each layout folder and your drawable folder.

layout layout-800x480 layout-land etc. refer here http://developer.android.com/guide/practices/screens_support.html

or refer to this link.

Designing UI for different screen resolutions

edited May 23 '17 at 12:16

Community

1
1

answered Feb 07 '13 at 09:29

She Smile GM

1,322
1
11
33

Why? I think the image has to take all the width/height of the screen as it is the background. I should not have to adapt my image should I? – morg Feb 07 '13 at 09:46
you should. Put your image on different drawable folders depending on the required sizes and resolution(meaning adjust the sizes of your image based on different drawable folders). Although you are depending the width and height to the screen. Android will also adjust what image resolution is needed for different device, it select which drawable folder is necessary. – She Smile GM Feb 07 '13 at 10:18
Ok. So for instance I create a folder layout-normal and I have this image (see imageview1 in my main post) and it won't fill the borders! Whatever scale I use it is cropped or too big... what could I do? – morg Feb 07 '13 at 11:05
let's say you have imageview1, you have to put your imageview1 to each drawable folders, for example: imageview1 must have a size of 50x50 pixels if you are going to place it in drawable-mdpi, and 75x75 pixels for drawable-hdpi..etc. so when you run your application to a certain device, it will look to a drawable folder that will match its resolution or density. Same with layout folder. – She Smile GM Feb 08 '13 at 01:29

score 0 · Answer 4 · answered Feb 07 '13 at 10:11

0

Try this:

I met the issue lot of time for my layout deigns.Finally i got a solution that's like

I have create the layouts folders for different screen like small and large. Orginal layout folder xml file is working only for normal layout that is HVGA So create the folder with name=layout-small for small layout and put the xml files here. Then you create the folder with folder name=layout-long for large layout amd xml files here for that layouts.

answered Feb 07 '13 at 10:11

Android_coder

9,953
3
17
23

I understand the idea, but I'm not sure I really need to do that... It's only a background, it's not an image placed in layouts (for my 1)) – morg Feb 07 '13 at 10:37
Or when my image's height is fill_parent why is it cropped ? – morg Feb 07 '13 at 10:48
I edited my main post, seed cod in 1) after the sentencd "Maybe I should put my background instead of using it as a background" – morg Feb 07 '13 at 11:19
Ad I said I use 9 patch images so the image should be able to widen in order to match the borders / not to be cropped – morg Feb 07 '13 at 11:20
where are you used imageview? – Android_coder Feb 07 '13 at 11:24
What should I use? Background in the relative Layout? The image is bigger then it's real dimensions if I do that – morg Feb 07 '13 at 11:36
are u try to without 9 patch images? – Android_coder Feb 07 '13 at 11:49
can you post entire layout only because i couldn't understood clearly? – Android_coder Feb 07 '13 at 12:07
don't put imageview you set layout background i hope that is working because your put the height and width mannually it's differ from each layout... – Android_coder Feb 07 '13 at 12:15

score 0 · Answer 5 · answered Feb 07 '13 at 14:20

The best Technique to get this task done is to use linear layout and use

 <LinearLayout
 android:layout_width="300dp"
 android:layout_height="350dp"
 android:layout_marginTop="20dp"
 android:weightSum="3"
 android:background="@drawable/fondshare"
 android:orientation="vertical" >

  <View
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    />

  </LinearLayout>

In above case

android:weightSum="number of parts you want to divide layout in"

android:layout_weight="1"

Total portion occupied by your view . Assume that weightsum of linear layout is 3 So the portion covered by view will be

Width of view :

(layout_width / WeightSum) * weight

Height of view :

(layout_height / WeightSum) * weight

in your case your view final height would be= 119dp

and final width would be= 100dp

score 0 · Answer 6 · answered Feb 04 '17 at 10:09

I recently had to do something similar to this. So here are some tricks.

If you want to preserve the aspect ratio of your image, use this in a relative layout. Note:The layout width and height of the relative layout should be match_parent or fill_parent.

<ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:id="@+id/bgloginpage"

        android:scaleType="centerCrop" />

This will crop the image from its center. There are other options available as well. Use fitXY instead of centerCrop to fit, it to the device with no consideration to the aspect ratio. For Best results with this, use a considerably large image.

Another option would be to sufficiently add a solid background colour to your image and increase its size. Load it into your drawables folder and use this class.

public class ReturnBackGroundImage {



//To avoid java.lang.OutOfMemory exceptions, check the dimensions of a    bitmap before decoding it,
// unless you absolutely trust the source to provide you with predictably sized image data that
// comfortably fits within the available memory.

public static Bitmap decodeSampledBitmapFromResource(Resources resources,    int resId, int reqWidth, int reqHeight, boolean UseDeviceHeight, Activity  activity) {


    if(UseDeviceHeight){
        DisplayMetrics metrics = new DisplayMetrics();

        activity.getWindowManager().getDefaultDisplay().getMetrics(metrics);
        reqHeight = metrics.heightPixels;
        reqWidth = metrics.widthPixels;
    }

    final BitmapFactory.Options options = new BitmapFactory.Options();
    options.inJustDecodeBounds = true;
    BitmapFactory.decodeResource(resources, resId, options);
    return ResizeImage(resources,options,resId,reqWidth,reqHeight);
}

public static Bitmap ResizeImage(Resources resources,BitmapFactory.Options options, int resId, int reqWidth, int reqHeight) {

    double imageHeight = options.outHeight;
    double imageWidth = options.outWidth;
    double ratio = reqHeight / imageHeight;
    int newImageWidth = (int) (imageWidth * ratio);
    Bitmap bMap = BitmapFactory.decodeResource(resources, resId);
    return  getResizedBitmap(bMap, reqHeight, newImageWidth);
   }
}

Use it as follows

ImageView v = (ImageView)findViewById(R.id.bgloginpagew);
  v.setImageBitmap(ReturnBackGroundImage.decodeSampledBitmapFromResource(getResources(),R.drawable.mainbgforapp,0,0,true,walkThroughActivity.this));

This is a modified version of the example from the android website.

If someone needs the ratios for saving different sized images, it is

xxxhdpi/xxhdpi = 4/3
xxxhdpi/xhdpi = 2/1
xxhdpi/hdpi = 2/1
xhdpi/mdpi = 2/1

afaik these ratios are only valid for square images. Thought I'd put it out there for some guy who needed them, like I did.

Android: Handling images size for multiple screens

6 Answers6

Linked