How to make Android Grid view - Vertical spacing dynamic?

Question

I am using Grid View where each item contains an image and some text. The size of text is dynamic. The problem am having is when the text is too long,its getting deprecated. The problem goes if I use a high vertical spacing. But since the length of text is different each time, I cannot use a high vertical spacing for all items. For small text am having no issues.

My layout.xml looks like this

 <LinearLayout
    android:id="@+id/list_container_layout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:padding="@dimen/widget_padding"
    android:background="@color/content_layout_bg"
    android:orientation="vertical" >

    <GridView
        android:id="@+id/grid_workflow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stretchMode="columnWidth"    
        android:numColumns="auto_fit"
        android:verticalSpacing="@dimen/widget_padding" >

    </GridView>

</LinearLayout>

My Adapter class looks like this:

public class WorkflowAdapter extends ArrayAdapter<String> {

private final Context context;
private final ArrayList<String> nameValues;
private ViewHolder viewHolder;
private final int resourceId;

public WorkflowAdapter(Context context, int resourceId,ArrayList<String> nameValues) {      
    super(context,resourceId,nameValues);
    this.context = context;
    this.nameValues = nameValues;
    this.resourceId = resourceId;
}

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

    if (convertView == null) {
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        convertView = inflater.inflate(resourceId, parent, false);

        viewHolder = new ViewHolder();
        viewHolder.label = (TextView) convertView.findViewById(R.id.txt_workflow_child);

        convertView.setTag(viewHolder);         
    }
    else
    {
        viewHolder = (ViewHolder) convertView.getTag();
    }


    String menuItem = nameValues.get(position);
    viewHolder.label.setText(menuItem);

    return convertView;
}


public class ViewHolder {
    TextView label;     
}
}

And my child layout.xml looks like this

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/rounded_corner_ed"
    android:orientation="vertical"
    android:padding="@dimen/widget_padding" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/workflow_child_bg"
        android:orientation="vertical"
        android:padding="@dimen/widget_padding" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="@dimen/widget_padding"
            android:layout_marginRight="@dimen/widget_padding"
            android:src="@drawable/icon64x64" />
    </LinearLayout>

</LinearLayout>

<TextView
    android:id="@+id/txt_workflow_child"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="@dimen/widget_padding"
    android:text="TextView"
    android:textColor="@color/text_color"
    android:textSize="@dimen/text_size" />

Just to mention I am setting column width for Grid View dynamically from code. Any help anyone ?

Answer 1

Hi Please use this example:

   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MenuActivity" >

<include
    android:id="@+id/include1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    layout="@layout/activity_header" />

<View 
    android:id="@+id/view"
    android:layout_below="@+id/include1"
    android:layout_width="fill_parent"
    android:layout_height="20dp"
    android:background="#CCCFD6" />

<GridView 
    android:id="@+id/grid_view"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_below="@+id/view"
    android:gravity="center"
    android:background="@drawable/gray_menu"
    android:verticalSpacing="20dp"
    android:stretchMode="columnWidth" > 

  </GridView>

     </RelativeLayout>

ImageAdapter class:

        public class ImageAdapter extends BaseAdapter 
     {
private Context mContext;

// Keep all Images in array
public Integer[] mThumbIds = {
        R.drawable.a, R.drawable.b, R.drawable.c, 
        R.drawable.d, R.drawable.e, R.drawable.f,
        R.drawable.g, R.drawable.h, R.drawable.i,  
        R.drawable.j, R.drawable.k, R.drawable.l,
        R.drawable.m, R.drawable.n, R.drawable.o
};

String[] titles = {"ddsdxc","xcxc","Allersdfgies",
           "Immsdunidsdzation","sdfdsdc","Faczxmily",
           "Mezdiczccations","Alerzxct","Insuraxcnce",
           "Surgezxries","Teszxct","Hezxclth",
           "Emezxrgzxczency","Medizxccal","Exzxizxczt"};

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

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

@Override
public Object getItem(int position) {
    return mThumbIds[position];
}

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

   /* @Override
  public View getView(int position, View convertView, ViewGroup parent) {
    ImageView imageView = new ImageView(mContext);
    imageView.setImageResource(mThumbIds[position]);
    //imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
    //imageView.setLayoutParams(new GridView.LayoutParams(200, 200));
    return imageView;
}*/

public View getView(int position, View convertView, ViewGroup parent) 
{ 
    ImageView icon;
icon = new ImageView(mContext);

LayoutInflater inflater = (LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View row=inflater.inflate(R.layout.row, parent, false);
TextView label=(TextView)row.findViewById(R.id.image_name);
label.setText(titles[position]);
icon=(ImageView)row.findViewById(R.id.album_image);

icon.setImageResource(mThumbIds[position]);

return row;
}
}

Class:

  public class MenuActivity extends Activity implements              OnItemClickListener,OnClickListener
 {
  GridView gridView;
    @Override
protected void onCreate(Bundle savedInstanceState) 
{
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.activity_menu);
    initUi();
    }
  private void initUi() 
{
   gridView = (GridView) findViewById(R.id.grid_view);   
    gridView.setNumColumns(3);      
    // Instance of ImageAdapter Class
    gridView.setAdapter(new ImageAdapter(this));
    gridView.setOnItemClickListener(this);
}



   @Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) 
{
    // TODO Auto-generated method stub
    switch (arg2) 
    {
    case 0:
        intent=new Intent(this, Psfssdfs.class);
        startActivity(intent);
        break;
    case 1:
        intent=new Intent(this, CActivity.class);
        startActivity(intent);
        break;
    case 2:
        intent=new Intent(this, AActivity.class);
        startActivity(intent);
        break;  
    case 3:
        intent=new Intent(this, IActivity.class);
        startActivity(intent);
        break;
    case 4:
        //intent=new Intent(MenuActivity.this, .PonActivity.class);
        //intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK|Intent.FLAG_ACTIVITY_CLEAR_TOP);
        //startActivity(intent);
        break;
    case 5:
        intent=new Intent(this, FnagerActivity.class);
        startActivity(intent);
        break;
    case 6:
        intent=new Intent(this, MeomeActivity.class);
        startActivity(intent);
        break;
    case 7:
        //intent=new Intent(MenuActivity.this, PconActivity.class);
        //intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK|Intent.FLAG_ACTIVITY_CLEAR_TOP);
        //startActivity(intent);
        break;
    case 8:
        intent=new Intent(this, Inzivity.class);
        startActivity(intent);
        break;
    case 9:
        intent=new Intent(this, PrzxcsActivity.class);
        startActivity(intent);
        break;
    case 10:
        intent=new Intent(this, TestsActivity.class);
        startActivity(intent);
        break;
    case 11:
        //intent=new Intent(MenuActivity.this, PersonazxvconActivity.class);
        //intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK|Intent.FLAG_ACTIVITY_CLEAR_TOP);
        //startActivity(intent);
        break;
    case 12:
        intent=new Intent(this, Emergzxcctivity.class);
        startActivity(intent);
        break;
    case 13:
        intent=new Intent(this, MedicczxcActivity.class);
        startActivity(intent);
        break;
    case 14:
        showAlert();
        break;
    }   
}

Thanks.. I think this is helpful.