Fetch multiple data from firebase in show in different blocks

Question

I am trying to get a layout like this.

Data is stored in firebase, like

 pic [
{     college name: x
      pic_url: https://x
}
{    college name:y
    pic_url : http:// y
}
{
    college name: z
    pic_url: http:// z
}
]

I want to load all pictures of college name x in first block under header X, pictures of college name y in second block under header X and so on.

I can store the data in different arrays and using multiple layoutmanager/layout adapter I can show the data. But that makes it slower. What are the ways to achieve it? and since picture heading text(heading 1. heading 2 etc) is fixed in a text view (not getting it from firebase), so when i load the fragment, it only shows all the text views in a row, until the data from firebase is loaded which takes around 3/4 seconds.

What are the ways I can achieve this?

edit: Fragment class

public class DashboardFragment extends Fragment {
View v;
ViewPager viewPager;
TabLayout tabLayout;

ValueEventListener mFragmentListener;
ValueEventListener mFragmentListener2;

ArrayList<firebasestore> list;
ArrayList<firebasestore> list2;

DatabaseReference mdatabaseRef;

GridLayoutManager gridLayoutManager;
GridLayoutManager gridLayoutManager2;


private firebaseAdapter firebaseAdapter1;
private firebaseAdapter firebaseAdapter2;


public DashboardFragment() {
    // Required empty public constructor
}

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    mdatabaseRef = FirebaseDatabase.getInstance().getReference();
    mdatabaseRef.keepSynced(true);

    list = new ArrayList<>();
    list2 = new ArrayList<>();


    loadDetails();
    loadDetails2();

}

@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

    v = inflater.inflate(R.layout.fragment_dashboard, container, false);
    viewPager = v.findViewById(R.id.viewPa);

    ownPagerAdapter own = new ownPagerAdapter(getActivity());
    viewPager.setAdapter(own);
    tabLayout = v.findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager, true);

    Timer timer = new Timer();
    timer.scheduleAtFixedRate(new MyTimer(), 5000, 6000);

    int mNoOfColumns = Utility.calculateNoOfColumns(getContext());
    gridLayoutManager = new GridLayoutManager(getContext(), mNoOfColumns);
    gridLayoutManager2 = new GridLayoutManager(getContext(), mNoOfColumns);

    RecyclerView firebaseRecyclerView = (RecyclerView) v.findViewById(R.id.recyclerview_threeFragment1);
    RecyclerView firebaseRecyclerView2 = (RecyclerView) v.findViewById(R.id.recyclerview_threeFragment2);

    firebaseRecyclerView.setHasFixedSize(true);

    firebaseAdapter1 = new firebaseAdapter(getContext(), list);
    firebaseAdapter2 = new firebaseAdapter(getContext(), list2);

    firebaseRecyclerView.setLayoutManager(gridLayoutManager);
    firebaseRecyclerView2.setLayoutManager(gridLayoutManager2);

    firebaseRecyclerView.setAdapter(firebaseAdapter1);
    firebaseRecyclerView2.setAdapter(firebaseAdapter2);

    firebaseRecyclerView.getItemAnimator().setChangeDuration(0);
    firebaseRecyclerView2.getItemAnimator().setChangeDuration(0);

    firebaseRecyclerView.setNestedScrollingEnabled(false);
    firebaseRecyclerView2.setNestedScrollingEnabled(false);

    return v;
}

// get data from firebase DB
private void loadDetails() {
    Query mQuery = mdatabaseRef.orderByChild("uni").equalTo("x");
    ValueEventListener valueEventListener = new ValueEventListener() {
        @Override
        public void onDataChange(DataSnapshot dataSnapshot) {
            list.clear();  // CLAER DATA BEFORE CHANGING. IF NOT DONE, IT WILL SHOW DUPLICATE DATA
            for (DataSnapshot ds : dataSnapshot.getChildren()) {
                list.add(ds.getValue(firebasestore.class));
            }
            firebaseAdapter1.notifyDataSetChanged();    // NOTIFY ADAPTER TO SHOW DATA IN VIEW WITHOUT RELOAD
        }
        @Override
        public void onCancelled(DatabaseError databaseError) {
            Log.w("LogFragment", "loadLog:onCancelled", databaseError.toException());
        }
    };

    mFragmentListener = mQuery.limitToLast(25).addValueEventListener(valueEventListener);
}



