CODEWITHSUNDEEP
androidkotlinandroid-recyclerviewandroid-constraintlayout
Pheepster
Pheepster

Reputation: 6347

Recyclerview shows each item at full screen

I have a requirement to use ConstraintLayouts for all layout files. I have created a layout file as follows:

<androidx.constraintlayout.widget.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"
    android:padding="12dp">

    <ImageView
        android:id="@+id/contactThumbImage"
        android:layout_width="64dp"
        android:layout_height="64dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/someimage"
        tools:srcCompat="@drawable/someimage" />

    <TextView
        android:id="@+id/txtContactName"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textColor="@color/black"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/contactThumbImage"
        app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/txtContactEmail"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:textColor="@color/black"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/contactThumbImage"
            app:layout_constraintTop_toBottomOf="@+id/txtContactName" />

</androidx.constraintlayout.widget.ConstraintLayout>

My adapter is as follows:

class ContactsAdapter(var contacts: List<ContactEntry>): RecyclerView.Adapter<ContactsAdapter.ViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context)
                .inflate(R.layout.contacts_list_item, parent, false)

        return ViewHolder(view)
    }

    override fun getItemCount(): Int {
        return contacts.size
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val contact = contacts[position]
        holder.mName.text = "${contact.firstName} ${contact.lastName}"
        holder.mAddress.text = contact.email
    }

    class ViewHolder(view: View): RecyclerView.ViewHolder(view) {
        var contactImage: ImageView
        var mName: TextView
        var mAddress: TextView

        init{
            contactImage = view.findViewById(R.id.contactThumbImage)
            mName = view.findViewById(R.id.txtContactName)
            mAddress = view.findViewById(R.id.txtContactEmail)
        }
    }
}

And in my activity's onCreate method:

    emailContactsRecycler.layoutManager = LinearLayoutManager(this)

    ContactsManager.getContactsWithEmailAddresses(this).let { contacts ->
        if (contacts.size < 1) {
            Toast.makeText(this, "Currently you have no email contacts to list", Toast.LENGTH_SHORT).show()
        } else {
            emailContactsRecycler.adapter = ContactsAdapter(contacts)
        }
    }

I have four contacts on the test device and have verified that the ContactsAdapter is being instantiated with the correct data.

When I run the app, each item of the recycler take up the full screen giving the impression that only one item has been returned.

NOTE: when using any height attribute like wrap_content on my ConstraintLayout, the app becomes unresponsive and shows only a black screen. The only setting that does not crash the app is match_parent

I've tried different layout types without any success. Any ideas as to why this is happening?

Thanks!

Upvotes: 0

Views: 2306

Answers (4)

Sagar
Sagar

Reputation: 554

Replace layout xml with this code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:padding="12dp">

    <ImageView
        android:id="@+id/contactThumbImage"
        android:layout_width="64dp"
        android:layout_height="64dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_add"
        tools:srcCompat="@drawable/ic_add" />

    <TextView
        android:id="@+id/txtContactName"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textColor="@color/black"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/contactThumbImage"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/txtContactEmail"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textColor="@color/black"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/contactThumbImage"
        app:layout_constraintTop_toBottomOf="@+id/txtContactName" />

</androidx.constraintlayout.widget.ConstraintLayout>

Result:

enter image description here

Upvotes: 1

Android Geek
Android Geek

Reputation: 9225

Define the height attribute of item as wrap_content instead of match_parent.

As android:layout_height="match_parent" contains the height according to parent's height and android:layout_height="wrap_content" contains the height according to content of view.

I hope its work for you.

Upvotes: 1

EliodeBeirut
EliodeBeirut

Reputation: 104

<androidx.constraintlayout.widget.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:padding="12dp">

Upvotes: 0

MDikkii
MDikkii

Reputation: 283

You have defined match_parent for width and height attributes for your top parent layout (ConstraintLayout). Match parent value will take whole space of the parent, so it works as expected. You can try to use wrap_content for the height attribute.

You should also add minimum one constraint to the bottom of the parent (e.g. for ImageView layout).

Upvotes: 4

Related Questions