Apps Overlaying text onto buttons in a gridview

[eljainc]

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"
androidnClick="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
};




}

 

[jonbonazza]

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

 

[rchamp]

@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?

 

[pietjuhhh1990]

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

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