CODEWITHSUNDEEP
androidandroid-recyclerviewkotlin
Erbez
Erbez

Reputation: 321

How to make Groupie recylerview 2x2 layout

I am using groupie recycler view to display 4 items. I want the layout to be a 2x2 instead of all of them under one another. This is what I have so far and the way it displays:

Module Class:

data class Module ( val Code: String,
                val Desc: String){
    constructor(): this("", "")
}

Module Fragment code snippet:

private fun updateRecyclerView(items: List<Item>) {
    fun init() {
        recycler_view_mod.apply {
            layoutManager = LinearLayoutManager([email protected])
            adapter = GroupAdapter<ViewHolder>().apply {
                moduleSection = Section(items)
                add(moduleSection)
                //setOnItemClickListener(onItemClick)
            }
        }
        shouldInitRecyclerView = false
    }
    fun updateItems() = moduleSection.update(items)
    if (shouldInitRecyclerView)
        init()
    else
        updateItems()
}

ModuleItem:

class ModuleItem (val module: Module,
              val modId: String,
              private val context: Context)
: Item(){
override fun bind(viewHolder: ViewHolder, position: Int) {
    viewHolder.textView_Code.text = module.Code
    viewHolder.textView_Description.text = module.Desc
}

override fun getLayout() = R.layout.item_module

}

Module Fragment layout: 

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".fragment.ModuleFragment">
<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view_mod"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
</FrameLayout>

ModuleItem Layout:

<android.support.v7.widget.CardView
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:id="@+id/cardView_item_module"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_margin="4dp"
android:foreground="?android:attr/selectableItemBackground"
app:cardBackgroundColor="@android:color/white"
android:clickable="true"
android:focusable="true"
app:cardCornerRadius="4dp"
app:cardElevation="4dp">
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/textView_Code"
        android:textColor="@color/colorPrimaryDark"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@id/imageView_profile_picture"
        android:layout_marginStart="10dp"
        android:layout_marginTop="5dp"
        android:textSize="25sp"
        android:textAppearance="@style/Base.TextAppearance.AppCompat"
        tools:text="Code" />
    <TextView
        android:id="@+id/textView_Description"
        android:textColor="@color/colorPrimaryDark"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignStart="@+id/textView_Code"
        android:layout_below="@+id/textView_Code"
        android:layout_marginStart="2dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:textAppearance="@style/Base.TextAppearance.AppCompat.Small"
        tools:text="Description" />
</RelativeLayout>
</android.support.v7.widget.CardView>

ScreenShot:

enter image description here

Any help would be appreciated, let me know if you need any more information

Upvotes: 1

Views: 1521

Answers (2)

Cleaven
Cleaven

Reputation: 974

So all you have to do is adjust the layoutmanager, like this:

private fun updateRecyclerView(items: List<Item>) {
fun init() {
    recycler_view_mod.apply {
        layoutManager = GridLayoutManager(context, 2, GridLayoutManager.VERTICAL, false)
        adapter = GroupAdapter<ViewHolder>().apply {
            moduleSection = Section(items)
            add(moduleSection)
            //setOnItemClickListener(onItemClick)
        }
    }
    shouldInitRecyclerView = false
}
fun updateItems() = moduleSection.update(items)
if (shouldInitRecyclerView)
    init()
else
    updateItems()
}

Upvotes: 2

Dracarys
Dracarys

Reputation: 714

You just need to use the right layout manager, it would look something to this effect, just set the span to 2

val mLayoutManager = GridLayoutManager(context, 2, GridLayoutManager.VERTICAL, false)

recyclerView.setLayoutManager(mLayoutManager)

Upvotes: 0

Related Questions