Infinite Scrolling Horizontal ScrollView

Question

I'm developing my first app for a school project. I've never got java lessons so I am learning all the fundamentals of creating an android app all by myself. Currently, my app is integrated with Firebase Realtime database, and I have in my Home_Fragment, a HorizontalScrollView with a FrameLayout inside it and, inside that FrameLayout I have three ImageViews. It is something like this: Click here to see it, please. I hope you can understand what I did. Those ImageViews hold some images that are stored in my Firebase Realtime database. This is my XML starting of that HorizontalScrollView:

<HorizontalScrollView
    android:id="@+id/scrlVPrincipal2"
    android:layout_width="545dp"
    android:layout_height="414dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentStart="true"
    android:layout_marginTop="32dp"
    android:scrollbars="none"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/txtHomeDesc"
    app:layout_constraintVertical_bias="0.42"
    tools:ignore="MissingConstraints"
    tools:layout_editor_absoluteX="0dp">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:paddingRight="1000dp">


        <RelativeLayout
            android:layout_width="1066dp"
            android:layout_height="match_parent">


            <ImageView
                android:id="@+id/imgCard1"
                android:layout_width="259dp"
                android:layout_height="390dp"
                android:layout_alignParentStart="true"
                android:layout_centerVertical="true"
                android:layout_marginStart="13dp"
                android:layout_weight="1"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.504"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.801" />

            <ImageView
                android:id="@+id/imgCard3"
                android:layout_width="259dp"
                android:layout_height="390dp"
                android:layout_alignParentEnd="true"
                android:layout_centerVertical="true"
                android:layout_marginEnd="221dp"
                android:layout_weight="1"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.504"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.801" />

            <TextView
                android:id="@+id/txtPaisNome"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentStart="true"
                android:layout_gravity="bottom"
                android:layout_marginBottom="25dp"
                android:layout_marginStart="27dp"
                android:text="TextView"
                android:textAlignment="center"
                android:textColor="@color/colorWhite"
                android:textSize="25dp" />

            <ImageView
                android:id="@+id/imgCard2"
                android:layout_width="259dp"
                android:layout_height="390dp"
                android:layout_alignParentStart="true"
                android:layout_centerVertical="true"
                android:layout_gravity="right"
                android:layout_marginStart="298dp"
                android:layout_weight="1"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.504"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.801" />

        </RelativeLayout>
    </FrameLayout>

</HorizontalScrollView>

and this is the code I use to get the images from the Database (and the respective name of the country):

mDatabase = FirebaseDatabase.getInstance().getReference();
    DatabaseReference countriesRef = mDatabase.child("paises");
    ValueEventListener valueEventListener = new ValueEventListener() {
        @Override
        public void onDataChange(DataSnapshot dataSnapshot) {
            List<String> urlList = new ArrayList<>();
            List<String> nomePaisList = new ArrayList<>();

            for(DataSnapshot ds : dataSnapshot.getChildren()) {
                String url = ds.child("Imagem").getValue(String.class);
                String nomePais = ds.child("Nome").getValue(String.class);
                urlList.add(url);
                nomePaisList.add(nomePais);
            }

            int urlCount = urlList.size();
            int randomNumber = new Random().nextInt(urlCount);
            List<String> randomUrlList = new ArrayList<>();
            List<String> randomNomePaisList = new ArrayList<>();
           for (int i=0; i<=Constants.TOTAL_PAISES; i++) {
                randomUrlList.add(urlList.get(randomNumber));
                randomNomePaisList.add(nomePaisList.get(randomNumber));
                Picasso.with(getContext()).load(randomUrlList.get(i)).into(imgCard1); // Inserir na ImageView a imagem do respetivo país
                txtPaisNome.setText(randomNomePaisList.get(i)); // Inserir na TextView o nome do respetivo país
            }
        }

        @Override
        public void onCancelled(DatabaseError databaseError) {}
    };
    countriesRef.addListenerForSingleValueEvent(valueEventListener);

With all that said, what I wanted to ask is:
How can I make the scroll of those ImageViews infinite? Everytime the user swipes, the ImageView that isn't showing gets a new image and that gives the effect of ImageViews?

Answer 1

I'm actually thinking that what you are trying to do is impossible. But if you are ready to try something new, I suggest you RecyclerView and when last element in RecyclerView is reached, retrieve data from database, add into RecyclerView's data list.

Answer 2

You can do this using recycle view rather than scroll view.

Use recycle view horizontally and add scroll listeners.

Then load the image from the server and display it.

recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
    super.onScrolled(recyclerView, dx, dy);
    totalItemCount = llm.getItemCount();
    lastVisibleItem = llm.findLastVisibleItemPosition();
    if (!isLoading && totalItemCount <= (lastVisibleItem + visibleThreshold)) {
        isLoading = true;
        myList.add(new myObject(TYPE_BOTTOM_LOADING));
        recyclerView.post(new Runnable() {
            @Override
            public void run() {
                mAdapter.notifyItemInserted(myList.size() - 1);
            }
        });
        startIndex += INDEX_INTERVAL;
        endIndex += INDEX_INTERVAL;
        getMyList(startIndex, endIndex);
    }
}});

Please refer to here :) http://www.devexchanges.info/2017/02/android-recyclerview-dynamically-load.html