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)

Answer 1

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.

Answer 2

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

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

Answer 3

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

Answer 4

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.

Answer 5

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

1. xxxhdpi/xxhdpi = 4/3
2. xxxhdpi/xhdpi = 2/1
3. xxhdpi/hdpi = 2/1
4. 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.

Answer 6

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