Raphael Pineda Raphael Pineda - 21 days ago 5
Android Question

Android set the GridView to have 2 columns per row only

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

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