Images are small in GridView

Question

I'm trying to show a list of books in GridView and images are smaller than expected. I searched for this problem and found some answers on stackoverflow which tell to use imageView.setLayoutParams(new GridView.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); in my adapter, but it didn't help me no matter how I tried.

here's my problem screen

Here's my BookAdapter.java `

package com.example.android.slavabooks;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;

public class BookAdapter extends ArrayAdapter<Book> {
    public BookAdapter(@NonNull Context context, ArrayList<Book> books) {
        super(context, 0, books);
    }

    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
        View gridView = convertView;
        if (gridView == null) {
            gridView = LayoutInflater.from(getContext()).inflate(R.layout.one_book, parent, false);
        }


        Book currentBook = getItem(position);

        TextView title = (TextView) gridView.findViewById(R.id.title_text_view);
        TextView author = (TextView) gridView.findViewById(R.id.author_text_view);

        ImageView imageView = (ImageView) gridView.findViewById(R.id.book_image);
        imageView.setImageDrawable(currentBook.getBookImage());

        title.setText(currentBook.getTitle());
        author.setText(currentBook.getAuthor());

        return gridView;
    }

}`

Here's my activity_search_results.xml with a GridView

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SearchResults">
    <GridView
        android:divider="@null"
        android:dividerHeight="10dp"
        android:padding="10dp"
        android:id="@+id/grid_view"
        android:numColumns="2"
        android:verticalSpacing="10dp"
        android:horizontalSpacing="10dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <ProgressBar
        android:id="@+id/progress_bar"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

one_book.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:padding="12sp"
    android:layout_margin="5dp"
    android:minHeight="200dp"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/book_image"
        android:src="@drawable/book"
        android:layout_centerHorizontal="true"
        android:adjustViewBounds="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/title_text_view"
        android:fontFamily="sans-serif-medium"
        android:maxLines="1"
        tools:text="Title"
        android:gravity="center"
        android:textSize="15sp"
        android:layout_below="@id/book_image"
        android:layout_centerHorizontal="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/author_text_view"
        android:maxLines="1"
        android:gravity="center"
        tools:text="Author"
        android:textSize="10sp"
        android:layout_below="@id/title_text_view"
        android:layout_width="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_height="wrap_content" />

</RelativeLayout>

Answer 1

Solution:

You can use ConstraintLayout and scaleType for this. The entire one_book.xml is shown below:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:minHeight="200dp"
    android:padding="12sp">

    <ImageView
        android:id="@+id/book_image"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:src="@drawable/book"
        android:scaleType="fitCenter"
        app:layout_constraintBottom_toTopOf="@+id/title_text_view"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/title_text_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/book_image"
        android:layout_centerHorizontal="true"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:fontFamily="sans-serif-medium"
        android:gravity="center"
        android:maxLines="1"
        android:textSize="15sp"
        app:layout_constraintBottom_toTopOf="@+id/author_text_view"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/book_image"
        tools:text="Title" />

    <TextView
        android:id="@+id/author_text_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/title_text_view"
        android:layout_centerHorizontal="true"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:gravity="center"
        android:maxLines="1"
        android:textSize="10sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/title_text_view"
        tools:text="Author" />

</android.support.constraint.ConstraintLayout>

Hope this helps. Please Comment if any issues.

Answer 2

If you give the value "wrap_content" to width and height it will take the minimum required space. in your case you have given

 android:minHeight="200dp"

to gridView item. So try changing the values of width and height of the ImageView you are using inside one_book.xml like :-

 android:layout_width="80dp" 
 android:layout_height="100dp" 

to fit it according to the your gridView item.

Also remember that images will get blurred if you increase ImageView size larger than size of images you are putting inside them so try to resize images after fixing the ImageView size.

Answer 3

You have set width and height to "wrap_content" value. It means that images assuming their smallest possible size. Change in your layout resource the tag with height and width to "match_parent" instead.

In the one_book.xml:

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

    <ImageView
        android:id="@+id/book_image"
        android:src="@drawable/book"
        ...
        android:layout_width="match_parent" 
        android:layout_height="match_parent" /> <!-- THESE width and height -->
...
</RelativeLayout>