How to make a 2D grid of images?

Question

I am new to Android development and I am trying to make an app that will have a menu made of a 3x3 grid of images. I am having trouble getting the images to scale and take up 1/3rd of the screen width each. I think I should use RelativeLayout, but I doesn't seem to support android:weight. I then tried LinearLayout, but it only scaled horizontally.

I've been working on this all day and haven't been able to figure it out. Any help would be appreciated.

*EDIT: I found a way that works, using TableLayout with android:shrinkColumns="*" for width, and adding android:layout_weight="1" to all TableRows for height. I used android:scaleType="fitCenter". but the scale type was not the problem, getting the View to fit was. This method works for images that are too large, but it might would not work for images that are too small. `

Answer 1

1st Get the Screen device Height and Width 2nd Scale your image to the one third value of the image and re assign it

Check this code

The Main.xml

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0.33"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.33"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.33"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.33"
        android:src="@drawable/ic_launcher" />

</LinearLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0.33"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.33"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.33"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.33"
        android:src="@drawable/ic_launcher" />

</LinearLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0.33"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/imageView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.33"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/imageView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.33"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/imageView9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.33"
        android:src="@drawable/ic_launcher" />

</LinearLayout>

</LinearLayout>

And here is the MainActivity.java file

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.os.Bundle;
import android.view.Display;
import android.widget.ImageView;

public class MainActivity extends Activity {


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ImageView img[] = new ImageView[9];
    img[0] = (ImageView) findViewById(R.id.imageView1);
    img[1] = (ImageView) findViewById(R.id.imageView2);
    img[2] = (ImageView) findViewById(R.id.imageView3);
    img[3] = (ImageView) findViewById(R.id.imageView4);
    img[4] = (ImageView) findViewById(R.id.imageView5);
    img[5] = (ImageView) findViewById(R.id.imageView6);
    img[6] = (ImageView) findViewById(R.id.imageView7);
    img[7] = (ImageView) findViewById(R.id.imageView8);
    img[8] = (ImageView) findViewById(R.id.imageView9);


    Display mDisplay= getWindowManager().getDefaultDisplay();
    int Devicewidth= mDisplay.getWidth();
    int DeviceHeight= mDisplay.getHeight();
    for(int i=0; i<9 ; i++){
        //You can use different images here since i have only one I have used only one
        Bitmap oldBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
        Bitmap newBitmap = getResizedBitmap(oldBitmap, DeviceHeight/3, Devicewidth/3);
        img[i].setImageBitmap(newBitmap);
    }

}

public Bitmap getResizedBitmap(Bitmap bm, int newHeight, int newWidth) {
    int width = bm.getWidth();
    int height = bm.getHeight();
    float scaleWidth = ((float) newWidth) / width;
    float scaleHeight = ((float) newHeight) / height;
    Matrix matrix = new Matrix();
    matrix.postScale(scaleWidth, scaleHeight);
    Bitmap resizedBitmap = Bitmap.createBitmap(bm, 0, 0, width, height, matrix, false);
    return resizedBitmap;
}


}

Answer 2

You can use a GridView (see http://developer.android.com/guide/topics/ui/layout/gridview.html and http://developer.android.com/reference/android/widget/GridView.html) and set numColumns to 3. As for ImageView, you can play with ScaleType to see which one is best for your case, for example FIT_XY, etc.

Hope this helps.