How to insert user data into firebase real-time database with Image part 3

#firebasetutorial #android #Firestorage #registration #registrationform

Welcome back again to this tutorial number three of our android firebase application so if you're just new to this video guys be sure to watch my previous video this is what you have done in the previous video and before we move to the activity uh code be sure to set the input type if it's built so

like you need to assign an input type so I have to set it to the text email address, to the file, you need to set an input type and I set its password as you can see here be sure to uh assign the respected uh type so that we are defined in our layout now let's go to let me just add one for you so because you want to

have a limits you can upload an image for our profile, we can just add images, for now, so now I'll just do this, so it will just move a little bit to the top or image and then I will just create a default image, okay I just use this one to check the image, okay now I need to assign an id profile now

once I have already done that let's move to the activity your name submit we have all these fields creating the image plus variables so you should name it we are just returning the elements from our layouts by preparing the id of those elements you can get those elements to be sure uh that you have or uh already watched my previous video if you are in case you are just new um with you guys let's go and check our dependency so be sure that you added this to a line of codes or statement we need also to

implement find the firebase database because we will get an instance for these two so now let me just initialize the firebase but uh I'll just declare constant here start it right now stream database and we will put the value for our database our be sure guys that you have already uh watched my previous video before you will uh watch this video because you might be lost just baby and now what we need to do just need to copy the link reference URL this is the URL or the link location of our database so we need to click ok now, I will initialize the database that bit instance but read it URL okay i will pass okay you can use this one or you can use this one for that child and I will just put it to the user in a let me just initialize the storage because we are going to use this one when we want to upload some file like images so now uh once we already uh initializing this variable what we are going to do now um

I will just use this one with us on how we can add and put an image when you select an image from our devices or your device so I will go here and create a method just inside and profile icon

that's it then let me just declare another picture private uh start find out in record this request good plus one okay private URI this is a unique resource identifier that we are going to use for our uh image

once we have already done that we can get back to us and then we can pass content content

you can set a type this one type image just now let's go and now okay let's try to run this one and let us see what will happen so this intent will uh get ok so some error here, I'll just create a style and I will

you can define a style and a name I'll just define the formula with this here called the radius size 50.

and I'll just assign it to the uh shape of all images and then we can choose it to make it a circle around it now once you've already done that let's go let me just try to run it into the device so we can see what this intent when we click the icon okay we should try patient guys because uh this video might get a little bit long so if you're interested to watch the tutorial uh about fire-first and you can just stick within this video guys so okay so now I will pick the device so you just hit the device as you can see it is a little bit run but when I click as you can see, this uh get the image in our android phone so this uh this is uh this the intent uh action get content doing whenever we click the image and by sitting as an image folder we can screen with the new intent to get the content inside of our phone so there is the reason

why you can access the image so now if you click this one the image is not setting an icon because we did not need to call our URI so this will not work but we can override a method on activity result and here we can uh check if and check if the request code is equal to the request code that we have defined and we can also check if the result code is equal to the result okay it does we can execute a statement or a body here you can write it will be executed so you can say image URI you can see star Uri or the uh resource identifier here to data that get data and you can set it to our profile icon to go back to the image URI you need resource within the file so now if you run this one you should assign an image to our profile icon in the image, okay so that is just waiting uh where did this

installing my phone we are going to learn how we can image information into our list so now I will try to go, emulator, i will just click and then I will choose an image for example so as you can see it is us sign or stick into the image but we cannot submit it because right ready didn't write a code to submit this one into the real-time database or to the storage uh database before uh I will just uh start the video I will just want to let you know that in order to eat it or to read and write data to our uh real-time database we need to change the value of this two key value first to also into our storage so to make a change into our uh storage repairs so we need to go to the rules uh make sure that we set it to clear otherwise

read and write stories uh real-time so that is for today's English this video guys so I hope you follow my next video be sure to follow my distance because we will be uh doing some amazing uh things in this video like you can upload an image to our database later on you will just fix that back to our application UI so guys thanks for learning something in this video please be sure to subscribe if you have uh so many bugs

