summers summers - 2 months ago 43
Android Question

Spannable RecyclerView like Snapchat-Discover

Im trying to create a spannable recyclerView like the following image using the TwoWayView library: https://github.com/lucasr/twoway-view

But I'm unable to get the desired view and there are empty cells being left out.

final SpannableGridLayoutManager.LayoutParams lp = (SpannableGridLayoutManager.LayoutParams) itemView.getLayoutParams();

//final int span1 = (itemId == 0 || itemId == 3 ? 2 : 1);
//final int span2 = (itemId == 0 ? 2 : (itemId == 3 ? 3 : 1));

int span1 = 0; //h
int span2 = 0; //w

switch(itemId)
{
case 0:
span1 = 2;
span2 = 1;
break;

case 1:
span1 = 2;
span2 = 1;
break;

case 2:
span1 = 2;
span2 = 1;
break;

case 3:
span1 = 3;
span2 = 1;
break;

case 4:
span1 = 3;
span2 = 1;
break;

case 5:
span1 = 4;
span2 = 3;
break;

case 6:
span1 = 2;
span2 = 1;
break;

case 7:
span1 = 2;
span2 = 1;
break;

case 8:
span1 = 2;
span2 = 1;
break;

case 9:
span1 = 2;
span2 = 1;
break;

case 10:
span1 = 4;
span2 = 3;
break;
}

final int colSpan = span2;
final int rowSpan = span1;

if (lp.rowSpan != rowSpan || lp.colSpan != colSpan)
{
lp.rowSpan = rowSpan;
lp.colSpan = colSpan;
itemView.setLayoutParams(lp);
}


XML:

<org.lucasr.twowayview.widget.TwoWayView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="@style/TwoWayView"
app:twowayview_layoutManager="ListLayoutManager"/>


Ref:
enter image description here

Edit 1
I was able to solve this by changing the rowWidth to 12 in the XML and the following spans:

//PADDING-- left / top / right / bottom
switch(itemId%11)
{
case 0:
span1 = 4;
span2 = 7;
//holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
break;

case 1:
span1 = 4;
span2 = 7;
//holder.cont_frienddetail.setPadding(dpAsPixels2, dpAsPixels1, dpAsPixels2, dpAsPixels1);
break;

case 2:
span1 = 4;
span2 = 7;
//holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
break;

case 3:
span1 = 4;
span2 = 7;
//holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
break;

case 4:
span1 = 8;
span2 = 14;
//holder.cont_frienddetail.setPadding(dpAsPixels2, dpAsPixels1, dpAsPixels0, dpAsPixels1);
break;

case 5:
span1 = 4;
span2 = 7;
//holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
break;

case 6:
span1 = 6;
span2 = 10;
//holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels2, dpAsPixels1);
break;

case 7:
span1 = 6;
span2 = 10;
//holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
break;

case 8:
span1 = 8;
span2 = 14;
//holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels2, dpAsPixels1);
break;

case 9:
span1 = 4;
span2 = 7;
///holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
break;

case 10:
span1 = 4;
span2 = 7;
//holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
break;
}

Answer

I was able to solve this by changing the rowWidth to 12 in the XML and the following spans:

        //PADDING-- left / top / right / bottom
switch(itemId%11)
{
case 0:
    span1 = 4;
    span2 = 7;
    //holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
    break;

case 1:
    span1 = 4;
    span2 = 7;
    //holder.cont_frienddetail.setPadding(dpAsPixels2, dpAsPixels1, dpAsPixels2, dpAsPixels1);
    break;

case 2:
    span1 = 4;
    span2 = 7;
    //holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
    break;

case 3:
    span1 = 4;
    span2 = 7;
    //holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
    break;

case 4:
    span1 = 8;
    span2 = 14;
    //holder.cont_frienddetail.setPadding(dpAsPixels2, dpAsPixels1, dpAsPixels0, dpAsPixels1);
    break;

case 5:
    span1 = 4;
    span2 = 7;
    //holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
    break;

case 6:
    span1 = 6;
    span2 = 10;
    //holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels2, dpAsPixels1);
    break;

case 7:
    span1 = 6;
    span2 = 10;
    //holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
    break;

case 8:
    span1 = 8;
    span2 = 14;
    //holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels2, dpAsPixels1);
    break;

case 9:
    span1 = 4;
    span2 = 7;
    ///holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
    break;

case 10:
    span1 = 4;
    span2 = 7;
    //holder.cont_frienddetail.setPadding(dpAsPixels0, dpAsPixels1, dpAsPixels0, dpAsPixels1);
    break;
}
Comments