Display a textview below a ImageView in a Gridview

Question

I try this:

main.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"
android:orientation="horizontal"
android:id="@+id/mainLayout">
<GridView
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:numColumns="2"
android:id="@+id/gridView1_bir">
</GridView>
</LinearLayout>

grid_prueba1.xml

  <?xml version="1.0" encoding="utf-8"?>

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_height="wrap_content"
android:background="#DC0000"
android:orientation="vertical"
android:layout_width="fill_parent"    
android:id="@+id/relaGrid"
 >


<ImageView
    android:id="@+id/img2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

     />

<TextView
    android:id="@+id/txt2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/img2"     

    android:text="TextView"
    android:textColor="#FFFFFF" />

 </RelativeLayout>

ImgeAdapter.java

   package es.ejemplo.gridviewprueba;

 import java.io.FileInputStream;
 import java.io.InputStream;
 import java.net.URI;
 import java.net.URL;

 import android.R.integer;
 import android.app.Activity;
 import android.content.Context;
 import android.graphics.BitmapFactory;
 import android.graphics.drawable.Drawable;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.BaseAdapter;
 import android.widget.GridView;
 import android.widget.ImageView;
 import android.widget.ListAdapter;
 import android.widget.RelativeLayout;
 import android.widget.TextView;

    public class ImageAdapter extends BaseAdapter implements ListAdapter {

private Context context;
public ImageAdapter(Context context) {
    super();
    this.context = context;
    GridViewConfig.addImageUrls();
}

@Override
public int getCount() {
    return GridViewConfig.getResim_list().size();
}

@Override
public Object getItem(int position) {

    return GridViewConfig.getResim_list().get(position);
}

@Override
public long getItemId(int position) {

    return position;
}

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

    View myView;

    if(convertView==null)
    {

        LayoutInflater li = ((Activity)context).getLayoutInflater();
        myView = li.inflate(R.layout.grid_prueba1, null);
        myView.setLayoutParams(new GridView.LayoutParams(100,100));
        myView.setPadding(5,5,5,5);


    }else{

        myView = (View)convertView;

    }

    ImageView img = (ImageView)myView.findViewById(R.id.img2);
        img.setImageDrawable(LoadImageFromURL(GridViewConfig.getResim_list().get(position)));
    TextView txt = (TextView)myView.findViewById(R.id.txt2);
    txt.setText("Adept0000"+position);

    return myView;
}


private Drawable LoadImageFromURL(String url)
{
try
{
InputStream is = (InputStream) new URL(url).getContent();

Drawable d = Drawable.createFromStream(is, "src");
return d;
}catch (Exception e) {
System.out.println(e);
return null;
}
}

   }

And GridviewConfig is a class that loads the images urls.

MyGridView.java

   package es.ejemplo.gridviewprueba;

 import android.app.Activity;
 import android.os.Bundle;
 import android.view.View;

 import android.widget.AdapterView;
 import android.widget.GridView;
 import android.widget.Toast;

public class MyGridView extends Activity {
private GridView girGridView;
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    girGridView=(GridView) findViewById(R.id.gridView1_bir);

    girGridView.setAdapter(new ImageAdapter(this));

    girGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

        @Override
        public void onItemClick(AdapterView<?> arg0, View view, int position,long arg3) {
            Toast.makeText(getApplicationContext(), GridViewConfig.getResim_list().get(position), Toast.LENGTH_SHORT).show();
        }
    });
}

}

With this code the gridview I load the images with text above. I pretend that the text is below a description or title of the picture.

I've looked at several examples of imageview and gridview with texview but I could not solve my problem. Can you help me, please?

Answer 1

I edited your grid_prueba1.xml file

So please paste this code into your grid_prueba1.xml

and see your Graphical layout may be its work fine you

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/relaGrid"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#DC0000"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/img2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/txt2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/img2"
            android:text="TextView"
            android:textColor="#FFFFFF" />

    </RelativeLayout>

Answer 2

Ok, thanks Venky. With this I have solved my problem.

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

    View myView;

    if(convertView==null)
    {

        LayoutInflater li = ((Activity)context).getLayoutInflater();
        myView = li.inflate(R.layout.grid_prueba, null);
        //myView.setLayoutParams(new GridView.LayoutParams(100,100));
        myView.setPadding(5,5,5,5);


    }else{

        myView = (View)convertView;

    }


    ImageView img = (ImageView)myView.findViewById(R.id.img1);
    //img.setImageDrawable(LoadImageFromURL(GridViewConfig.getResim_list().get(position)));
    img.setImageBitmap(getBitmapFromURL(GridViewConfig.getResim_list().get(position)));
    TextView txt = (TextView)myView.findViewById(R.id.txt1);
    txt.setText("Adept0000"+position);

    return myView;
}


public static Bitmap getBitmapFromURL(String src) {
    try {
        URL url = new URL(src);
        HttpURLConnection connection = (HttpURLConnection) url.openConnection();
        connection.setDoInput(true);
        connection.connect();
        InputStream input = connection.getInputStream();
        Bitmap myBitmap = BitmapFactory.decodeStream(input);
        Bitmap myBitmap1 = myBitmap.createScaledBitmap(myBitmap, 250, 200, true);
        return myBitmap1;
    } catch (IOException e) {
        e.printStackTrace();
        return null;
    }
}

I have to adjust the image and the text but it works. Thank you all.

Answer 3

May be your problem is "TextView is not Visible after run (in gallery style is showing TextView)"

then

In Gallery is showing Images with total screens remaing views are not visible.

So move to gallery custamization is right choice.

Scale your image 250*200(acording to your requirement) and set image to imageview.

Then remaing views are visible.

I change your code

Your gallery_style:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relaGrid"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#DC0000"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/img2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/txt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/img2"
        android:text="TextView"
        android:textColor="#FFFFFF" />

</RelativeLayout>

Your gallery Adapter getView();

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

        View myView;

        LayoutInflater li = ((Activity) context).getLayoutInflater();
        myView = li.inflate(R.layout.grid_prueba1, null);
        ImageView img = (ImageView) myView.findViewById(R.id.img2);
        TextView txt = (TextView) myView.findViewById(R.id.txt2);

        Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(),
                R.drawable.ic_launcher);
        Bitmap bitmap2 = Bitmap.createScaledBitmap(bitmap, 250, 200, true);

        img.setImageBitmap(bitmap2);

        txt.setText("Some text");

        return myView;
    }

Answer 4

Please explain your question

I think may be you want this

TextView is bottem of ImageView.

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/relaGrid"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#DC0000"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/img2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_launcher" />

        <TextView
            android:id="@+id/txt2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:textColor="#FFFFFF" />

    </LinearLayout>

If you want use RelativeLayout use this

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relaGrid"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#DC0000"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/img2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/txt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/img2"
        android:text="TextView"
        android:textColor="#FFFFFF" />

</RelativeLayout>