Scale multiple Android ImageViews to All Fit on Screen Regardless of Device Size

Question

I am new to Android. I have multiple image views in an activity and will be adding more. I'm using these image views as buttons. The problem I'm having is getting them to all fit correctly and scale according to the screen size. Can I get some help with this?

Here is the XML:

<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"
    tools:context=".MainActivity" >

    <ImageView
        android:id="@+id/homeBackground"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:scaleType="centerCrop"
        android:src="@drawable/homebackground" />

    <ImageView
        android:id="@+id/publicAffairs"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="5dp"
        android:src="@drawable/publicaffairs" />

    <ImageView
        android:id="@+id/actionAlerts"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="1dp"
        android:layout_toRightOf="@+id/publicAffairs"
        android:src="@drawable/actionalerts" />

</RelativeLayout>

The two image views I'm using as buttons don't scale according to device size.

enter image description here

I mean, it looks like maybe there is supposed to be a third image in the first row, and you will have up to three rows. If it's important that the images not be distorted at all, I don't think you can do this with just XML. — Tenfour04, Aug 23 '13 at 12:19

score 0 · Answer 1 · edited May 23 '17 at 12:13

Yes I have had this problem before. Refer to my other answers:

Placing a point at specific position on different screen densities and Resizing images from server

What you need to do is find how much larger this new screen is than your old one, by first getting the dimensions of your device that you are testing on and putting them in for widthOfStandardDevice and heightOfStandardDevice.Once you know how much larger the new screen is then your test one using DisplayMetrics, you make two multipliers to multiply everything by so that the position and size is the same relative to the screen size.

DisplayMetrics displaymetrics = new DisplayMetrics();

getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);

height = displaymetrics.heightPixels;

width = displaymetrics.widthPixels;

float widthMultiplier = width/widthOfStandardDevice;

float heightMultiplier = height/heightOfStandardDevice;

int image_width = (int)(/*regular image width on your test device*/ * widthMultiplier);

int image_height = (int)(/*regular image height on your test device*/ * heightMultiplier);

LayoutParams params = new LayoutParams(image_width, image_height);

params.setMargins(/*regular left margin*/ * widthMultiplier,
    /*regular bottom margin*/ * heightMultiplier,);
ImageView imageView = (ImageView)findViewById(R.id.imageView1);

imageView.setLayoutParams(params);

RelativeLayout x = (RelativeLayout)findViewById(R.id.relative_layout_id);

x.addView(imageView);

also, you should add id's to the ImageViews and RelativeLayout like this:

android:id="@+id/your_id_here"

for the imageView we created in the code earlier, the id would be:

android:id="@+id/imageView1"

for the layout it would be:

android:id="@+id/relative_layout_id"

Scale multiple Android ImageViews to All Fit on Screen Regardless of Device Size

1 Answers1