1

So im building and app for school abour series and movies and Im using recyclerview, but each card ocuppies the full with of the screen and then scrolls right and left: enter image description here

i've search all over internet and no idea how to get it to work like: enter image description here

My recycler_view.xml is the following:

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

    <ImageView
        android:id="@+id/item_image"
        android:layout_width="250dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:layout_marginTop="8dp"
        android:layout_weight="3"
        android:adjustViewBounds="false"
        android:maxHeight="100dp"
        android:maxWidth="250dp"
        android:minHeight="100dp"
        android:minWidth="250dp" />
    <TextView
        android:id="@+id/item_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_gravity="top|start"
        android:layout_weight="1"
        android:text="Some date"/>
    <TextView
        android:id="@+id/item_description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center|start"
        android:layout_weight="1"
        android:ellipsize="end"
        android:maxLines="5"/>
</LinearLayout>

and my main layout:

<?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="match_parent"
    tools:context="com.example.juanfri.pruebareclyclerview.MainActivity">


    <TextView
        android:id="@+id/textViewPeliculas"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Peliculas"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginStart="16dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="32dp"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginEnd="8dp"
        app:layout_constraintHorizontal_bias="0.064" />

    <TextView
        android:id="@+id/textViewSeries"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="32dp"
        android:text="Series"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/recyclerViewPeliculas" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerViewPeliculas"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:scrollbars="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textViewPeliculas"
        />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerViewSeries"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:scrollbars="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textViewSeries" />


</android.support.constraint.ConstraintLayout>

and this my recycler adapter I might have to change it here but no idea:

package com.example.juanfri.pruebareclyclerview;

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import com.squareup.picasso.Picasso;

import java.util.ArrayList;

/**
 * Created by Juanfri on 28/05/2017.
 */

public class RecyclerAdapterPelicula extends RecyclerView.Adapter<RecyclerAdapterPelicula.PeliHolder> {
    private ArrayList<Pelicula> mPeliculas;
    @Override
    public RecyclerAdapterPelicula.PeliHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View inflatedView = LayoutInflater.from(viewGroup.getContext())
                .inflate(R.layout.recyclerview_card, viewGroup, false);
        return new PeliHolder(inflatedView);
    }

    @Override
    public void onBindViewHolder(RecyclerAdapterPelicula.PeliHolder holder, int i) {
        Pelicula itemPhoto = mPeliculas.get(i);
        holder.bindPhoto(itemPhoto);
    }

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

    public RecyclerAdapterPelicula(ArrayList<Pelicula> Peliculas) {
        mPeliculas = Peliculas;
    }
    public static class PeliHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        //2
        private ImageView mItemImage;
        private TextView mItemDate;
        private TextView mItemDescription;
        private Pelicula peli;

        //3
        private static final String PHOTO_KEY = "PHOTO";

        //4
        public PeliHolder(View v) {
            super(v);

            mItemImage = (ImageView) v.findViewById(R.id.item_image);
            mItemDate = (TextView) v.findViewById(R.id.item_date);
            mItemDescription = (TextView) v.findViewById(R.id.item_description);
            v.setOnClickListener(this);
        }

        //5
        @Override
        public void onClick(View v) {
            /*Context context = itemView.getContext();
            Intent showPhotoIntent = new Intent(context, Pelicula.class);
            showPhotoIntent.putExtra(PHOTO_KEY, peli);
            context.startActivity(showPhotoIntent);*/
        }
        public void bindPhoto(Pelicula mpeli) {
            peli = mpeli;
            Picasso.with(mItemImage.getContext()).load(mpeli.getPoster()).into(mItemImage);
            mItemDate.setText(peli.getNombrePelicula());
            mItemDescription.setText(Integer.toString(peli.getDuracion()));
        }
    }
}

I really don't need a solution just a clue on how to move forward -.-"

Thanks for you help!

Juanfri Lira
  • 423
  • 3
  • 7
  • 17

3 Answers3

3

1. Use root LinearLayout width as wrap_content or 250dp.

2. Remove attribute layout_weight from ImageView and TextView's.

3. Use attribute android:layout_width="match_parent" and android:gravity="center" to TextView to keep text position at center.

4. Remove unnecessary max-min height/width from ImageView.

Here is the working code:

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

    <ImageView
        android:id="@+id/item_image"
        android:layout_width="250dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:layout_marginTop="8dp"
        android:adjustViewBounds="false"
        android:scaleType="centerCrop"
        android:src="@drawable/dummy"/>

    <TextView
        android:id="@+id/item_date"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:gravity="center"
        android:ellipsize="end"
        android:maxLines="1"
        android:textSize="16dp"
        android:textColor="#000000"
        android:text="Big Bang Theory"/>

    <TextView
        android:id="@+id/item_description"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:ellipsize="end"
        android:maxLines="5"
        android:textSize="14dp"
        android:textColor="#727272"
        android:text="2154"/>
</LinearLayout>

OUTPUT:

enter image description here

Hope this will help~

Ferdous Ahamed
  • 21,438
  • 5
  • 52
  • 61
1

you have to set gravity for textView the same for imageView and i would suggest this behaviors for your layout :

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:maxWidth="250dp">

    <ImageView
        android:id="@+id/item_image"
        android:layout_width="250dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:layout_marginTop="8dp"
        android:layout_weight="3"
        android:adjustViewBounds="false"
        android:maxHeight="100dp"
        android:maxWidth="250dp"
        android:minHeight="100dp"
        android:minWidth="250dp" />
    <TextView
        android:id="@+id/item_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:text="Some date"
        android:layout_below="@id/item_image"/>
    <TextView
        android:id="@+id/item_description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:ellipsize="end"
        android:maxLines="5"
        android:layout_below="@id/item_date"/>
</RelativeLayout>
0

Try this code

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

    <ImageView
        android:id="@+id/item_image"
        android:layout_width="250dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:layout_marginTop="8dp"
        android:layout_weight="3"
        android:adjustViewBounds="false"
        android:maxHeight="100dp"
        android:maxWidth="250dp"
        android:minHeight="100dp"
        android:minWidth="250dp" />
    <TextView
        android:id="@+id/item_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_gravity="top|start"
        android:layout_weight="1"
        android:text="Some date"/>
    <TextView
        android:id="@+id/item_description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center|start"
        android:layout_weight="1"
        android:ellipsize="end"
        android:maxLines="5"/>
</LinearLayout>
Ekrem
  • 395
  • 3
  • 12