Text View is not shown in Grid View with images

Question

enter image description here 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" />

http://stackoverflow.com/questions/982386/android-simple-gridview-that-displays-text-in-the-grids — Aamirkhan, Mar 05 '14 at 08:52

score 1 · Answer 1 · edited May 23 '17 at 11:57

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

@user3094736 then there is no need to create a layout programaticalle — Raghunandan, Mar 05 '14 at 09:13
Um the user @GrlsHu has made it working, but it's shown on right side of image instead below. — user3094736, Mar 05 '14 at 09:16
@user3094736 try the edit its more efficient. http://developer.android.com/training/improving-layouts/smooth-scrolling.html — Raghunandan, Mar 05 '14 at 09:18
@user3094736 you need to set the linerlayout orientation to vertical. By default its horizontal. By the way if you inflate the layout you posted it should coz its has orientation vertical `android:orientation="vertical"` — Raghunandan, Mar 05 '14 at 09:25

GrIsHu · Accepted Answer · 2014-03-05T09:33:23.233

1

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;
}

edited Mar 05 '14 at 09:33

answered Mar 05 '14 at 08:58

GrIsHu

29,068
10
64
102

Yeah that is working, text View is shown now but it's on right side of image, how can I make it to be under image? – user3094736 Mar 05 '14 at 09:14
1

@user3094736 use `RelativeLayout`. or set orientation to vertical – Raghunandan Mar 05 '14 at 09:20
Make `linearlayout.setOrientation(LinearLayout.VERTICAL);`. @user3094736 – GrIsHu Mar 05 '14 at 09:23
Oh yea now it's working perfectly. Thanks! Thank you both to bad I can't chose 2 answers – user3094736 Mar 05 '14 at 09:28

Bhanu Sharma · Answer 3 · 2014-03-05T09:04:02.160

0

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

edited Mar 05 '14 at 09:04

answered Mar 05 '14 at 08:56

Bhanu Sharma

5,135
2
24
49

Link only answers are discouraged. Add the content of the link in your answer or post links as comments – Raghunandan Mar 05 '14 at 08:57

Text View is not shown in Grid View with images

3 Answers3