Fragment with list of cards

To create a fragment containing a horizontal list of cards:

• Child Fragment

  • Create a child card fragment (to be contained in the parent container fragment's ViewPager) with `BaseCardListChildFragment() as the superclass:

class ListOfCardsChildFragment : BaseCardListChildFragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? =
            inflater.inflate(R.layout.fragment_list_of_cards_child, container, false)

    /**
     * Return the Drag area that should be used for swipe gestures, return null for no drag gesture implementations
     */
    override fun getDragView(): View? = dragArea

    /**
     * Return the root view (preferably a CardView) of the fragment
     */
    override fun getRootView(): ViewGroup? = rootCard

    /**
     * Return the Drag handle resource ID to toggle visibility during transition
     */
    override fun dragHandleId(): Int = R.id.drag_handle_image
}

• Sample XML of the child fragment (refer to styles.xml for style templates):

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/MatchParentMatchParent"
    android:animateLayoutChanges="true">

    <androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/rootCard"
        style="@style/CardView.WrapHeight"
        android:layout_centerInParent="true">

        <!--Do whatever here-->

        <ImageView
            style="@style/DragHandleLight"
            android:contentDescription="@string/drag_handle" />

        <View
            android:id="@+id/dragArea"
            style="@style/DragAreaWrap" />

    </androidx.cardview.widget.CardView>

</RelativeLayout>

• Container Fragment

  • Create a container fragment (to contain the child card fragments in the ViewPager) with `BaseCardListContainerFragment() as the superclass:

class ListOfCardsContainerFragment : BaseCardListContainerFragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? =
            inflater.inflate(R.layout.fragment_list_of_cards_container, container, false)

    /**
     * Return the number of items to be inflated in the [viewPager]
     */
    override fun baseCardCount(): Int = 10

    /**
     * Return the background layout (preferably BlurLayout) for effects during transition, return null for transparent background and no effects
     */
    override fun backgroundBlurLayout(): ViewGroup? = blurLayout

    /**
     * Return the [ViewPager] which will contain the [BaseCardFragment]s
     */
    override fun viewPager(): ViewPager = cardViewPager

    /**
     * Put here what you'd put in the [getItem(position: Int)] method of the [ViewPager]
     */
    override fun baseCardToInflate(position: Int): BaseCardFragment = ListOfCardsChildFragment.newInstance(getRandomImageUrl())
}

• Sample XML of the container fragment (refer to styles.xml for style templates):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/MatchParentMatchParent">

    <io.alterac.blurkit.BlurLayout
        android:id="@+id/blurLayout"
        style="@style/BlurLayoutFullScreen" />

    <com.prembros.facilis.swiper.DeckViewPager
        android:id="@+id/cardViewPager"
        style="@style/MatchParentMatchParent"
        app:min_alpha="0.4"
        app:padding_percentage="10" />

</RelativeLayout>