How to expand layout in recycler view while clicking on it

Question

I have CardView that contain ImageView (size 100dp), TextView X3 that have a lot of text. In recycler view, while creating the item view in my onBindViewHolder I'm setting the TextView's to visibility GONE to hide them, and displaying only image view.

While I'm clicking on it, I need to set visibility of TextViews to VISIBLE, but to show the text correctly i need to expand the item view ( To make it largest ). I can do it bu setting the height and width to wrap-content, but because my grid layout has 3 item in row, so the ItemView expands only to hight.

How to make selected ItemView overlapping other items?

Please see attachments in the end of the post.

That what i have now:

My adapter:

public class LightsAdapter extends RecyclerView.Adapter<LightsAdapter.LightsViewHolder> {

    private Context context;
    private ArrayList<Light> lights;
    private OnLightImageClickListener onLightImageClickListener;
    private int selected = -1;
    private Light light;

    public LightsAdapter(Context context, ArrayList<Light> lights) {
        this.context = context;
        this.lights = lights;
    }

    public interface OnLightImageClickListener {
        void onLightImageClick(int position);
    }

    public void setOnLightImageClickListener(OnLightImageClickListener onLightImageClickListener) {
        this.onLightImageClickListener = onLightImageClickListener;
    }

    @NonNull
    @Override
    public LightsViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.lights_item, parent, false);
        return new LightsViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull LightsViewHolder holder, int position) {
        light = lights.get(position);
        holder.rootItemView.setTag(position);
        holder.TVlightTitle.setText(light.getLampTitle());
        holder.TVLightDesc.setText(light.getLampDesc());
        holder.TVLightType.setText(String.valueOf(light.getLampType()));
        Glide.with(context)
                .load(light.getLampImageUrl())
                .placeholder(R.drawable.ic_launcher_background)
                .override(200, 200)
                .into(holder.IVLightImage);
//        setBackGround(holder);
        hideLightInfo(holder);

        if (position == selected) {
            showLightInfo(holder);
        } else {
            hideLightInfo(holder);

        }
        holder.rootItemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int position = (int) view.getTag();
                selected = position;
                if (onLightImageClickListener != null) {
                    onLightImageClickListener.onLightImageClick(position);
                }
                notifyDataSetChanged();
            }
        });
    }

    @Override
    public int getItemCount() {
        return lights.size();
    }

    public class LightsViewHolder extends RecyclerView.ViewHolder {

        private TextView TVlightTitle;
        private TextView TVLightDesc;
        private TextView TVLightType;
        private ImageView IVLightImage;
        private CardView rootItemView;

        public LightsViewHolder(@NonNull View itemView) {
            super(itemView);
            TVlightTitle = itemView.findViewById(R.id.lightTitle);
            TVLightDesc = itemView.findViewById(R.id.lightDesc);
            TVLightType = itemView.findViewById(R.id.lightType);
            IVLightImage = itemView.findViewById(R.id.lightImage);
            rootItemView = itemView.findViewById(R.id.rootItemView);
        }
    }

    public void hideLightInfo(LightsViewHolder holder) {
        holder.TVlightTitle.setVisibility(View.GONE);
        holder.TVLightDesc.setVisibility(View.GONE);
        holder.TVLightType.setVisibility(View.GONE);
        holder.IVLightImage.setVisibility(View.VISIBLE);
    }

    public void showLightInfo(LightsViewHolder holder) {
        holder.TVlightTitle.setVisibility(View.VISIBLE);
        holder.TVLightDesc.setVisibility(View.VISIBLE);
        holder.TVLightType.setVisibility(View.VISIBLE);
        holder.IVLightImage.setVisibility(View.GONE);
    }

    public void setBackGround(LightsViewHolder holder) {
        if (light.getLampType() == 1) {
            holder.rootItemView.setBackgroundColor(Color.GREEN);
        } else {
            holder.rootItemView.setBackgroundColor(Color.RED);
        }
    }

My xml file:

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rootItemView"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="15dp"
    android:orientation="vertical"
    android:translationZ="2dp"
    card_view:cardCornerRadius="100dp"
    card_view:cardElevation="3dp">


    <LinearLayout
        android:padding="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/lightTitle"
            tools:text="lightTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/lightDesc"
            tools:text="lightDesc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/lightType"
            tools:text="lightType"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textStyle="bold" />

        <ImageView
            android:id="@+id/lightImage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

</androidx.cardview.widget.CardView>

In this 2 images you can see what I have now. How to make the item largest and overlapping other items while clicking?

Answer 1

The way you are using to display the content of the grid item is wrong.

You should use either thebottom sheet or can use popupwindow with an anchor view. That will look good and your content will be rendered properly.