Skip to content

ParallelCodes

  • AngularJS
  • Android
    • Android-Creating Notepad
    • Android Widgets Tutorial
    • Android Send SMS Programmatically with Permissions
    • Making Phone Calls in Android
    • Android JSON Parsing
    • Upload Files from Android to PC Programmatically
    • Android Interview Ques & Ans
  • ASP.NET
  • MVC
  • Xamarin
  • C#
  • WPF
  • CSS Templates

ParallelCodes

  • AngularJS
  • Android
    • Android-Creating Notepad
    • Android Widgets Tutorial
    • Android Send SMS Programmatically with Permissions
    • Making Phone Calls in Android
    • Android JSON Parsing
    • Upload Files from Android to PC Programmatically
    • Android Interview Ques & Ans
  • ASP.NET
  • MVC
  • Xamarin
  • C#
  • WPF
  • CSS Templates

Android Firebase How to Upload and Retrieve Images

  • by ASH
  • July 14, 2019September 21, 2019
  • 1 Comment
Post Views: 2,355

Hi Developers,

In this post let’s see how we can upload and retrieve images to Firebase storage using Android studio. Before starting with this, please see the video below so as to prepare your Google Firebase project for this tutorial.

Download Source code.

We will have to-

  1. Turn ON Google Firebase Authentication and add a new user from console to login in our Android application.
  2. Turn ON Google Firebase Storage so that we can upload and retrieve images uploaded from our Android Application.
  3. Add this features to our Android Project using Firebase assistant provided in Android studio.

Okay. Let’s start creating the application.
This application will be having a simple Firebase authentication Login screen. For the first time users will have to login into the app and next time the firebase auth will check for the user and directly move to the main page, where one can upload images on Firebase and retrieve it back using the image url.

Create a new layout file with name login.xml in your res layout folder and edit it as below:

res > layout > login.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="5dp">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:text="Email:"
android:textColor="#000" />

<EditText
android:id="@+id/edtEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:hint="Email Address"
android:textColor="#000" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:text="Password:"
android:textColor="#000" />

<EditText
android:id="@+id/edtPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:hint="Password"
android:inputType="textPassword"
android:textColor="#000" />

<Button
android:id="@+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_margin="2dp"
android:background="@android:drawable/btn_default"
android:text="Login" />
</LinearLayout>

This will be our Login form.

Edit activity_main.xml file as below:

res>layout>activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:padding="5dp"
android:layout_height="match_parent"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:text="Image to Upload"
android:textColor="#000" />

<ImageView
android:id="@+id/imgSource"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_margin="2dp" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:text="Downloaded Image"
android:textColor="#000" />

<ImageView
android:id="@+id/img"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_margin="2dp" />

<LinearLayout
android:id="@+id/lv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<Button
android:id="@+id/btnPickImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:background="@android:drawable/btn_default_small"
android:text="Pick Image" />

<Button
android:id="@+id/btnUpload"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:background="@android:drawable/btn_default_small"
android:text="Upload" />
</LinearLayout>

<ProgressBar
android:id="@+id/pbbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</LinearLayout>

This will be design of this layout:

Now let’s code this Android application.

Make a new java file with name Login.java and edit it as below:

Login.java:

package com.my.firebaseimage;

import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.Task;
import com.google.firebase.auth.AuthResult;
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.auth.FirebaseUser;

public class Login extends AppCompatActivity {

private FirebaseAuth mAuth;
EditText edtEmail, edtPassword;
Button btnLogin;
FirebaseUser user;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.login);

mAuth = FirebaseAuth.getInstance();
user = mAuth.getCurrentUser();
if (user == null)
Toast.makeText(Login.this, "First time user", Toast.LENGTH_SHORT).show();
else
startActivity(new Intent(Login.this, MainActivity.class));
edtEmail = findViewById(R.id.edtEmail);
edtPassword = findViewById(R.id.edtPassword);

btnLogin = findViewById(R.id.btnLogin);

btnLogin.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mAuth.signInWithEmailAndPassword(edtEmail.getText().toString(), edtPassword.getText().toString())
.addOnCompleteListener(Login.this, new OnCompleteListener<AuthResult>() {
@Override
public void onComplete(@NonNull Task<AuthResult> task) {
if (task.isSuccessful()) {
user = mAuth.getCurrentUser();
Intent i = new Intent(Login.this, MainActivity.class);
startActivity(i);
} else {
Toast.makeText(Login.this, "Authentication failed.",
Toast.LENGTH_SHORT).show();
}
}
});
}
});

}

