Overlaying text onto buttons in a gridview


  1. eljainc

    eljainc Member

    Hello,

    I am still quite new to developing apps with Android. I'm using a Gridview to show a 4x4 matrix of buttons. I would like to overlay text onto the images to show the number of times that they have been pressed/clicked.
    I'm not quite sure how to do this. I am able to display some images in a grid, but cannot get text to overlay.

    This is what I have:

    CountingMatrix.java
    -------------------
    public class CountingMatrix extends Activity
    {


    /** Called when the activity is first created. */

    int[] matrixCount = {0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0};



    public void writeCountMatrix()
    {
    FileWriter f;
    try
    {
    f = new FileWriter("/sdcard/afishrep.txt");



    f.write(matrixCount.toString());
    f.flush();
    f.close();
    }

    catch (IOException e1) {
    // TODO Auto-generated catch block
    e1.printStackTrace();
    }
    }

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.counting);
    // Capture our button from layout

    final GridView gridview = (GridView) findViewById(R.id.counting);
    gridview.setAdapter(new ImageAdapter(this));
    final Bitmap bm = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);

    final Canvas canv = new Canvas(bm);
    final Paint mPaint = new Paint();
    mPaint.setColor(Color.BLACK); //font color
    mPaint.setTextSize(15);

    gridview.setOnItemClickListener(new OnItemClickListener(){

    public void onItemClick(AdapterView<?> parent, View v, int position, long id)
    {
    matrixCount[position]++;

    // Toast.makeText(CountingMatrix.this, "" + position, Toast.LENGTH_SHORT).show();
    Toast.makeText(CountingMatrix.this, "" + matrixCount[position], Toast.LENGTH_SHORT).show();
    //font size
    // canv.drawText("Hello",100,100,mPaint);

    if (position==15)
    {
    Toast.makeText(CountingMatrix.this, "Writing report...", Toast.LENGTH_LONG).show();
    writeCountMatrix();
    }

    }
    });

    }


    }



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

    <GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/counting"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:columnWidth="90dp"
    android:numColumns="4"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="columnWidth"
    android:gravity="top"/>

    <Button
    android:id="@+id/submitCounts"

    android:layout_height="wrap_content"
    android:layout_width="100dp"

    android:text="Submit"
    android:eek:nClick="submitButtonClick" />

    </LinearLayout>




    ImageAdapter.java
    ------------------
    import android.content.Context;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.BaseAdapter;
    import android.widget.GridView;
    import android.widget.ImageView;

    public class ImageAdapter extends BaseAdapter {
    private Context mContext;

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

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

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

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

    // create a new ImageView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) {
    ImageView imageView;
    if (convertView == null) { // if it's not recycled, initialize some attributes
    imageView = new ImageView(mContext);
    imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
    imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
    imageView.setPadding(8, 8, 8, 8);

    } else {
    imageView = (ImageView) convertView;
    }

    imageView.setImageResource(mThumbIds[position]);
    return imageView;
    }

    // references to our images
    private Integer[] mThumbIds = {
    R.drawable.icon, R.drawable.icon,
    R.drawable.icon, R.drawable.icon,
    R.drawable.icon, R.drawable.icon,
    R.drawable.icon, R.drawable.icon,
    R.drawable.icon, R.drawable.icon,
    R.drawable.icon, R.drawable.icon,
    R.drawable.icon, R.drawable.icon,
    R.drawable.icon, R.drawable.icon
    };




    }

    Advertisement
  2. jonbonazza

    jonbonazza Well-Known Member

    So you are not using XML for the UI?

    At any rate, you need to put the Button and the TextView in a FrameLayout and then put the FrameLayout in the GridView
  3. rchamp

    rchamp New Member

    @jonbonazza, how would you go about doing that? I am trying to accomplish a similar thing. I am trying to just get text to display under each image. Do I need to use another layout? how would i link them together?
  4. pietjuhhh1990

    pietjuhhh1990 Well-Known Member

    If you want you're gridview to implement an other layout use

    yourGridView.setContentView(new Intent (R.layout.yourLayout)

Share This Page