private void loadDetails2() {
    Query mQuery = mdatabaseRef.orderByChild("uni").equalTo("y");
    ValueEventListener valueEventListener2 = new ValueEventListener() {
        @Override
        public void onDataChange(DataSnapshot dataSnapshot) {
            list2.clear();  // CLAER DATA BEFORE CHANGING. IF NOT DONE, IT WILL SHOW DUPLICATE DATA
            for (DataSnapshot ds : dataSnapshot.getChildren()) {
                list2.add(ds.getValue(firebasestore.class));
            }
            firebaseAdapter2.notifyDataSetChanged();    // NOTIFY ADAPTER TO SHOW DATA IN VIEW WITHOUT RELOAD
        }
        @Override
        public void onCancelled(DatabaseError databaseError) {
            Log.w("LogFragment", "loadLog:onCancelled", databaseError.toException());
        }
    };
    mFragmentListener2 = mQuery.limitToLast(25).addValueEventListener(valueEventListener2);
}

    @Override
    public void onDestroyView () {
        super.onDestroyView();
    }

    class MyTimer extends TimerTask {

        @Override
        public void run() {
            if (getActivity() != null)
                getActivity().runOnUiThread(new Runnable() {

                    @Override
                    public void run() {

                        if (viewPager.getCurrentItem() == 0) {
                            viewPager.setCurrentItem(1);
                        } else if (viewPager.getCurrentItem() == 1) {
                            viewPager.setCurrentItem(2);
                        } else if (viewPager.getCurrentItem() == 2) {
                            viewPager.setCurrentItem(0);
                        }
                    }
                });
        }
    }
}

XML of that fragment

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/appbar">

<RelativeLayout 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"
    tools:contextOffers=".Activity.MainActivity">
    <RelativeLayout
        android:id="@+id/image_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.v4.view.ViewPager
            android:id="@+id/viewPa"
            android:layout_width="match_parent"
            android:layout_height="200dp"

            android:overScrollMode="never" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/viewPa"
            android:layout_marginTop="-40dp"
            app:tabBackground="@drawable/selector_tab"
            app:tabGravity="center"
            app:tabIndicatorHeight="0dp" />
    </RelativeLayout>
 <!--       uni 1      -->
    <android.support.v7.widget.CardView
        android:id="@+id/cardview1"
        android:layout_width="match_parent"
        android:layout_height="35dp"
        app:cardCornerRadius="2dp"
        android:clickable="false"
        android:importantForAutofill="auto"
        android:layout_below="@+id/image_layout"
        android:layout_marginLeft="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginTop="-10dp"
        android:padding="15dp">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/title 1"
                android:textSize="15sp"
                android:textColor="#ffffff"
                android:textStyle="bold"
                android:layout_marginTop="5dp"
                android:padding="5dp"
                android:layout_centerInParent="true"/>
        </RelativeLayout>
    </android.support.v7.widget.CardView>
        <RelativeLayout
            android:id="@+id/linear"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/cardview1"
            android:orientation="vertical">
            <android.support.v7.widget.RecyclerView
                android:id="@+id/recyclerview_threeFragment1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="10dp"
                android:background="#ffffff">
            </android.support.v7.widget.RecyclerView>
        </RelativeLayout>
    <!--       block 2      -->
    <android.support.v7.widget.CardView
        android:id="@+id/cardview2"
        android:layout_width="match_parent"
        android:layout_height="35dp"
        app:cardCornerRadius="2dp"
        android:clickable="false"
        android:layout_below="@+id/linear"
        android:layout_marginLeft="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginTop="0dp"
        android:padding="15dp">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="title 2"
                android:textSize="15sp"
                android:textColor="#ffffff"
                android:textStyle="bold"
                android:layout_marginTop="5dp"
                android:padding="5dp"
                android:layout_centerInParent="true"/>
        </RelativeLayout>
    </android.support.v7.widget.CardView>
    <RelativeLayout
        android:id="@+id/linear2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/cardview2"
        android:orientation="vertical">
        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerview_threeFragment2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="10dp"
            android:background="#ffffff">
        </android.support.v7.widget.RecyclerView>
    </RelativeLayout>
</RelativeLayout>
</ScrollView>

Answer 1

What you are looking for is how your adapter will show the data since the data is stored at one place; when you get it and place it inside your List, you will need different ViewTypes.

You can check this question on how to implement it.

Basically, you retrieve the data from Firebase and store it inside your list, now your list will have data like this

college_name = "x", college_name = "y", college_name = "y",college_name = "x"

Then in your onCreateViewHolder you will have different inflated views (if needed, or it can be the same one) and in your onBindViewHolder you're going to switch between x and y data that populates your RecyclerView.

The ViewTypes define what it should display (x or y).