retrieving multiple images from firebase into Android

Question

Here's a link to my Firebase Storage, where I stored images: (https://console.firebase.google.com/project/nourish-plus/storage/nourish-plus.appspot.com/files/recipe1/)

So I am trying to retrieve all the images from Firebase into my Android app. So far, I was able to retrieve one image into my app using Glide, but I want to add multiple images per row with name. How do I go about doing this? And how do I add them in a listView, instead of a single image?

Here is my code for retrieving one image:

for (int i = 0; i< 2; i++)
{
    String[] pictures = {"pasta.jpg","chips.jpg"};
    storageRef = FirebaseStorage.getInstance().getReference().child("recipe1").child("pictures[i]");
}
Glide.with(RecipeActivity.this)
                        .using(new FirebaseImageLoader())
                        .load(storageRef)
                        .into(imageView);
                Collections.addAll(results);

Activity_Recipe layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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="match_parent"
tools:context="com.example.soaresbo.nourish.RecipeActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_recipe" />


</android.support.design.widget.CoordinatorLayout>

Content_recipe layout:

<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="match_parent"
    android:screenOrientation="portrait"
    android:configChanges="orientation"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.example.soaresbo.nourish.RecipeActivity"
    tools:showIn="@layout/activity_recipe">


    <TextView
        android:id="@+id/itemtext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/imageView"
        android:textSize="20sp"
        android:paddingTop="5dp"/>

    <ImageView
        android:layout_width="150dp"
        android:layout_height="98dp"
        android:id="@+id/imageView"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        tools:layout_editor_absoluteY="49dp"
        tools:layout_editor_absoluteX="158dp" />

    <ListView
       android:id="@+id/searchLV"
       android:layout_width="350dp"
       android:layout_height="511dp"
       tools:layout_editor_absoluteX="0dp"
      tools:layout_editor_absoluteY="16dp" />

</RelativeLayout>

Any help is much appreciated.

Answer 1

You want to look at some tutorials for an image gallery. Here's an interesting one that shows the new RecyclerView along with Glide : https://www.youtube.com/watch?v=OVSe6bAnjgg

RecyclerView is made for large sets of data. You might be able to get away with an ImageSwitcher based view and another gallery list view that toggles which image to be shown: http://www.androhub.com/android-imageswitcher-with-gallery/

In any event, you will probably dynamically allocate the ImageView instead of specifying one in the layout and load the image into it using glide. (See ImageAdapter getView in the second tutorial).