Android GridView not showing any images

Question

I have followed the example at https://developer.android.com/guide/topics/ui/layout/gridview.html and used other resources on SO to make it at least not crash given I'm using the grid view in a fragment.

I'm trying to just get a list of images to show in the grid view (for simplicity I've just put the same image twice in mThumbIds in ImageAdapter).

But when I run the app, no GridView at all is showing in the fragment. Other views in the fragment load fine, but it's like the gridview isn't even there. I'm not really sure how to debug this.

Any help is appreciated, thanks.

ImageAdapter.java:

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

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) {
        ImageView imageView;
        if (convertView == null) {
            // if it's not recycled, initialize some attributes
            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setPadding(8, 8, 8, 8);
        } else {
            imageView = (ImageView) convertView;
        }

        imageView.setImageResource(mThumbIds[position]);
        return imageView;
    }

    // references to our images
    private Integer[] mThumbIds = {
        R.drawable.placeholder, R.drawable.placeholder
    };
}

PlaceholderFragment:

public static class PlaceholderFragment extends Fragment
{

...

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        View rootView = inflater.inflate(R.layout.fragment_items, container, false);
        TextView textView = (TextView) rootView.findViewById(R.id.items_subheading);
        textView.setText(getString(R.string.section_format, getArguments().getInt(ARG_SECTION_NUMBER)));

        GridView allImages = (GridView) rootView.findViewById(R.id.items_all_images);
        allImages.setAdapter(new ImageAdapter(rootView.getContext()));

        allImages.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View v, int position, long id)
            {
                // empty
            }
        });

        return rootView;
    }

fragment_items.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.myapp.ItemsActivity$PlaceholderFragment">

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:gravity="top|left"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/items_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/placeholder"
            android:scaleType="fitStart"
            style="@style/ItemsImage" />

        <GridView
            android:id="@+id/items_all_images"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:columnWidth="20dp"
            android:numColumns="auto_fit"
            android:verticalSpacing="10dp"
            android:horizontalSpacing="10dp"
            android:gravity="center"
            android:background="#000000"
            />

    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3"
        android:orientation="vertical"
        android:background="@drawable/items_border">

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

            <!-- About 10 text views -->

        </LinearLayout>


    </LinearLayout>
</LinearLayout>

Edit

Aiming for:

Edit 2

Solution: Figured it out! Needed android:adjustViewBounds="true" on the ImageView. Without that attribute it seemed to be taking unlimited space below its position.

Answer 1

I think that you have an issue with the LinearLayout who wraps the GridView your LinearLayout is a vertical linear layout so if you use weight the height of the GridView should be 0dp and in your code the height is wrap_content and the width is 0dp so please change the height to 0dp and the width to wrap_content or match_parent

 <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:gravity="top|left"
        android:orientation="vertical">

        <GridView
            android:id="@+id/items_all_images"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:columnWidth="20dp"
            android:numColumns="auto_fit"
            android:verticalSpacing="10dp"
            android:horizontalSpacing="10dp"
            android:gravity="center"
            />

UPDATE

According to your mock i think this is what i would do:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="5dp"
    android:orientation="vertical">


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

        <TextView
            android:layout_width="wrap_content"
            android:text="text1"
            android:layout_height="wrap_content" />

        <TextView
            android:layout_width="wrap_content"
            android:text="text1"
            android:layout_height="wrap_content" />

        <TextView
            android:layout_width="wrap_content"
            android:text="text1"
            android:layout_height="wrap_content" />

        <!-- If the number of textviews is dynamic and not fixed then it's better to use ListView
             with adapter
         -->

        <!--<ListView-->
            <!--android:id="@android:id/list"-->
            <!--android:layout_width="match_parent"-->
            <!--android:layout_height="wrap_content" />-->

    </LinearLayout>


    <GridView
        android:id="@+id/items_all_images"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_green_dark"
        android:layout_marginTop="5dp"
        android:columnWidth="20dp"
        android:gravity="center"
        android:horizontalSpacing="10dp"
        android:numColumns="auto_fit"
        android:verticalSpacing="10dp" />

</LinearLayout>

Please notice if your textviews are not fixed (can be 3 or more ...) then you will need to use ListView with adapter. So each line item in the ListView will be a TextView