Part 1 – Preparations & Upload Layout

[embedyt] https://www.youtube.com/watch?v=MfCiiTEwt3g[/embedyt]

In this video series we will learn, how to upload images from our device to Firebase and then retrieve and display these images in a RecyclerView. For this we will use the Firebase storage and database as well as the Picasso library.

In part 1 we are going to set up Firebase for our project using the Firebase Assistant, add the dependencies for the RecyclerView, CardView and Picasso, add internet permission to our manifest file and prepare our MainActivity layout which will work as our upload activity.

Show less

Links & DependenciesAndroidManifest.xmlactivity_main.xml

Dependencies + instructions:

developer.android.com/topic/libraries/support-library/packages.html#v7-cardview

developer.android.com/topic/libraries/support-library/packages.html#v7-recyclerview

square.github.io/picasso/

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.codinginflow.firebaseuploadexample">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

<?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"
    android:padding="16dp"
    tools:context="com.codinginflow.firebaseuploadexample.MainActivity">

    <Button
        android:id="@+id/button_choose_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Choose file" />

    <EditText
        android:id="@+id/edit_text_file_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_toEndOf="@+id/button_choose_image"
        android:hint="Enter file name" />

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/progress_bar"
        android:layout_below="@id/edit_text_file_name"
        android:layout_marginTop="16dp" />

    <ProgressBar
        android:id="@+id/progress_bar"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button_upload"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="16dp" />

    <Button
        android:id="@+id/button_upload"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Upload" />

    <TextView
        android:id="@+id/text_view_show_uploads"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/button_upload"
        android:layout_alignTop="@+id/button_upload"
        android:layout_marginStart="25dp"
        android:layout_toEndOf="@+id/button_upload"
        android:gravity="center"
        android:text="Show Uploads"
        android:textSize="16sp" />

</RelativeLayout>