In this video, we are going to learn how we can insert user data into Firebase Realtime plus we will also add a function that will allow users to upload an image to Firebase Storage, so we will have a better understanding here of how we can Integrate it to our android app. Get up to date with the latest video upload by turning on the notification bell icon from this channel.

#Root build. Gradle code:

#App build. Gradle code:

plugins {
    id 'com.android.application'
    id 'com.google.gms.google-services'
}
apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services'

android {
    compileSdkVersion 32
    buildToolsVersion '30.0.3'

defaultConfig {
        applicationId "com.naldskie.firebasedemo"
        minSdkVersion 22
        targetSdkVersion 32
        versionCode 1
        versionName "1.0"

testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

dependencies {

implementation 'androidx.appcompat:appcompat:1.4.2'
    implementation 'com.google.android.material:material:1.6.1'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
    implementation 'com.google.firebase:firebase-database:20.0.5'
    implementation 'com.google.firebase:firebase-storage:20.0.1'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.0'
    implementation 'com.squareup.picasso:picasso:2.8'
}

#Manifest.xml code:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.naldskie.firebasedemo">
    <uses-permission android:name="android.permission.INTERNET"/>

#MainActivity code:

package com.naldskie.firebasedemo;

import android.app.ProgressDialog;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.text.TextUtils;
import android.util.Log;
import android.util.Patterns;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

import androidx.appcompat.app.AppCompatActivity;

import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.OnSuccessListener;
import com.google.android.gms.tasks.Task;
import com.google.android.material.imageview.ShapeableImageView;
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 com.naldskie.firebasedemo.activities.ViewPagerActivity;
import com.naldskie.firebasedemo.model.ObjectModel;

public class MainActivity extends AppCompatActivity {
    private static final String TAG = "\t" + MainActivity.class.getSimpleName();
    private static final String DB = "https://fir-demo-8bb0b-default-rtdb.asia-southeast1.firebasedatabase.app/";
    private EditText username, email, pswd, confirmpswd;
    private ShapeableImageView profile_icon;
    private Button submitBtn, btnPrevious, btnNext;
    private FirebaseDatabase mdatabase;
    private DatabaseReference mdataref;
    private FirebaseStorage mstorage;
    private static final int REQUEST_CODE = 1;
    private Uri imageUri = null;
    private ProgressDialog dialog;

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

username = findViewById(R.id.editTextUsername);
        email = findViewById(R.id.editTextEmail);
        pswd = findViewById(R.id.editTextPswd);
        confirmpswd = findViewById(R.id.editTextTextPswdConfirm);
        btnPrevious = findViewById(R.id.btn_previous);
        btnNext = findViewById(R.id.btn_next);
        profile_icon = findViewById(R.id.user_profile_icon);
        submitBtn = findViewById(R.id.btn_submit);
        dialog = new ProgressDialog(MainActivity.this);
        mdatabase = FirebaseDatabase.getInstance(DB);
        mdataref = mdatabase.getReference().child("users/account").push();
        mstorage = FirebaseStorage.getInstance();
        selectImage();
        formSubmit();
        moveBack();
        moveNext();
    }

private void selectImage() {
        profile_icon.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
                intent.setType("image/*");
                startActivityForResult(intent, REQUEST_CODE);
            }
        });
    }

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

if (requestCode == REQUEST_CODE && resultCode == RESULT_OK) {
            imageUri = data.getData();
            profile_icon.setImageURI(imageUri);
        }
    }

private void formSubmit() {

submitBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                dialog.setTitle("uploading...");
                dialog.show();

StorageReference storageReference = mstorage.getReference().child("Image").child(imageUri.getLastPathSegment());
                storageReference.putFile(imageUri).addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {

@Override
                    public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
                        Task<Uri> downloadUrl = taskSnapshot.getStorage().getDownloadUrl().addOnCompleteListener(new OnCompleteListener<Uri>() {

@Override
                            public void onComplete(Task<Uri> task) {
                                if (task.isSuccessful()) {
                                    String t = task.getResult().toString();
                                    mdataref.child("Image").setValue(t);
                                }
                                dialog.dismiss();
                                profile_icon.setImageURI(null);
                                Log.v("Tag" + TAG, "onComplete()");
                            }
                        });
                        Intent intent = new Intent(MainActivity.this, ViewPagerActivity.class);
                        startActivity(intent);
                        finish();
                    }
                });
                validateInput();
            }
        });
    }