@Override
public void onStart() {
super.onStart();
user = mAuth.getCurrentUser();
}
}

When the application starts for the very first time, users have to login in the application. After that users will be directly directed to the activity where they can upload Images to Google Firebase.

And edit your MainActivity.java file as below:
MainActivity.java

package com.my.firebaseimage;

import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.net.Uri;
import android.os.AsyncTask;
import android.os.Bundle;
import android.os.Environment;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ProgressBar;
import android.widget.Toast;

import com.google.android.gms.tasks.Continuation;
import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.Task;
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.auth.FirebaseUser;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.google.firebase.storage.FirebaseStorage;
import com.google.firebase.storage.StorageReference;
import com.google.firebase.storage.UploadTask;

import java.io.FileNotFoundException;
import java.io.InputStream;
import java.nio.charset.MalformedInputException;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Calendar;

public class MainActivity extends AppCompatActivity {
private StorageReference mStorageRef;

Button btnPickImage, btnUpload;
ImageView imgSource, imgDestination;
LinearLayout lv;
Uri selectedImage;
ProgressBar pbbar;
DatabaseReference databaseReference, childReference;
private static final int REQUEST_TAKE_GALLERY_PHOTO = 2;
StorageReference fireRef;
private FirebaseAuth mAuth;
FirebaseUser currentUser;
String imageURL = "";

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

mAuth = FirebaseAuth.getInstance();
currentUser = mAuth.getCurrentUser();

pbbar = findViewById(R.id.pbbar);
pbbar.setVisibility(View.GONE);

lv = findViewById(R.id.lv);
mStorageRef = FirebaseStorage.getInstance().getReference();
databaseReference = FirebaseDatabase.getInstance().getReference();

btnPickImage = findViewById(R.id.btnPickImage);
btnUpload = findViewById(R.id.btnUpload);

imgSource = findViewById(R.id.imgSource);
imgDestination = findViewById(R.id.img);
btnPickImage.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (Environment.getExternalStorageState().equals(
Environment.MEDIA_MOUNTED)
&& !Environment.getExternalStorageState().equals(
Environment.MEDIA_CHECKING)) {
Intent intent = new Intent(Intent.ACTION_PICK);
intent.setType("image/*");
startActivityForResult(intent, REQUEST_TAKE_GALLERY_PHOTO);

} else
Toast.makeText(MainActivity.this, "No gallery found.", Toast.LENGTH_SHORT).show();
}
});

btnUpload.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
UploadImages();
}
});

}

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);

if (resultCode == RESULT_OK) {
if (requestCode == REQUEST_TAKE_GALLERY_PHOTO) {
Bitmap originBitmap = null;
selectedImage = data.getData();
InputStream imageStream;
try {
pbbar.setVisibility(View.VISIBLE);
imageStream = getContentResolver().openInputStream(
selectedImage);
originBitmap = BitmapFactory.decodeStream(imageStream);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
if (originBitmap != null) {
{
this.imgSource.setImageBitmap(originBitmap);
pbbar.setVisibility(View.GONE);
imgSource.setVisibility(View.VISIBLE);
}
} else
selectedImage = null;
}

}
}

public String GetDate() {
DateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
String currentdate = df.format(Calendar.getInstance().getTime());
return currentdate;
}

