In the previous article, we have seen How to Select an Image from Gallery in Android but most of the time when we are posting a status on whatsapp or posting a post on facebook or instagram we select more than one images. So in this article, it’s been discussed step by step how to select one or more than one image from the gallery and then we will see the total count of selected image. A sample video is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.
Step by Step Implementation
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2: Working with the AndroidManifest.xml file
For adding data to Firebase we should have to give permissions for accessing the internet. For adding these permissions navigate to the app > AndroidManifest.xml and Inside that file add the below permissions to it.
<uses-permission android:name=”android.permission.READ_EXTERNAL_STORAGE”/>
<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE”/>
<uses-permission android:name=”android.permission.INTERNET”/>
Step 3: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
XML
<?xml version="1.0" encoding="utf-8"?><LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <Button android:id="@+id/select" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:text="Select Multiple Images" /> <ImageSwitcher android:id="@+id/image" android:layout_width="200dp" android:layout_height="200dp" android:layout_marginLeft="100dp" /> <!--click here to view previous image--> <Button android:id="@+id/previous" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:text="Previous" /> <!--click here to view next image--> <Button android:id="@+id/next" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:text="Next" /> <TextView android:id="@+id/text" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="#000" android:textSize="22sp" android:textStyle="bold" /> </LinearLayout> |
Step 4: Working with the MainActivity.java file
Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.
Java
import android.content.ClipData;import android.content.Intent;import android.net.Uri;import android.os.Bundle;import android.view.View;import android.widget.Button;import android.widget.ImageSwitcher;import android.widget.ImageView;import android.widget.TextView;import android.widget.Toast;import android.widget.ViewSwitcher; import androidx.appcompat.app.AppCompatActivity; import java.util.ArrayList;import java.util.List; public class MainActivity extends AppCompatActivity { Button select, previous, next; ImageSwitcher imageView; int PICK_IMAGE_MULTIPLE = 1; String imageEncoded; TextView total; ArrayList<Uri> mArrayUri; int position = 0; List<String> imagesEncodedList; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); select = findViewById(R.id.select); total = findViewById(R.id.text); imageView = findViewById(R.id.image); previous = findViewById(R.id.previous); mArrayUri = new ArrayList<Uri>(); // showing all images in imageswitcher imageView.setFactory(new ViewSwitcher.ViewFactory() { @Override public View makeView() { ImageView imageView1 = new ImageView(getApplicationContext()); return imageView1; } }); next = findViewById(R.id.next); // click here to select next image next.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (position < mArrayUri.size() - 1) { // increase the position by 1 position++; imageView.setImageURI(mArrayUri.get(position)); } else { Toast.makeText(MainActivity.this, "Last Image Already Shown", Toast.LENGTH_SHORT).show(); } } }); // click here to view previous image previous.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (position > 0) { // decrease the position by 1 position--; imageView.setImageURI(mArrayUri.get(position)); } } }); imageView = findViewById(R.id.image); // click here to select image select.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // initialising intent Intent intent = new Intent(); // setting type to select to be image intent.setType("image/*"); // allowing multiple image to be selected intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true); intent.setAction(Intent.ACTION_GET_CONTENT); startActivityForResult(Intent.createChooser(intent, "Select Picture"), PICK_IMAGE_MULTIPLE); } }); } @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); // When an Image is picked if (requestCode == PICK_IMAGE_MULTIPLE && resultCode == RESULT_OK && null != data) { // Get the Image from data if (data.getClipData() != null) { ClipData mClipData = data.getClipData(); int cout = data.getClipData().getItemCount(); for (int i = 0; i < cout; i++) { // adding imageuri in array Uri imageurl = data.getClipData().getItemAt(i).getUri(); mArrayUri.add(imageurl); } // setting 1st selected image into image switcher imageView.setImageURI(mArrayUri.get(0)); position = 0; } else { Uri imageurl = data.getData(); mArrayUri.add(imageurl); imageView.setImageURI(mArrayUri.get(0)); position = 0; } } else { // show this if no image is selected Toast.makeText(this, "You haven't picked Image", Toast.LENGTH_LONG).show(); } }} |