private void validateInput() {
        String textuser = username.getText().toString();
        String textEmail = email.getText().toString();
        String textPswd = pswd.getText().toString();
        String textConfPswd = confirmpswd.getText().toString();

if (TextUtils.isEmpty(textuser)) {
            username.setError("Username is required");
            username.requestFocus();
        } else if (TextUtils.isEmpty(textEmail)) {
            email.setError("Email is required!");
            email.requestFocus();
        } else if (!Patterns.EMAIL_ADDRESS.matcher(textEmail).matches()) {
            email.setError("please input a valid email containing '@'");
            email.requestFocus();
        } else if (TextUtils.isEmpty(textPswd)) {
            pswd.setError("password is required");
            pswd.requestFocus();
        } else if (TextUtils.isEmpty(textConfPswd)) {
            confirmpswd.setError("confirm password is required!");
            confirmpswd.requestFocus();
        } else if (!textPswd.equals(textConfPswd)) {
            confirmpswd.setError("Password don't match");
            confirmpswd.requestFocus();
        } else {
            insertData(textuser, textEmail, textPswd, textConfPswd);
            dialog.setTitle("Inserting data...");
            dialog.show();

username.setText("");
            email.setText("");
            pswd.setText("");
            confirmpswd.setText("");

}
    }

private void insertData(String textuser, String textEmail, String textPswd, String textConfPswd) {
        ObjectModel data = new ObjectModel(textuser, textEmail, textPswd, textConfPswd, null);
        mdataref.setValue(data);
    }

private void moveBack() {
        btnPrevious.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                onBackPressed();
            }
        });
    }

private void moveNext() {
        btnNext.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                startActivity(new Intent(MainActivity.this, ViewPagerActivity.class));
                finish();
            }
        });
    }
}

#Model Class Code:

package com.naldskie.firebasedemo.model;

import android.os.Parcel;
import android.os.Parcelable;

public class ObjectModel implements Parcelable {
    private String textuser, textEmail, textPswd, textConfPswd,Image;

public ObjectModel() {
        new ObjectModel(textuser, textEmail, textPswd, textConfPswd,Image);
    }

public ObjectModel(String username, String textEmail, String textPswd, String textConfPswd, String image) {
        this.textuser = username;
        this.textEmail = textEmail;
        this.textPswd = textPswd;
        this.textConfPswd = textConfPswd;
        Image = image;
    }

protected ObjectModel(Parcel in) {
        textuser = in.readString();
        textEmail = in.readString();
        textPswd = in.readString();
        textConfPswd = in.readString();
        Image = in.readString();
    }

@Override
    public void writeToParcel(Parcel dest, int flags) {
        dest.writeString(textuser);
        dest.writeString(textEmail);
        dest.writeString(textPswd);
        dest.writeString(textConfPswd);
        dest.writeString(Image);
    }

@Override
    public int describeContents() {
        return 0;
    }

public static final Creator<ObjectModel> CREATOR = new Creator<ObjectModel>() {
        @Override
        public ObjectModel createFromParcel(Parcel in) {
            return new ObjectModel(in);
        }

@Override
        public ObjectModel[] newArray(int size) {
            return new ObjectModel[size];
        }
    };

public String getTextuser() {
        return textuser;
    }

public String getTextEmail() {
        return textEmail;
    }

public String getTextPswd() {
        return textPswd;
    }

public String getImage() {
        return Image;
    }

public String getTextConfPswd() {
        return textConfPswd;
    }
}

#Pager Adapter Class Code:

package com.naldskie.firebasedemo.adapter;

