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 🙂 .