Chose Image From Gallery & Show in ImageView || Firebase Firestore A complete tutorial || PART 3 ||

Hey, what's up guys welcome back to the 3rd part of the series in this series we will know how we can choose an Image from our gallery also we can snap an image from the camera and set that image in ImageView.


Here is the Video Tutorial





First thing first let's add this dependency in your app level build file...

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
   

    implementation 'com.google.firebase:firebase-storage:11.8.0'
    implementation 'com.google.firebase:firebase-firestore:11.8.0'
    implementation 'com.firebaseui:firebase-ui-firestore:3.2.2'

    implementation 'com.theartofdev.edmodo:android-image-cropper:2.6.+'
    implementation 'com.github.bumptech.glide:glide:4.6.1'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.6.1'
    implementation'id.zelory:compressor:2.1.0'
}
Now create a new Activity under the Authentication folder and name it as StoreUserData.

Now open activity_main.xml and add a new button 

Now start this new activity using this new button...

I am not pasting the codes as you know how to do this or get the codes from GitHub link at the bottom.

Now open the new activity XML file and paste this UI.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:gravity="center"
    android:orientation="vertical"
    tools:context=".authentication.StoreUserData">

    <ImageView
        android:id="@+id/user_image"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:clickable="true"
        android:focusable="true"
        android:scaleType="centerCrop"
        android:src="@mipmap/ic_launcher" />

    <EditText
        android:id="@+id/user_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="25dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="25dp"
        android:hint="Enter Your Name"
        android:inputType="textPersonName"
        android:textColor="#000"
        android:textStyle="bold" />

    <EditText
        android:id="@+id/user_phone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="25dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="25dp"
        android:hint="Enter Your phone"
        android:inputType="phone"
        android:textColor="#000"
        android:textStyle="bold" />

    <EditText
        android:id="@+id/user_address"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="25dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="25dp"
        android:hint="Enter Your Name"
        android:inputType="text"
        android:textColor="#000"
        android:textStyle="bold" />

    <Button
        android:id="@+id/submit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="30dp"
        android:layout_marginTop="25dp"
        android:layout_marginEnd="30dp"
        android:backgroundTint="#21a472"
        android:text="Submit"
        android:textAllCaps="false"
        android:textColor="#fff"
        android:textStyle="bold" />
</LinearLayout>




Now open the java file and call these UI elements using ID

public class StoreUserData extends AppCompatActivity {

    private ImageView userImage;
    private EditText userName, userPhone, userAddress;
    private Button submit;
   

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

        userImage = findViewById(R.id.user_image);
        userName = findViewById(R.id.user_name);
        userPhone = findViewById(R.id.user_phone);
        userAddress = findViewById(R.id.user_address);
        submit = findViewById(R.id.submit);

      }
}

Now we need to choose the Image so when the user clicks on the ImageView we have to show chose option so set an on click listener to the ImageView and when the user clicks on that we do this...

public class StoreUserData extends AppCompatActivity {

    private ImageView userImage;
    private EditText userName, userPhone, userAddress;
    private Button submit;
    private ProgressDialog progressDialog;
    private Uri imageUri = null;
    private StorageReference storageReference;
    private FirebaseAuth firebaseAuth;
    private FirebaseFirestore firebaseFirestore;
    private String user_id;

    private Bitmap compressed;

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

        progressDialog = new ProgressDialog(this);

        userImage = findViewById(R.id.user_image);
        userName = findViewById(R.id.user_name);
        userPhone = findViewById(R.id.user_phone);
        userAddress = findViewById(R.id.user_address);
        submit = findViewById(R.id.submit);

        firebaseAuth = FirebaseAuth.getInstance();
        user_id = firebaseAuth.getCurrentUser().getUid();

        firebaseFirestore = FirebaseFirestore.getInstance();
        storageReference = FirebaseStorage.getInstance().getReference();

        userImage.setOnClickListener(new View.OnClickListener() {
                                         @Override
                                         public void onClick(View view) {
                                             if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {

                                                 if (ContextCompat.checkSelfPermission(StoreUserData.this, Manifest.permission.READ_EXTERNAL_STORAGE) != PackageManager.PERMISSION_GRANTED) {

                                                     Toast.makeText(StoreUserData.this, "Permission Denied", Toast.LENGTH_LONG).show();
                                                     ActivityCompat.requestPermissions(StoreUserData.this, new String[]{Manifest.permission.READ_EXTERNAL_STORAGE}, 1);

                                                 } else {

                                                     choseImage();

                                                 }

                                             } else {

                                                 choseImage();

                                             }

                                         }

                                     }

        );

  }
  
  private void choseImage() {
        CropImage.activity()
                .setGuidelines(CropImageView.Guidelines.ON)
                .setAspectRatio(1, 1)
                .start(StoreUserData.this);
    }

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

        if (requestCode == CropImage.CROP_IMAGE_ACTIVITY_REQUEST_CODE) {
            CropImage.ActivityResult result = CropImage.getActivityResult(data);
            if (resultCode == RESULT_OK) {

                imageUri = result.getUri();
                userImage.setImageURI(imageUri);


            } else if (resultCode == CropImage.CROP_IMAGE_ACTIVITY_RESULT_ERROR_CODE) {

                Exception error = result.getError();

            }
        }

    }
}
So we have done by choosing the Image nope we need to add one more thing So open your manifest file and add this two line of code under the Application tag... And add Two user Permission



<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.monstertechno.firestoretutorial">

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

    <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>
        <activity android:name=".authentication.LoginActivity" />
        <activity android:name=".authentication.SignupActivity" />
        <activity android:name=".authentication.StoreUserData"></activity>
        <activity
            android:name="com.theartofdev.edmodo.cropper.CropImageActivity"
            android:theme="@style/Base.Theme.AppCompat" />
    </application>

</manifest>
That's it now you can run this application and check It can now choose an image from your gallery and show that in an ImageView...



Thanks for your time... In the next part we will store this Image to Firebase Storage And show other details to firebase firestore.

Here is the Video Tutorial


Source code Available in GitHub- https://github.com/MonsterTechnoGit/Firebase-Firestore-A-complete-tutorial


You can get all the series Post using this link-> Click Here


Comments