android distribute evenly imageview android programatically

Question

I am trying to distribute imageviews evenly on a screen, the Imageviews are different size and In the example below I want to have 12 imageviews, 4 in each row and 3 rows. The problem I get is that the just clump together to the left and every attempt to make the fill the entire row they just stretch out but I want a space between the imageviews instead. I want to do this programatically since I want to choose how many imageviews I put in the screen. I have a layout just containing a linearLayout in which I want to put the imageviews:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/treasureLinearLayout"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff134BE8"
android:padding="10dp"
/>

The code that add the imageviews are in a fragment:

    final float scale = getContext().getResources().getDisplayMetrics().density;
    int dps = 90;
    LinearLayout layout = (LinearLayout) view.findViewById(R.id.treasureLinearLayout);
    layout.setOrientation(LinearLayout.VERTICAL);  //Can also be done in xml by android:orientation="vertical"

    for (int i = 0; i < 3; i++) {
        LinearLayout row = new LinearLayout(getContext());

        row.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
        LinearLayout.LayoutParams param = new LinearLayout.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.WRAP_CONTENT, 1.0f);
        row.setLayoutParams(param);
        for (int j = 0; j < 4; j++) {
            dps -= 5;

            ImageView imageView = new ImageView(getContext());
            imageView.setImageResource(R.drawable.ic_menu_map);
            imageView.setBackgroundResource(R.drawable.circle);

            imageView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT));

            int pixels = (int) (dps * scale + 0.5f);
            imageView.getLayoutParams().height = pixels;


            imageView.getLayoutParams().width = pixels;

            imageView.setScaleType(ImageView.ScaleType.FIT_XY);

            row.addView(imageView);
            imageView.setOnClickListener(new View.OnClickListener() {
                public void onClick(View v) {
                    TreasuresFragment treasureFrag = ((NavigationDrawerActivity) getActivity()).getTreasureFrag();
                    ((NavigationDrawerActivity)getActivity()).showHideFragment(treasureFrag);

                }
            });

        }

        layout.addView(row);
    }

screenshot of the application

Can you use a grid view ? – Suresh Kumar Sep 10 '16 at 06:32 — Suresh Kumar, Sep 10 '16 at 06:32

score 0 · Accepted Answer · answered Sep 10 '16 at 06:36

0

Create a Grid view in the layout .

Gridview grid = (Gridview) findViewById(R.id.grid_view);
grid.setNumColumns(3);
    grid.setColumnWidth(GridView.AUTO_FIT);
    grid.setVerticalSpacing(5);
    grid.setHorizontalSpacing(5);
    grid.setStretchMode(GridView.STRETCH_COLUMN_WIDTH);

And here is the adapter class : public class ImageAdapter extends BaseAdapter {

private Context mContext;
private Bitmap[]mis_fotos;

public ImageAdapter(Context c) {
    mContext = c;    }

public int getCount() {
    return mis_fotos.length;
    }

public Object getItem(int position) {
    return position;    }

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

public View getView(int position, View convertView, ViewGroup parent) {
    ImageView imageView;
    if (convertView == null) {
        imageView = new ImageView(mContext);
        imageView.setLayoutParams(new GridView.LayoutParams(width/3, height/3));
        imageView.setScaleType(ImageView.setScaleType(ScaleType.FIT_XY));
        imageView.setPadding(0, 0, 0, 0);
    } else {
        imageView = (ImageView) convertView;
    }
    imageView.setImageBitmap(mis_fotos[position]);
    return imageView;
}

} and then send the list of images to the adapter

answered Sep 10 '16 at 06:36

Suresh Kumar

227
1
11
29

As long as I fixes the problem I see no problem with using gridview, i am not familiar to the gridview but if I can set different height and width of the imageviews and provide a list of the imageviews then it is ok. You set some width and height inside the adapter, what is the meaning of that? Is that the size of the imageview or the size of a grid? – Tobias Sundqvist Sep 10 '16 at 07:55
it is the size of the image view – Suresh Kumar Sep 10 '16 at 11:22
I will try and see how it looks like, I have time tomorrow night, will see if it does the trick, thx for your help – Tobias Sundqvist Sep 10 '16 at 18:03
Works like a charm, the only thing I needed to change was grid.setVerticalSpacing(5); I had to increase it in order to get some space between the images, but I wonder if it is possible to get the height to automatically span over the entire screen, the layout_height="fill_parent" doesn't seem to work. I am a little worried what will happen when the user tilts the device, I can always change the number of columns then but I guess I can get the height and screen width and use that to set the correct vertical spacing. I will set this question as answered – Tobias Sundqvist Sep 12 '16 at 11:34

android distribute evenly imageview android programatically

1 Answers1