Last updated on March 13th, 2020 at 11:24 am

Please follow this updated link to share multiple images on WhatsApp:- Share multiple images on Whatsapp

In this tutorial I am going to explain to you how to share multiple images on Whatsapp or any other social website from your Android Application. This code is really helpful if you are working on e-commerce website or site related to image sharing.

 

Create Multiple Image Sharing Application Android

Step 1. Create a new project in Android Studio and open Gradle file and add these dependencies in it. We need to add this library to load images from the server. 

 compile 'com.squareup.picasso:picasso:2.3.2'
 compile 'com.android.support:cardview-v7:25.3.1'

Step 2: Now open the Manifest file and add permission in it.

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

Step 3: Create toolbar.xml layout file, and also create a style for toolbar and theme for your activity.

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/toolbar_theme">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="32dp"
                android:layout_height="match_parent"
                android:layout_alignParentLeft="true"
                android:layout_alignTop="@+id/textView"
                android:layout_gravity="center"

                android:src="@mipmap/ic_launcher"
                android:visibility="gone" />

            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_gravity="right|center"
                android:layout_toEndOf="@+id/imageView2"
                android:layout_toRightOf="@+id/imageView2"
                android:paddingTop="5dp"
                android:text="@string/app_name"
                android:textColor="#fff"
                android:textStyle="bold" />

            <ImageView
                android:id="@+id/imageView3"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:onClick="search"
                android:layout_margin="5dp"
                android:visibility="gone"
                android:layout_toLeftOf="@+id/imageView1"
                />

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:layout_margin="5dp"
                android:visibility="gone"
                android:layout_toLeftOf="@+id/imageView"
                 />

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="25dp"
                android:layout_height="25dp"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_gravity="right|center"
                android:layout_margin="5dp"
                android:onClick="CartAct"
                 />
        </RelativeLayout>
    </FrameLayout>
</android.support.v7.widget.Toolbar>

style.xml file for application style.

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

<style name="toolbar_theme" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="colorControlNormal">#fff</item>
</style>

And also call style in your activity in your MainActivity.java in the manifest file as shown below.

  <activity android:name=".MainActivity"
            android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

Step 4: Now add following code to activity_main.xml.

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

    <include layout="@layout/activity_toolbar" />
    <HorizontalScrollView
        android:layout_width="match_parent"
        android:scrollbars="none"
        android:id="@+id/horizontal"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/lay"
            android:orientation="horizontal">

        </LinearLayout>
    </HorizontalScrollView>
</LinearLayout>

Step 5: Create new layout pager_item_multi.xml and add following code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/layMain"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="5dp"
        android:padding="2dp">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <ImageView
                    android:id="@+id/img_pager_item"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_above="@+id/detail"
                    tools:src="@mipmap/ic_launcher" />

                <TextView
                    android:id="@+id/detail"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:gravity="center"
                    android:padding="5dp"
                    android:text="Trinity Tuts"
                    android:textColor="#000"
                    android:textSize="16sp"
                    android:visibility="visible" />
            </RelativeLayout>

            <TextView
                android:id="@+id/catalog"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:layout_margin="5dp"
                android:padding="5dp"
                android:text="Catalog Number"
                android:textStyle="bold"
                android:visibility="gone" />
        </FrameLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

Step 7: Now open Mainactivity.java and add following code in that file. In bellow, code first we inflate images in cardview one by one and when we click on share we share the image but note I do not download any image to share I simply take a screenshot of every card with a specific area and then share the image.

package com.sharemultipleimages;

import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.content.pm.PackageManager;
import android.graphics.Bitmap;
import android.net.Uri;
import android.os.Build;
import android.os.Bundle;
import android.os.Environment;
import android.support.v4.app.ActivityCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MenuItem;
import android.view.View;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.squareup.picasso.Picasso;

import java.io.File;
import java.io.FileOutputStream;
import java.util.ArrayList;
import java.util.Date;

