Question

I’m trying to make a gridview because thats better for more devices. I already tried to add my buttons in the interface builder (as ImageViews because I’ve added them as ImageButtons the size wasn’t good) and the result of that is in this screen: https://i.stack.imgur.com/bRkYd.png

Can anyone help me by making this in a GridView, just exactly the same but compatible on all the devices.

Thanks in advance ;)!

This is the ImageAdapter:

public class ImageAdapter extends BaseAdapter {
private Context context;
private final String[] buttonValues;

public ImageAdapter(Context context, String[] buttonValues) {
    this.context = context;
    this.buttonValues = buttonValues;
}

public View getView(int position, View convertView, ViewGroup parent) {

    LayoutInflater inflater = (LayoutInflater) context
        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

    View gridView;

    if (convertView == null) {

        gridView = new View(context);

        // get layout from mobile.xml
        gridView = inflater.inflate(R.layout.mobile, null);


        // set image based on selected text
        ImageView imageView = (ImageView) gridView
                .findViewById(R.id.grid_item_image);

        String button = buttonValues[position];



        if (button.equals("homework")) {
            imageView.setImageResource(R.drawable.homework);
        } else if (button.equals("schedule")) {
            imageView.setImageResource(R.drawable.schedulebut);
        } else if (button.equals("planner")) {
            imageView.setImageResource(R.drawable.plannerbut);
        } else {
            imageView.setImageResource(R.drawable.settingsbut);
        }

    } else {
        gridView = (View) convertView;
    }

    return gridView;
}

@Override
public int getCount() {
    return buttonValues.length;
}

@Override
public Object getItem(int position) {
    return null;
}

@Override
public long getItemId(int position) {
    return 0;
}

}

and this is my method in the onCreate :

static final String[] MOBILE_OS = new String[] { "Homework", "Schedule",
        "Planner", "Settings" };
private void setGridView() {
    gridView = (GridView) findViewById(R.id.gridView1);

    gridView.setAdapter(new ImageAdapter(this, MOBILE_OS));

    gridView.setOnItemClickListener(new OnItemClickListener() {
        public void onItemClick(AdapterView<?> parent, View v,
                int position, long id) {
            Toast.makeText(getApplicationContext(), "LOL!", Toast.LENGTH_SHORT).show();

        }
    });

}

Answer 1

Since you are trying to use a 2X2 Grid and have only 4 elements, use android:numColumns="2" as an attribute of your GridView.

Additionally, there is this excellent tutorial on GridViews!

Code snippet to implement only Images in your Grid :

public class ImageAdapter extends BaseAdapter {
    private Context context;


    public ImageAdapter(Context context) {
        this.context = context;
    }

    public View getView(int position, View convertView, ViewGroup parent) {

        LayoutInflater inflater = (LayoutInflater) context
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        View gridView;

        if (convertView == null) {

            gridView = new View(context);

            // get layout from mobile.xml
            gridView = inflater.inflate(R.layout.mobile, null);


            // set image based on selected text
            ImageView imageView = (ImageView) gridView
                    .findViewById(R.id.grid_item_image);



            if (mobile.equals("Windows")) {
                imageView.setImageResource(R.drawable.windows_logo);
            } else if (mobile.equals("iOS")) {
                imageView.setImageResource(R.drawable.ios_logo);
            } else if (mobile.equals("Blackberry")) {
                imageView.setImageResource(R.drawable.blackberry_logo);
            } else {
                imageView.setImageResource(R.drawable.android_logo);
            }

        } else {
            gridView = (View) convertView;
        }

        return gridView;
    }

    @Override
    public int getCount() {
        return mobiles.length;
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

}

EDIT : You are getting the same image in all the buttons because you are matching the strings which you have written in different cases. (You are using “Homework” in one place and “homework” in another)

So, use static final String[] MOBILE_OS = new String[] { "homework", "schedule", "planner", "settings" }; and it would work fine.