Image is not showing in gridlayout on design tab in android studio

Question

Hi there,i have added an image in imageview in Gridlayout but it is not showing in design view,well it is visible on actual device. my code is..

<android.support.v7.widget.GridLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="86dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="138dp"
        android:background="@drawable/board"
        app:columnCount="3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:rowCount="3">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            app:srcCompat="@drawable/red" />

    </android.support.v7.widget.GridLayout>

Desing tab screenshot

App on Actual devicestrong text

Answer 1

You cannot statically add ImageView in Gridview from xml.

Using a GridView, you need to write a Adapter (Its named BasicAdapter,ArrayAdapter,Listadapter and so on). Each Adapter have a function named "getView(View view, View parent, args)", simply Override it and return the View you want to have in your GridView.

Here is xml for GridView

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="90dp"
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center"/>

Here is the view attachment and item Click of GridView

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

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

gridview.setOnItemClickListener(new OnItemClickListener() {
    public void onItemClick(AdapterView<?> parent, View v,
            int position, long id) {
        Toast.makeText(HelloGridView.this, "" + position,
                Toast.LENGTH_SHORT).show();
    }
});

}

Here is Custom Base Adapter for adding custom views in GridView.

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 ViewGroup.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.sample_2, R.drawable.sample_3,
        R.drawable.sample_4, R.drawable.sample_5,
        R.drawable.sample_6, R.drawable.sample_7,
        R.drawable.sample_0, R.drawable.sample_1,
        R.drawable.sample_2, R.drawable.sample_3,
        R.drawable.sample_4, R.drawable.sample_5,
        R.drawable.sample_6, R.drawable.sample_7,
        R.drawable.sample_0, R.drawable.sample_1,
        R.drawable.sample_2, R.drawable.sample_3,
        R.drawable.sample_4, R.drawable.sample_5,
        R.drawable.sample_6, R.drawable.sample_7
};}

Answer 2

in your code change foloowing:

android:layout_width="0dp"
android:layout_height="0dp"

as:

android:layout_width="match_parent"
android:layout_height="wrap_content"

EDIT:

also: app:srcCompat="@drawable/red" works only for , for use android:src attribute instead;) –