Android set the GridView to have 2 columns per row only

Question

Here is my code in my Activity:

public class GridViewActivity extends Activity {

    GridView gridView;

    static final String[] MOBILE_OS = new String[] { "Android", "iOS",
            "Windows", "Blackberry" };

    @Override
    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        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(),
                        ((TextView) v.findViewById(R.id.grid_item_label))
                                .getText(), Toast.LENGTH_SHORT).show();

            }
        });

    }

}

And in my Image Adapter:

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

    private TextView t;
    public ImageAdapter(Context context, String[] mobileValues) {
        this.context = context;
        this.mobileValues = mobileValues;
    }

    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 value into textview
            TextView textView = (TextView) gridView
                    .findViewById(R.id.grid_item_label);
            textView.setText(mobileValues[position]);
            Button b = (Button) gridView.findViewById(R.id.grid_item_button);
            Button b2 = (Button) gridView.findViewById(R.id.grid_item_button2);
            t = (TextView) gridView
                    .findViewById(R.id.grid_item_number);
            b.setOnClickListener(new MyOnClickListener(t));
            b2.setOnClickListener(new MyOnClickListenerm(t));
            // set image based on selected text
            ImageView imageView = (ImageView) gridView
                    .findViewById(R.id.grid_item_image);

            String mobile = mobileValues[position];

            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;
    }

    private void clickedButton(TextView tv){

        int num = Integer.parseInt(tv.getText().toString());
        ++num;
        tv.setText(Integer.toString(num));

    }
    private void clickedButtonm(TextView tv){

        int num = Integer.parseInt(tv.getText().toString());
        if(num>0){
            --num;
            tv.setText(Integer.toString(num));
        }
    }
    @Override
    public int getCount() {
        return mobileValues.length;
    }

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

    @Override
    public long getItemId(int position) {
        return 0;
    }
    class MyOnClickListener implements OnClickListener{

        public final TextView tv;

        public MyOnClickListener(TextView tv){
            this.tv=tv;
        }
        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            clickedButton(tv);
        }

    }
    class MyOnClickListenerm implements OnClickListener{

        public final TextView tv;

        public MyOnClickListenerm(TextView tv){
            this.tv=tv;
        }
        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            clickedButtonm(tv);
        }

    }

}

and my mobile.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp" >

    <ImageView
        android:id="@+id/grid_item_image"
        android:layout_width="wrap_content"
        android:layout_height="74dp"
        android:layout_marginRight="10px"
        android:layout_weight="1.44"
        android:src="@drawable/android_logo" >
    </ImageView>


    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <Button
            android:id="@+id/grid_item_button"
            android:layout_width="30dp"
            android:layout_height="23dp"
            android:text=" " />

        <TextView
            android:id="@+id/grid_item_number"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="0" />

          <Button
            android:id="@+id/grid_item_button2"
            android:layout_width="30dp"
            android:layout_height="23dp"
            android:text=" " />
    </LinearLayout>

    <TextView
        android:id="@+id/grid_item_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5px"
        android:text="@+id/label"
        android:textSize="15px" >
    </TextView>

</LinearLayout>

I find it a bit troubling not to be able to pout 2 items per row. I would like to know how to format my GridView to be able to fulfill such idea

Here is my source code: http://www.mediafire.com/?25vae87fvahu4wp

Answer 1

Use the android:numColumns="2" in your GridView widget

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/grid"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:numColumns="2"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:scrollbarStyle="outsideOverlay"
    android:verticalScrollbarPosition="right"
    android:scrollbars="vertical">
</GridView>

You can get familiar with Android UI in this link.Try to focus on the GridView Topic