Android GridLayout images - android-layout

Question

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

Answer 1

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.
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.