public void UploadImages() {
try {
pbbar.setVisibility(View.VISIBLE);
lv.setVisibility(View.GONE);

String strFileName = GetDate() + "img.jpg";

Uri file = selectedImage;

fireRef = mStorageRef.child("images/" + currentUser.getUid().toString() + "/" + strFileName);

UploadTask uploadTask = fireRef.putFile(file);
Log.e("Fire Path", fireRef.toString());
Task<Uri> urlTask = uploadTask.continueWithTask(new Continuation<UploadTask.TaskSnapshot, Task<Uri>>() {
@Override
public Task<Uri> then(@NonNull Task<UploadTask.TaskSnapshot> task) throws Exception {
if (!task.isSuccessful()) {
throw task.getException();
}
return fireRef.getDownloadUrl();
}
}).addOnCompleteListener(new OnCompleteListener<Uri>() {
@Override
public void onComplete(@NonNull Task<Uri> task) {
if (task.isSuccessful()) {
Uri downloadUri = task.getResult();
Log.e("Image URL", downloadUri.toString());

pbbar.setVisibility(View.GONE);
selectedImage = null;
imageURL = downloadUri.toString();
} else {
Toast.makeText(MainActivity.this, "Image upload unsuccessful. Please try again."
, Toast.LENGTH_LONG).show();
}
pbbar.setVisibility(View.GONE);
lv.setVisibility(View.VISIBLE);

DownloadImageFromURL downloadImageFromURL = new DownloadImageFromURL();
downloadImageFromURL.execute("");
}
});
} catch (Exception ex) {
Toast.makeText(MainActivity.this, ex.getMessage().toString(), Toast.LENGTH_LONG).show();
}
}

private class DownloadImageFromURL extends AsyncTask<String, Void, String> {
Bitmap bitmap = null;

@Override
protected void onPreExecute() {

}

protected String doInBackground(String... urls) {
try {
Log.e("imageURL is ", imageURL);
InputStream in = new java.net.URL(imageURL).openStream();
if (in != null) {
bitmap = BitmapFactory.decodeStream(in);
} else
Log.e("Empty InputStream", "InputStream is empty.");
} catch (MalformedInputException e) {
Log.e("Error URL", e.getMessage().toString());
} catch (Exception ex) {
Log.e("Input stream error", "Input stream error");
}
return "";
}

protected void onPostExecute(String result) {
if (bitmap != null) {
imgDestination.setImageBitmap(bitmap);
} else
Log.e("Empty Bitmap", "Bitmap is empty.");
}
}

}

After uploading the images to firebase storage, the async method will retrieve the image using the Image url from the uploading method.

Also add permissions to your Android Manisfest file for using Internet or Wifi and Storage:

AndroidManifest.xml:

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

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

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

<application
android:allowBackup="true"
android:icon="@drawable/login"
android:label="@string/app_name"

android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".Login"
android:screenOrientation="portrait">
<intent-filter>
<action android:name="android.intent.action.MAIN" />

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

</manifest>

This way you can Upload and Retrieve images from Google Firebase on Android.

Download Source code.

Thanks for Reading. Hope you found this post helpful. 🙂


Share this:

  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • Click to share on Telegram (Opens in new window)
  • Click to share on WhatsApp (Opens in new window)
  • Click to share on Skype (Opens in new window)
  • Click to share on Pinterest (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • Click to print (Opens in new window)
  • Click to share on Pocket (Opens in new window)
  • Click to email this to a friend (Opens in new window)

Related

Tags:ANDROIDandroid login screen designfirebasefirestoreimagesupload

1 thought on “Android Firebase How to Upload and Retrieve Images”

  1. Pingback: Download Source code 21 - ParallelCodes

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get all the latest updates for free on Facebook

Get all the latest updates for free on Facebook
 

ANDROID
  • Android – How to read Text File from Storage
  • Android Create SQLite database and Adding Data
  • Android Import Excel Sheet in SQLite Database
  • Android Import CSV file to SQLite Database
  • Android Build AAPT error: style attribute ‘attr/colorPrimary’ not found
  • Android One Time Login using SharedPreferences
  • Android Bind Expandable Listview from MS SQL Database
  • Android – How to create Expandable ListView
  • Android MS SQL Database – Create Login App
  • Android – Create Custom SnackBar with Images
  • Android Tutorial – How to use SnackBar
  • Connect Android to MS SQL Database.
  • Android Exoplayer – Play Videos from raw folder
  • Android – Load Imageview from URL in Android
  • How to create Navigation drawer in Android
  • Android How to play videos from Storage and Filepath
  • Android How to play videos using VideoView
  • Android Exoplayer – How to Play Videos Tutorial
  • How to use Android SharedPreferences – Example
  • Android Firebase How to Upload and Retrieve Images
  • How to create Android Splash Screen Animated
  • How to create Gradient Android Buttons Different Designs
  • How to bind Android Gridview from ArrayAdapter List
  • Android How to Scroll ListView Horizontally and Vertically
  • Android Google Map Add AutoComplete Place search

Neve | Powered by WordPress

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.