Custom adapter for FirebaseAdapter to a HorizontalScrollView or Carousel

Question

I have a simple RecyclerView where I show all the products from firebase but now I'd like to show them on a Carousel like this Library, the thing is that I have all on my ChooseProduct.java class and I'd like to create a custom Adapter to put the products as a Carousel.

First I get the products as follows :

FirebaseRecyclerOptions< CardPOJO > options =
            new FirebaseRecyclerOptions.Builder< CardPOJO >()
                    .setQuery(products_ref, CardPOJO.class)
                    .build();

And I store it on options, so then I create the Adapter

FirebaseRecyclerAdapter adapter = new   FirebaseRecyclerAdapter< CardPOJO, CardHolder>(options) {
        @Override
        public CardHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            //inflate the single recycler view layout(item)
            View view = LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.card_product, parent, false);
            int width = parent.getMeasuredWidth() / 2;
            width -= mContext.getResources().getDimensionPixelSize(R.dimen._8sdp);
            final CardHolder cardViewHolder = new CardHolder(view,width);
            return cardViewHolder;
        }

        @Override
        public void onDataChanged() {
            super.onDataChanged();
            tv.setVisibility(getItemCount() == 0 ? View.VISIBLE : View.GONE);
        }

        @Override
        protected void onBindViewHolder(CardHolder holder, int position, final CardPOJO model) {
            holder.state.setText(model.getState());
            holder.cardName.setText(model.getName());
            switch (model.getState()){
                case "free":
                    //Img free
                    break;
                case "not_free":
                    //Img not free
                    break;
                default:
                    break;
            }
            holder.view.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if(model.getState().equals("free")){
                       //stuff
                    }
                    else{
                       //stuff
                        }
                        root_ref.child("PurchasedProducts").child(currentuser).addValueEventListener(new ValueEventListener() {
                            @Override
                            public void onDataChange(DataSnapshot dataSnapshot) {
                                //stuff
                            }

                            @Override
                            public void onCancelled(DatabaseError databaseError) {

                            }
                        });
                    }

                }
            });


        }
    };
    adapter.startListening();
    products_recycler.setAdapter(adapter);

And my .xml has a RecyclerView like this :

<android.support.v7.widget.RecyclerView

        android:id="@+id/recycler_view_chooseCard"

        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />

So my question is, how do I change this to put a Carousel and use like the example a in.goodiebag.carouselpicker.CarouselPicker instead of a RecyclerView?

Also could I move all of this code to another one to make it clean?

Note

When I try to implement the CourouselPicker it says this :

setAdapter (android.support.v4.view.PagerAdapter) in CarouselPicker cannot be applied to (com.firebase.ui.database.FirebaseRecyclerAdapter)

What I have tried so far?

I changed the RecyclerView to

<in.goodiebag.carouselpicker.CarouselPicker
            android:id="@+id/carousel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:layout_marginTop="20dp"
            android:background="#CCC"
            app:items_visible="three" />

I initialized it : carouselPicker = (CarouselPicker) findViewById(R.id.carousel);

And then I tried to put the .setAdapter() with the FireBaseAdapter one, but they are not compatible...

carouselPicker.setAdapter(adapter);

IN CASE IT'S HARD TO DO THAT READ THIS

If that's to broad and it's too dificult to make it with ViewPager and those stuff, could be possible to create a RecyclerView that acts like carousel? You have the items horizontally and then the item on the middle you see it bigger than rest.

Answer 1

The CarouselPicker is actually a ViewPager which is kinda sad. In any case, the RecyclerView adapter and PagerAdapter are two completely different things are don't mix. You'll essentially have to go custom—there are two options.

The first is simpler and better UX in my opinion: just don't make it realtime. If you're going to display that view in a dialog that the user is only going to be briefly interacting with, it'll be confusing when the carousel updates without animations and all the goodness of the RecyclerView. It would look something like this:

query.addListenerForSingleValueEvent(new ValueEventListener() {
    @Override
    public void onDataChange(DataSnapshot snapshot) {
        List<CarouselPicker.PickerItem> items = new ArrayList<>();
        for (DataSnapshot child : snapshot.getChildren()) {
            CardPOJO card = child.getValue(CardPOJO.class);
            // Use card
            items.add(new CarouselPicker...);
        }
        mCarouselPicker.setAdapter(new CarouselPicker.CarouselViewAdapter(Activity.this, items, 0));
    }

    // ...
}

If you really want it to be realtime, you can use a FirebaseArray like so:

final ObservableSnapshotArray<CardPOJO> cards = new FirebaseArray(query, new ClassSnapshotParser<>(CardPOJO.class));
cards.addChangeEventListener(new ChangeEventListener() {
    @Override
    public void onDataChanged() {
        List<CarouselPicker.PickerItem> items = new ArrayList<>();
        for (CardPOJO card : cards) {
            // Use card
            items.add(new CarouselPicker...);
        }
        mCarouselPicker.setAdapter(new CarouselPicker.CarouselViewAdapter(Activity.this, items, 0));
    }
})

Hope this helps!