Loading images from firebase (whole folders to RecyclerView)

Question

There is a lot of posts how to laod image from firebase but I still don't understand them. My code does nothing so please give me an example method.

I can't understand how to use the Glide or Picasso what to insert into .with .load and .into. My goal is to load everything from whole category and display it in one fragment. My firebase storage structure (I attached json):

{
"Category1": {
    "01": {
        "imageLink": "https://firebasestorage.googleapis.com/v0/b/wallex0111.appspot.com/o/photo_2018-10-19_21-38-21.jpg?alt=media&token=f1d29e64-a9ca-4c71-aba7-8144992c835e",
    },
    "02": {
        "imageLink": "https://firebasestorage.googleapis.com/v0/b/wallex0111.appspot.com/o/photo_2018-10-31_10-38-06.jpg?alt=media&token=6889a3b8-3691-41ea-9162-91558ba4181b",
    },
    "03": {
        "imageLink": "https://firebasestorage.googleapis.com/v0/b/wallex0111.appspot.com/o/photo_2018-10-06_14-19-41.jpg?alt=media&token=e75b0096-aaf5-4952-827b-7efb71d6723c",
    }
},
"Category2": {
    "01": {
        "imageLink": "https://firebasestorage.googleapis.com/v0/b/wallex0111.appspot.com/o/photo_2018-10-07_13-55-55.jpg?alt=media&token=bd37d98c-215a-4caf-bf37-d43d78736c31",
    },
    "02": {
        "imageLink": "https://firebasestorage.googleapis.com/v0/b/wallex0111.appspot.com/o/photo_2018-10-31_10-38-06.jpg?alt=media&token=6889a3b8-3691-41ea-9162-91558ba4181b",
    }
}

}

Fragment

public class AllFrtagment extends Fragment {}

xml layout

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Fragments.AllFrtagment">

    <RelativeLayout
        android:id="@+id/relLayyout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"></RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/relLayyout1"
        android:orientation="vertical"
        android:weightSum="100">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="60">

            <GridView
                android:id="@+id/gridView"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_marginTop="1dp"
                android:layout_weight="40"
                android:gravity="center"
                android:horizontalSpacing="1dp"
                android:numColumns="5"
                android:stretchMode="none"
                android:verticalSpacing="1dp"></GridView>
            <!--I think that using GridView is all I need...? Without additional ImageView-->
            <ImageView
                android:id="@+id/galleryImageView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop" />
        </RelativeLayout>
    </LinearLayout>
</RelativeLayout>

shb · Answer 1 · 2018-11-03T20:51:58.750

0

You don't need so many nested views (assuming you only want to load images). A RecyclerView is enough

<?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"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context=".Fragments.AllFrtagment">

        <RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
        />

</RelativeLayout>

Parse your json into a model class. Create a recyclerview and pass your list of imageLinks to the recyclerview adapter. and use any image library to show your images.

Lets talk Glide now.

GlideApp.with(context) //with(), takes your context
.load(imageUrl) //load(), takes your image url
.into(galleryImageView); // Your ImageView is where the image will be shown.

edited Nov 03 '18 at 20:51

answered Nov 03 '18 at 20:40

shb

5,957
2
15
32

How exactly should adapter look? What do you mean: "image library"? – mikolaj Nov 03 '18 at 20:45
I meant Glide, Picasso etc. I linked how to work with recycler view. give it a read, that will guide you (https://github.com/codepath/android_guides/wiki/Using-the-RecyclerView) – shb Nov 03 '18 at 20:47
What would be my context? In load I don't want to pass simply link because I want to add photos in firebase and then they will be updated without editing app code. So my category should be lined in some way. – mikolaj Nov 03 '18 at 20:56
inside your fragment you can use getActivity() as your context. read more on context https://stackoverflow.com/a/17873942/6207294 – shb Nov 03 '18 at 21:15

score 0 · Answer 2 · answered Nov 03 '18 at 21:00

0

Using Picasso

<android.support.v7.widget.RecyclerView
  android:id="@+id/recycler_view"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">

Picasso.get().load(city.getImage())
            .placeholder(R.drawable.ic_launcher_foreground)
            .into(holder.image);

You can find the complete sample/CityPreview app on Github

answered Nov 03 '18 at 21:00

Khaled Lela

7,831
6
45
73

This app explained me a lot but I would by really grateful if you would explain me how to load these photos from firebase. I need to build an app in which I won't have to update code for every added image. – mikolaj Nov 03 '18 at 21:22
Checkout [firebase doc](https://firebase.google.com/docs/android/setup), [**Google firebase database sample**](https://github.com/firebase/quickstart-android/tree/master/database). – Khaled Lela Nov 03 '18 at 21:35

Loading images from firebase (whole folders to RecyclerView)

2 Answers2