CODEWITHSUNDEEP
androidgridview
Jason Paddle
Jason Paddle

Reputation: 1103

GridView with image and text

I'm very new in android and need a little help with this task.

I have gridview witch pull images and text from database and display them. Currently is displayed like image and on the right of the image is text. I want to make text under the image. Can you help me with this task. This is the gridview.xml

  <LinearLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0.1" >   

    <GridView
        android:id="@+id/gridView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:horizontalSpacing="5dp"
        android:verticalSpacing="5dp"
        android:numColumns="2" >

    </GridView>             
</LinearLayout>

And this is how I display image and text in it table_column.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/bckimageviw"
>
<ImageView
    android:id="@+id/ColPhoto"
    android:layout_width="0dp"
    android:layout_height="0dp"

/>
<LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

        <TextView android:id="@+id/ColName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="25dp"
            android:text="Name"
        />
</LinearLayout>
</LinearLayout>

And if need getView() 

        public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub

        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);


        if (convertView == null) {
            convertView = inflater.inflate(R.layout.table_column, null); 
        }

        // ColPhoto
        ImageView imageView = (ImageView) convertView.findViewById(R.id.ColPhoto);
        imageView.getLayoutParams().height = 80;
        imageView.getLayoutParams().width = 80;
        imageView.setPadding(10, 10, 10, 10);
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
         try
         {
             imageView.setImageBitmap((Bitmap)MyArr.get(position).get("ImageThumBitmap"));
         } catch (Exception e) {
             // When Error
             imageView.setImageResource(android.R.drawable.ic_menu_report_image);
         }
        // ColName
        TextView txtName = (TextView) convertView.findViewById(R.id.ColName);
        txtName.setPadding(5, 0, 0, 0);
        txtName.setText("" + MyArr.get(position).get("name").toString());       

        return convertView;
    }

Upvotes: 0

Views: 133

Answers (3)

M S Gadag
M S Gadag

Reputation: 2057

u can use relative layout and set align textview to imageview.

enter image description here

try this.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#ff0000"
    android:gravity="center" >

    <ImageView
        android:id="@+id/ColPhoto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/ColName"
        android:layout_alignRight="@+id/ColName"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/ColName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ColPhoto"
        android:gravity="center"
        android:text="Name name" />

</RelativeLayout>

Upvotes: 1

sakiM
sakiM

Reputation: 4932

I don't know why add a single element LinearLayout in another LinearLayout. if grid item need to be put in correct position, I'd like use RelativeLayout instead. `

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <ImageView
        android:id="@+id/ColPhoto"
        android:layout_width="0dp"
        android:layout_height="0dp"
        />
    <TextView android:id="@+id/ColName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/ColPhoto"
        android:text="Name"
        />
</RelativeLayout>

`

Upvotes: 1

Goro
Goro

Reputation: 499

Try to change your orientation to "vertical".

EDIT:

Like, Tr4X said you don't need second LinearLayout. You can put both in one.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/bckimageviw" >
<ImageView
    android:id="@+id/ColPhoto"
    android:layout_width="0dp"
    android:layout_height="0dp"/>

<TextView 
    android:id="@+id/ColName"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Name" />
</LinearLayout>

Upvotes: 0

Related Questions