Search code examples
androidandroid-layoutimageviewprogrammatically-createdevenly

android distribute evenly imageview android programatically


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


Solution

  • 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