Text View is not shown in Grid View with images

I am making app with Grid View for android. I got this code for Grid View with text view under images. But text view is not shown. Eclipse is not showing me any errors or anything in logcat

public class ImageAdapter extends BaseAdapter {
    private Context mContext;
    TextView text;
    private String[] mThumbTxt = {
            "Example Text 1", "Example Text 2", "Example Text 3", " Example Text 4","Example Text 5",
            "Example Text 1", "Example Text 2", "Example Text 3", " Example Text 4","Example Text 5",
            "Example Text 1", "Example Text 2", "Example Text 3", " Example Text 4","Example Text 5",
            "Example Text 1", "Example Text 2", "Example Text 3", " Example Text 4","Example Text 5",
            "Example Text 1", "Example Text 2", "Example Text 3", " Example Text 4","Example Text 5",
            "Example Text 1", "Example Text 2", "Example Text 3", " Example Text 4","Example Text 5",
            " Example Text 4","Example  5",


    };


// Keep all Images in array
public Integer[] mThumbIds = {
        R.drawable.img1, R.drawable.img2,
        R.drawable.img3,  R.drawable.img4, 
        R.drawable.img5,  R.drawable.img6, 
        R.drawable.img7,  R.drawable.img20, 
        R.drawable.img8,  R.drawable.img21, 
        R.drawable.img9,  R.drawable.img22, 
        R.drawable.img10,  R.drawable.img23, 
        R.drawable.img11,  R.drawable.img24, 
        R.drawable.img12,  R.drawable.img25, 
        R.drawable.img13,  R.drawable.img26, 
        R.drawable.img14,  R.drawable.img27, 
        R.drawable.img15,  R.drawable.img28, 
        R.drawable.img16,  R.drawable.img29, 
        R.drawable.img17,  R.drawable.img30, 
        R.drawable.img18,  R.drawable.img31, 
        R.drawable.img19
};

// 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);
    text=new TextView(mContext);
    imageView.setImageResource(mThumbIds[position]);
    imageView.setScaleType(ImageView.ScaleType.FIT_XY);
    imageView.setLayoutParams(new GridView.LayoutParams(270, 270));
    text.setText(mThumbTxt[position]);  
    return imageView;
}

What is wrong with this code? What I did wrong? Separate XML layout file

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher" />
<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView" />

Answers


TextView is not showing because you have only returned the ImageView as a view in your getView() method.

You need to create separate layout for that you will have to return the layout which will contain the ImageView and TextView.

OR

You can create a LinearLayout dynamically in which you add your ImageView and TextView and return your LinearLayout

  return layout;

Try out as below:

@Override
public View getView(int position, View convertView, ViewGroup parent) {
     LinearLayout linearlayout=new LinearLayout(mContext);
     ImageView imageView = new ImageView(mContext);
     text=new TextView(mContext);
     linearlayout.setOrientation(LinearLayout.VERTICAL);
    imageView.setImageResource(mThumbIds[position]);
    imageView.setScaleType(ImageView.ScaleType.FIT_XY);
    imageView.setLayoutParams(new GridView.LayoutParams(270, 270));
    text.setText(mThumbTxt[position]); 

      linearlayout.addView(imageView);
      linearlayout.addView(text);
    return linearlayout;
}

In getview you have

return imageView;

So its normal only imageview is displayed. Wrap ImageView and TextViewin a RelativeLayout/LinearLayout and return the view.

OR inflate a layout with imageView and textView and return the view.

Edit:

In the constructor

   LayoutInflater mInflater; 
   public ImageAdapter(Context c){
       mInflater = LayoutInflater.from(c);
   }

Then in getView

  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
  ViewHolder holder;
  if (convertView == null) { 
      convertView = mInflater.inflate(R.layout.yourlayout, 
                         parent, false);
      holder = new ViewHolder(); 
      holder.tv = (TextView) convertView.findViewById(R.id.textView1); 
      holder.iv = (ImageView) convertView.findViewById(R.id.imageView1);
      convertView.setTag(holder); 
       } else { 
           holder = (ViewHolder) convertView.getTag(); 
       } 
           holder.iv.setImageResource(mThumbIds[position]);
           holder.tv.setText(mThumbTxt[position]);
     return convertView;
 }

Then

static class ViewHolder
{
    TextView tv;
    ImageView iv;
} 

Reference:

http://developer.android.com/training/improving-layouts/smooth-scrolling.html

How ListView's recycling mechanism works


Take a

ViewHolder holder; 
   holder = new ViewHolder();

and and this image and text in this ViewHolder object wd help of LayoutInflater and return convertView as paramerter of your getview here u only return image view dude

After looking around some more, I found a great example of exactly how to do this here: http://www.javacodegeeks.com/2013/08/android-custom-grid-view-example-with-image-and-text.html


Need Your Help

how to lose control from text box when clicked outside

c# textbox focus onclick

I have a textbox in a windows form. Currently the focus is on the textbox and i enter some text. Now I click outside the textbox but within the window. This action does not make the text box to los...

Cordova Multiple navigator.geolocation.getCurrentPosition()?

cordova google-maps google-maps-api-3 phonegap-plugins

I have a few GPS location request through out my HTML file embedded in other functions. I am facing a problem that, when the app is opened if the location isnt on(Or location is switched off after ...