In this tutorial we will learn to show an image in fullscreen mode with one click in android popupwindow from any activity or fragment.
In this example we will see a contact profile where when we click on user’s profile it should show in fullscreen mode with zoom enabled. We will directly implement the code for OnClick() of small thumbnail imageview to be shown in fullscreen.
Sample Usage demo:
new PhotoFullPopupWindow(context, R.layout.popup_photo_full, yourImageView, URL, null);
Where parameters in the above method are as follows:
1) context -> context of your activity, fragment, application etc..
2) R.layout.popup_photo_full -> this will be created below in this tutorial.
3) yourImageView-> simply pass your thumbnail imageview
4) URL-> Url of full resolution image.
5) null -> Its the bitmap to be shown in fullscreen, its optional. If you provide the bitmap, then URL will be ignored! and bitmap will be loaded in fullscreen.
Call the above code in onClick Listener of your imageView to be Shown in full screen as shown below:
yourImageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// Code to show image in full screen:
new PhotoFullPopupWindow(context, R.layout.popup_photo_full, view, URL, null);
}
});
Steps to achieve this:
1) We will create a popup windows with custom layout for showing image in full screen.
2) An android library for loading images from local Uri or web URL into imageview called Glide.
3) Android Image Zooming library called PhotoView for zoom effect on gesture like pinch to zoom, swipe , double tap etc.
4) Android Palette Library for picking colour from image.
Setting Up Libraries
Add the following dependencies to your app level build.gradle file:
dependencies {
compile 'com.github.chrisbanes:PhotoView:2.1.3'
compile 'com.github.bumptech.glide:glide:4.2.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.2.0'
compile 'com.android.support:palette-v7:26.1.0'
}
Now sync your project.
In order to use Glide Library in single line we need to create a standard java class required by Glide. Simply create a new java class in root package of your project. For example: if your app package name is com.store.yourapp then create the following class inside the package com.store.yourapp with name MyAppGlideModule.java
import com.bumptech.glide.annotation.GlideModule;
import com.bumptech.glide.module.AppGlideModule;
@GlideModule
public final class MyAppGlideModule extends AppGlideModule {
}
Now rebuild your project in Android Studio from Build->Rebuild Project.
After building your project only you will be able to access GlideApp.
We have finished setting up libraries.
Start Coding..
Create the layout file for popupWindow called popup_photo_full.xml in your res/layout directory with following code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/rl_custom_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:background="@android:color/black">
<com.github.chrisbanes.photoview.PhotoView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageButton
android:id="@+id/ib_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="@null"
android:elevation="5dp"
android:padding="3dp"
android:src="@android:drawable/ic_menu_close_clear_cancel"
app:srcCompat="@android:drawable/ic_menu_close_clear_cancel" />
<ProgressBar
android:id="@+id/loading"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:elevation="10dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
</RelativeLayout>
We have created views for
1) ImageButton for close button of popupWindow,
2) PhotoView for showing fullscreen image
3) ProgressBar for showing loading progress while image is loaded.
4) We will use the root layout i.e RelativeLayout of this layout for showing blurred background as shown in whatsapp profile picture after cropping.
Now create a java class for popupWindow with name PhotoFullPopupWindow.java as below:
public class PhotoFullPopupWindow extends PopupWindow {
View view;
Context mContext;
PhotoView photoView;
ProgressBar loading;
ViewGroup parent;
private static PhotoFullPopupWindow instance = null;
public PhotoFullPopupWindow(Context ctx, int layout, View v, String imageUrl, Bitmap bitmap) {
super(((LayoutInflater) ctx.getSystemService(LAYOUT_INFLATER_SERVICE)).inflate( R.layout.popup_photo_full, null), ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT);
if (Build.VERSION.SDK_INT >= 21) {
setElevation(5.0f);
}
this.mContext = ctx;
this.view = getContentView();
ImageButton closeButton = (ImageButton) this.view.findViewById(R.id.ib_close);
setOutsideTouchable(true);
setFocusable(true);
// Set a click listener for the popup window close button
closeButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// Dismiss the popup window
dismiss();
}
});
//---------Begin customising this popup--------------------
photoView = (PhotoView) view.findViewById(R.id.image);
loading = (ProgressBar) view.findViewById(R.id.loading);
photoView.setMaximumScale(6);
parent = (ViewGroup) photoView.getParent();
// ImageUtils.setZoomable(imageView);
//----------------------------
if (bitmap != null) {
loading.setVisibility(View.GONE);
if (Build.VERSION.SDK_INT >= 16) {
parent.setBackground(new BitmapDrawable(mContext.getResources(), Constants.fastblur(Bitmap.createScaledBitmap(bitmap, 50, 50, true))));// ));
} else {
onPalette(Palette.from(bitmap).generate());
}
photoView.setImageBitmap(bitmap);
} else {
loading.setIndeterminate(true);
loading.setVisibility(View.VISIBLE);
GlideApp.with(ctx) .asBitmap()
.load(imageUrl)
.error(R.drawable.no_image)
.listener(new RequestListener<Bitmap>() {
@Override
public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Bitmap> target, boolean isFirstResource) {
loading.setIndeterminate(false);
loading.setBackgroundColor(Color.LTGRAY);
return false;
}
@Override
public boolean onResourceReady(Bitmap resource, Object model, Target<Bitmap> target, DataSource dataSource, boolean isFirstResource) {
if (Build.VERSION.SDK_INT >= 16) {
parent.setBackground(new BitmapDrawable(mContext.getResources(), Constants.fastblur(Bitmap.createScaledBitmap(resource, 50, 50, true))));// ));
} else {
onPalette(Palette.from(resource).generate());
}
photoView.setImageBitmap(resource);
loading.setVisibility(View.GONE);
return false;
}
})
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into(photoView);
showAtLocation(v, Gravity.CENTER, 0, 0);
}
//------------------------------
}
public void onPalette(Palette palette) {
if (null != palette) {
ViewGroup parent = (ViewGroup) photoView.getParent().getParent();
parent.setBackgroundColor(palette.getDarkVibrantColor(Color.GRAY));
}
}
}
In this above java file we have used a static method fastblur() from Constants.java, Lets create this file below.
Constants.java:
public class Constants {
private static final float BITMAP_SCALE = 0.4f;
private static final int BLUR_RADIUS = 8;
public static Bitmap fastblur(Bitmap sentBitmap) {
float scale = BITMAP_SCALE;
int radius = BLUR_RADIUS;
int width = Math.round(sentBitmap.getWidth() * scale);
int height = Math.round(sentBitmap.getHeight() * scale);
sentBitmap = Bitmap.createScaledBitmap(sentBitmap, width, height, false);
Bitmap bitmap = sentBitmap.copy(sentBitmap.getConfig(), true);
if (radius < 1) {
return (null);
}
int w = bitmap.getWidth();
int h = bitmap.getHeight();
int[] pix = new int[w * h];
Log.e("pix", w + " " + h + " " + pix.length);
bitmap.getPixels(pix, 0, w, 0, 0, w, h);
int wm = w - 1;
int hm = h - 1;
int wh = w * h;
int div = radius + radius + 1;
int r[] = new int[wh];
int g[] = new int[wh];
int b[] = new int[wh];
int rsum, gsum, bsum, x, y, i, p, yp, yi, yw;
int vmin[] = new int[Math.max(w, h)];
int divsum = (div + 1) >> 1;
divsum *= divsum;
int dv[] = new int[256 * divsum];
for (i = 0; i < 256 * divsum; i++) {
dv[i] = (i / divsum);
}
yw = yi = 0;
int[][] stack = new int[div][3];
int stackpointer;
int stackstart;
int[] sir;
int rbs;
int r1 = radius + 1;
int routsum, goutsum, boutsum;
int rinsum, ginsum, binsum;
for (y = 0; y < h; y++) {
rinsum = ginsum = binsum = routsum = goutsum = boutsum = rsum = gsum = bsum = 0;
for (i = -radius; i <= radius; i++) {
p = pix[yi + Math.min(wm, Math.max(i, 0))];
sir = stack[i + radius];
sir[0] = (p & 0xff0000) >> 16;
sir[1] = (p & 0x00ff00) >> 8;
sir[2] = (p & 0x0000ff);
rbs = r1 - Math.abs(i);
rsum += sir[0] * rbs;
gsum += sir[1] * rbs;
bsum += sir[2] * rbs;
if (i > 0) {
rinsum += sir[0];
ginsum += sir[1];
binsum += sir[2];
} else {
routsum += sir[0];
goutsum += sir[1];
boutsum += sir[2];
}
}
stackpointer = radius;
for (x = 0; x < w; x++) {
r[yi] = dv[rsum];
g[yi] = dv[gsum];
b[yi] = dv[bsum];
rsum -= routsum;
gsum -= goutsum;
bsum -= boutsum;
stackstart = stackpointer - radius + div;
sir = stack[stackstart % div];
routsum -= sir[0];
goutsum -= sir[1];
boutsum -= sir[2];
if (y == 0) {
vmin[x] = Math.min(x + radius + 1, wm);
}
p = pix[yw + vmin[x]];
sir[0] = (p & 0xff0000) >> 16;
sir[1] = (p & 0x00ff00) >> 8;
sir[2] = (p & 0x0000ff);
rinsum += sir[0];
ginsum += sir[1];
binsum += sir[2];
rsum += rinsum;
gsum += ginsum;
bsum += binsum;
stackpointer = (stackpointer + 1) % div;
sir = stack[(stackpointer) % div];
routsum += sir[0];
goutsum += sir[1];
boutsum += sir[2];
rinsum -= sir[0];
ginsum -= sir[1];
binsum -= sir[2];
yi++;
}
yw += w;
}
for (x = 0; x < w; x++) {
rinsum = ginsum = binsum = routsum = goutsum = boutsum = rsum = gsum = bsum = 0;
yp = -radius * w;
for (i = -radius; i <= radius; i++) {
yi = Math.max(0, yp) + x;
sir = stack[i + radius];
sir[0] = r[yi];
sir[1] = g[yi];
sir[2] = b[yi];
rbs = r1 - Math.abs(i);
rsum += r[yi] * rbs;
gsum += g[yi] * rbs;
bsum += b[yi] * rbs;
if (i > 0) {
rinsum += sir[0];
ginsum += sir[1];
binsum += sir[2];
} else {
routsum += sir[0];
goutsum += sir[1];
boutsum += sir[2];
}
if (i < hm) {
yp += w;
}
}
yi = x;
stackpointer = radius;
for (y = 0; y < h; y++) {
// Preserve alpha channel: ( 0xff000000 & pix[yi] )
pix[yi] = (0xff000000 & pix[yi]) | (dv[rsum] << 16) | (dv[gsum] << 8) | dv[bsum];
rsum -= routsum;
gsum -= goutsum;
bsum -= boutsum;
stackstart = stackpointer - radius + div;
sir = stack[stackstart % div];
routsum -= sir[0];
goutsum -= sir[1];
boutsum -= sir[2];
if (x == 0) {
vmin[y] = Math.min(y + r1, hm) * w;
}
p = x + vmin[y];
sir[0] = r[p];
sir[1] = g[p];
sir[2] = b[p];
rinsum += sir[0];
ginsum += sir[1];
binsum += sir[2];
rsum += rinsum;
gsum += ginsum;
bsum += binsum;
stackpointer = (stackpointer + 1) % div;
sir = stack[stackpointer];
routsum += sir[0];
goutsum += sir[1];
boutsum += sir[2];
rinsum -= sir[0];
ginsum -= sir[1];
binsum -= sir[2];
yi += w;
}
}
Log.e("pix", w + " " + h + " " + pix.length);
bitmap.setPixels(pix, 0, w, 0, 0, w, h);
return (bitmap);
}
}
We have successfully completed the coding part now!. Just check the Usage demo at the beginning of this tutorial now!
63 total views, no views today
