Search code examples
androidimageandroid-recyclerviewandroid-wrap-content

How I can create a RecyclerView with fixed size image that wrap contents and image is crop centered


this is my desired goal: enter image description here I want to show my Grid Items in 3 rows with recyclerview. I also have fixed image size in dp 120dpx120dp. but I want to my grid Items fill all the vertical space so that there is no blank space in recyclerView and. so I used this layout for Items:

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

    <android.support.v7.widget.CardView
        android:id="@+id/view_item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:orientation="vertical"
        app:elevation="10dp">

        <LinearLayout
            android:id="@+id/image_container"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/icon"
                android:layout_width="120dp"
                android:layout_height="120dp"
                android:scaleType="centerCrop"/>

            <ir.per.ttf.PersianTextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:ellipsize="end"
                android:singleLine="true"
                android:textSize="16sp"/>

        </LinearLayout>

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

</LinearLayout

>

but what I see is like this and the image is not cropped center!

enter image description here

but by reducing image size to 100dpx100dp my RecyclerView do not fill with Items:

enter image description here

and I can not achieve to my desired view.

this is how I use my Adapter:

 GridLayoutManager gridLayoutManager = new GridLayoutManager(context, 3,
                LinearLayoutManager.VERTICAL, false);
        gridLayoutManager.setReverseLayout(true);
        holder.horizonrtalItemRecyclerView.setLayoutManager(gridLayoutManager);
        RecyclerChambersAdapter recyclerAdapter = new RecyclerChambersAdapter(context, items.get(position),3); //pass context, Items and showing count
        holder.horizonrtalItemRecyclerView.setAdapter(recyclerAdapter);

and this is onBind view holder:

 @Override
    public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) {
        RecyclerChambersItemViewHolder holder = (RecyclerChambersItemViewHolder) viewHolder;
        try {

            holder.setmyClass(myClasses.get(position));
            holder.setTitle(myClasses.get(position).getName());
            holder.setId(myClasses.get(position).getId());
            holder.setItemImageSrc(myClasses.get(position).getPhoto().getUrl().toString());

        } catch (Exception ex) {
            holder.setItemImageSrc("");
            ex.printStackTrace();
        }

    }

Solution

  • I solved this problem by changing Grid items by set all width="match_parent":

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout 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:gravity="center">
    
        <android.support.v7.widget.CardView
            android:id="@+id/view_item"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:orientation="vertical"
            app:elevation="10dp">
    
            <LinearLayout
                android:id="@+id/image_container"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:orientation="vertical">
    
                <ImageView
                    android:id="@+id/icon"
                    android:layout_width="match_parent"
                    android:layout_height="120dp"
                    android:adjustViewBounds="true"
                    android:scaleType="centerCrop"
                    android:transitionName="@string/transition_avatar"
                    tools:ignore="ContentDescription"/>
    
                <ir.per.ttf.PersianTextView
                    android:id="@+id/title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:ellipsize="end"
                    android:singleLine="true"
                    android:textSize="16sp"
                    android:transitionName="@string/transition_title"
                    app:customTypeface="@string/primary_font"/>
    
            </LinearLayout>
    
        </android.support.v7.widget.CardView>
    
    </LinearLayout>
    

    now I achieve my view and items fill all recyclerview space and all images cropped center.