import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;
import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager;
import com.google.android.material.imageview.ShapeableImageView;
import com.naldskie.firebasedemo.R;
import com.naldskie.firebasedemo.model.ObjectModel;
import com.squareup.picasso.Picasso;
import java.util.List;

public class PageAdapter extends PagerAdapter {
    private static final String TAG = "\t" + PageAdapter.class.getSimpleName();
    Context context;
    List<ObjectModel> objectModelList;
    ShapeableImageView imgprofile;
    TextView username;
    Button submitBtn;
    private LayoutInflater inflater;

public PageAdapter(Context context, List<ObjectModel> objectModelList) {
        this.context = context;
        this.objectModelList = objectModelList;
        this.inflater = LayoutInflater.from(context);
        Log.v("Tag" + TAG, "PageAdapter()");
    }

@Override
    public boolean isViewFromObject(View view, Object object) {
        Log.v("Tag" + TAG, "isViewFromObject()");
        return view.equals(object);
    }

@Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view = inflater.inflate(R.layout.viewpager_item, container, false);

imgprofile = view.findViewById(R.id.img_profile);
        username = view.findViewById(R.id.text_name);
        submitBtn = view.findViewById(R.id.btn_addtofamily);

username.setText(objectModelList.get(position).getTextuser());
        String imageUri = null;
        imageUri = objectModelList.get(position).getImage();
        Picasso.get().load(imageUri).into(imgprofile);

container.addView(view);
        Log.v("Tag" + TAG, "instantiateItem()");
        return view;
    }

@Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        ((ViewPager) container).removeView((View) object);
        Log.v("Tag" + TAG, "destroyItem()");
    }

@Override
    public int getCount() {
        Log.v("Tag" + TAG, "getCount()");
        return objectModelList.size();
    }
}

#PageViewer Activity Class Code:

package com.naldskie.firebasedemo.activities;

import android.os.Bundle;
import android.util.Log;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
import com.google.firebase.database.ChildEventListener;
import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseError;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.naldskie.firebasedemo.R;
import com.naldskie.firebasedemo.adapter.PageAdapter;
import com.naldskie.firebasedemo.model.ObjectModel;
import java.util.ArrayList;
import java.util.List;

public class ViewPagerActivity extends AppCompatActivity {
    private static final String TAG = "\t" + ViewPagerActivity.class.getSimpleName();
    private static final String DB = "https://fir-demo-8bb0b-default-rtdb.asia-southeast1.firebasedatabase.app/";
    DatabaseReference mdataref;
    FirebaseDatabase mdatabase;
    ViewPager viewPager;

PageAdapter adapter;
    List<ObjectModel> objectModelList;

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Log.v("Tag" + TAG, "onCreate()");
        setContentView(R.layout.viewpager_activity);
        mdatabase = FirebaseDatabase.getInstance(DB);
        mdataref = mdatabase.getReference().child("users/account");
        viewPager = findViewById(R.id.mview_pager);
        viewPager.setCurrentItem(1);

loadFirebaseData();
    }

private void loadFirebaseData() {
        objectModelList = new ArrayList<ObjectModel>();
        mdataref.addChildEventListener(new ChildEventListener() {

@Override
            public void onChildAdded(@NonNull DataSnapshot snapshot, @Nullable String previousChildName) {
                ObjectModel data = snapshot.getValue(ObjectModel.class);
                objectModelList.add(data);
                adapter = new PageAdapter(ViewPagerActivity.this, objectModelList);
                adapter.notifyDataSetChanged();
                viewPager.setAdapter(adapter);
            }

@Override
            public void onChildChanged(@NonNull DataSnapshot snapshot, @Nullable String previousChildName) {

}

@Override
            public void onChildRemoved(@NonNull DataSnapshot snapshot) {

}

@Override
            public void onChildMoved(@NonNull DataSnapshot snapshot, @Nullable String previousChildName) {

}

@Override
            public void onCancelled(@NonNull DatabaseError error) {

}
        });

//        viewPager.setAdapter(adapter);

Log.v("Tag" + TAG, "onLoadFirebaseData()");

}
}