Create gridlayout.

Question

I need to create a layout like this: , I'm trying to do this using gridlayout, but it I cannot find the correct method. Can anyone please give me some guidance? Thanks!

Answer 1

MainActivity

GridView gridview = (GridView) findViewById(R.id.gridview);
gridview.setAdapter(new ImageAdapter(this));

activity_main.xml

<GridView xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:id=”@+id/gridview”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:columnWidth=”150dp”
android:numColumns=”auto_fit”
android:verticalSpacing=”10dp”
android:horizontalSpacing=”10dp”
android:stretchMode=”columnWidth”
android:gravity=”center”
/>

grid_item.xml

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:id=”@+id/GridItem”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:orientation=”vertical”
android:gravity=”center_horizontal”>

<ImageView
android:id=”@+id/icon_image”
android:layout_width=”200dp”
android:layout_height=”150dp” >
</ImageView>

<TextView
android:id=”@+id/icon_text”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:gravity=”center_horizontal”
android:text=”TextView”
android:textColorHighlight=”#656565″ >
</TextView>

</LinearLayout>

ImageAdapter

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class ImageAdapter extends BaseAdapter {
private Context mContext;

public ImageAdapter(Context c) {
mContext = c;
}

public int getCount() {
return mThumbIds.length;
}

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

public long getItemId(int position) {
return 0;
}

// create a new ImageView for each item referenced by the Adapter
public View getView(int position, View convertView, ViewGroup parent) {
View v;

if (convertView == null) { // if it’s not recycled, initialize some attributes
LayoutInflater li = (LayoutInflater) mContext.getSystemService( Context.LAYOUT_INFLATER_SERVICE );
v = li.inflate(R.layout.grid_item, null);
TextView tv = (TextView)v.findViewById(R.id.icon_text);
tv.setText(mTextsIds[position]);
ImageView iv = (ImageView)v.findViewById(R.id.icon_image);
//iv.setLayoutParams(new GridView.LayoutParams(85, 85));
//iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
iv.setPadding(8, 8, 8, 8);
iv.setImageResource(mThumbIds[position]);
} else {
v = (View) convertView;
}
return v;
}

// references to our images
private Integer[] mThumbIds = {
R.drawable.batman_96, R.drawable.caillou_96,
R.drawable.dennis_96, R.drawable.disney_96,
R.drawable.heman_96, R.drawable.looneytunes_96,
R.drawable.popeye_96, R.drawable.ppg_96, R.drawable.sd_96,
R.drawable.spm_96, R.drawable.superman_96,
R.drawable.tintin_96, R.drawable.tj_96, R.drawable.wp_96,
R.drawable.ww_96

};

// references to our texts
private String[] mTextsIds = {
“Batman”, “Caillou”,
“Dennis The Menace”, “Disney”,
“He-Man”, “Looney Tunes”,
“Popeye”, “Power Puff Girls”, “Scooby Doo”,
“Spiderman”, “Superman”,
“Tintin”, “Tom and Jerry”, “Winnie the Poo”, “Woody Woodpecker”
};
}

But you have to made changes according to your needs. Like size of images.

Answer 2

I guess that the most straightforward way is combining horizontal and vertical LinearLayouts, setting different weights to its subviews.

This code snippet could be a start point.-

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="100dp" >

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@color/green"
        android:layout_margin="5dp" >

    </RelativeLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical" >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_margin="5dp"
            android:background="@color/orange" >
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_margin="5dp"
            android:background="@color/green" >
        </RelativeLayout>
    </LinearLayout>
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="100dp" >

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_margin="5dp"
        android:layout_weight="0.5"
        android:background="@color/orange" >

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_margin="5dp"
        android:layout_weight="1"
        android:background="@color/black" >

    </RelativeLayout>
</LinearLayout>

Which results in a layout like this.-

PinterestListView looks promising as well.