CODEWITHSUNDEEP
android-layout
James James
James James

Reputation: 11

Android GridLayout images

I am trying to implement grid layout with image an text :

Each item have a text and an image and an action. This is how it should look:

layout grid

Upvotes: 0

Views: 3394

Answers (1)

Pranjal Sahu
Pranjal Sahu

Reputation: 1469

Use this as layout for your grid item.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
    android:id="@+id/picture"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"/>

<TextView
    android:id="@+id/picturetext"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="15dp"
    android:paddingBottom="15dp"
    android:layout_gravity="bottom"
    android:textColor="@android:color/white"
    android:background="#55000000"/>

This will give you result something like below. enter image description here

Now to get the result as required in your sample you can change the width and height of alternate elements i.e modulo 2 elements. For even index items you can have square size dimensions and for odd index items you can have rectangular items.

Set the adapter for your gridView using this code.

GridView gridView = (GridView) view.findViewById(R.id.imagegridview);
gridView.setAdapter(new ImageAdapter(getActivity()));

Use this class as the image adapter.

public class ImageAdapter extends BaseAdapter {
    private Context localContext;
    private final LayoutInflater mInflater;

    ImageAdapter(Context ct){
        this.localContext = ct;
        mInflater = LayoutInflater.from(localContext);
    }

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

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View v;
        ImageView picture;
        TextView name;

        if (convertView == null) {
            v = mInflater.inflate(R.layout.new_grid_item, parent, false);
            v.setTag(R.id.picture, v.findViewById(R.id.picture));
            v.setTag(R.id.picturetext,    v.findViewById(R.id.picturetext));
        } else
            v = convertView;

        picture = (ImageView) v.getTag(R.id.picture);
        name    = (TextView) v.getTag(R.id.picturetext);


        picture.setImageUrl(imageTweets.get(position).entities.media.get(0).mediaUrl, mImageLoader);
        name.setText(imageTweets.get(position).user.screenName);

        return v;
    }
}

In my case I am using url to load image therefore above code. In your case you can directly set the image from resources. See if it works.

Upvotes: 3

Related Questions