public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {
    ArrayList<String> arrayList;

    HorizontalScrollView horizontal;
    ArrayList<Uri> imageUriArray = new ArrayList<Uri>();
    int aa;
    private ViewPager intro_images;
    private LinearLayout pager_indicator;

    private int dotsCount;
    private ImageView[] dots;

    private SharedPreferences sharedPreferences;
    private String uid;
    private Bitmap mbitmap;
    private LinearLayout layout;
    private View myView;
    private LinearLayout layMain;
    private int screenWidth, c;
    private int perc;
    String pName, design_no, rate, fabric;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        ImageView imageView = (ImageView) findViewById(R.id.imageView);
        imageView.setVisibility(View.VISIBLE);
        aa = 0;
        pName = getIntent().getStringExtra("name");
        design_no = getIntent().getStringExtra("design_no");
        rate = getIntent().getStringExtra("rate");
        fabric = getIntent().getStringExtra("fabric");
        horizontal = (HorizontalScrollView) findViewById(R.id.horizontal);
        imageView.setImageResource(R.drawable.tick);
        layout = (LinearLayout) findViewById(R.id.lay);
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //imageUriArray = new ArrayList<Uri>();
                toolbar.setVisibility(View.GONE);

                for (int i = 0; i < arrayList.size(); i++) {
                    Date now = new Date();
                    android.text.format.DateFormat.format("yyyy-MM-dd_hh:mm:ss", now);
                    aa = screenWidth * i;
                    horizontal.scrollTo(aa, 0);


                    try {
                        // image naming and path  to include sd card  appending name you choose for file
                        String mPath = Environment.getExternalStorageDirectory().toString() + "/" + now + i + ".jpg";

                        // create bitmap screen capture
                        View v1 = myView.getRootView();
                        v1.setDrawingCacheEnabled(true);
                        Bitmap bitmap = Bitmap.createBitmap(v1.getDrawingCache());
                        v1.setDrawingCacheEnabled(false);

                        File imageFile = new File(mPath);

                        FileOutputStream outputStream = new FileOutputStream(imageFile);
                        int quality = 100;
                        bitmap.compress(Bitmap.CompressFormat.JPEG, quality, outputStream);
                        outputStream.flush();
                        outputStream.close();
                        imageUriArray.add(Uri.fromFile(new File(String.valueOf(imageFile))));
                        //openScreenshot(imageFile);
                    } catch (Throwable e) {
                        // Several error may come out with file handling or OOM
                        e.printStackTrace();
                    }
                }
                toolbar.setVisibility(View.VISIBLE);
                Intent intent = new Intent();
                intent.setAction(Intent.ACTION_SEND);
                intent.setType("text/plain");
                intent.putParcelableArrayListExtra(Intent.EXTRA_STREAM, imageUriArray);
                intent.setType("image/jpeg");
                startActivity(intent);
            }
        });

        arrayList = new ArrayList<>();
        arrayList.add("https://trinitytuts.com/wp-content/uploads/2015/02/trinitylogo.png");
        arrayList.add("http://lh4.googleusercontent.com/-1hHevfC4VTQ/AAAAAAAAAAI/AAAAAAAAAGs/Bi_dipj31f4/photo.jpg?sz=104");

        for (int ii = 0; ii < arrayList.size(); ii++) {
            LayoutInflater inflaters = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            myView = inflaters.inflate(R.layout.pager_item_multi, null);
            layMain = (LinearLayout) myView.findViewById(R.id.layMain);
            DisplayMetrics metrics = new DisplayMetrics();
            getWindowManager().getDefaultDisplay().getMetrics(metrics);
            //int screenHeight = metrics.heightPixels;
            screenWidth = metrics.widthPixels;
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(screenWidth, LinearLayout.LayoutParams.MATCH_PARENT);
            ImageView imageViews = (ImageView) myView.findViewById(R.id.img_pager_item);
            Picasso.with(this).load(arrayList.get(ii)).placeholder(R.mipmap.ic_launcher).into(imageViews);
            layMain.setLayoutParams(layoutParams);
            layMain.setTag("" + ii);
            layout.addView(myView);
        }
    }

    private void setUiPageViewController() {

    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

That’s all. If this code helps you then please share like TrinityTuts blog and social page 🙂 .