Archive

Posts Tagged ‘image’

Create application with Swipe gesture to navigate page like Google Play

December 26, 2012 4 comments

Android users might already have been familiar with Google Play application, which first, I think,  inspires the pattern of horizontal swipe gesture to navigate among content pages.

This article is gonna show you how to do a very very quick simple application that does the same pattern.

Swipe Pattern Sample

Swipe Pattern Sample

There will be three pages, each page will display a sample image of that page as swiping along. My sample, I put: “Girl, Dog & Cat”.

A – Requirements

– ViewPagerIndicator library, you can get it from here: http://viewpagerindicator.com/

– Android Support Package Library v4, well, you can either download the above package and use the already-had libs or get it from SDK Update. Either way is fine.

B – Project

Well, since I’m an Ant user, I prefer to do stuffs in command-line, so this tutorial will probably in command-mode.

1. Create the project

$ create project --target 2 --name Droid05 --path ./Droid05 --activity MainScreen --package pete.apps.study.droid05

Now project is ready for the next step.

2. Configure libs

– After downloading the ViewPagerIndicator package, you need to update the library in order to get Ant build.xml for the job. Please refer to my previous post: https://xjaphx.wordpress.com/2012/12/26/build-viewpagerindicator-with-ant/
– Now go to config the library reference, edit the project.properties and add this line

android.library.reference.1=../../tools/frameworks/ViewPagerIndicator/library

that is my case, you should locate to your correct directory where you put the /library of the ViewPagerIndicator.
– To test the config, you can just type to confirm

$ ant clean debug

If it succeeds, it means fine.
3. Implement the code
– Create the layout, pretty much simple, there will use a TitlePageIndicator and a ViewPager, main.xml

$ vi res/
<?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"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#FFFFFFFF"
    >
    <com.viewpagerindicator.TitlePageIndicator
        android:id="@+id/titles"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFFFF"
        android:textColor="#FF000099"
        app:footerColor="#FF00FF00"
        app:footerLineHeight="3dp"
        app:footerIndicatorHeight="6dp"
        app:footerIndicatorStyle="triangle"
        app:selectedColor="#FF0000FF"
        app:selectedBold="true"
    />
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
    />
</LinearLayout>

– Create a custom Adapter inherits from PagerAdapter for controlling the ViewPager’s work, ViewPagerAdapter.java

package pete.apps.study.droid05;

import android.content.Context;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class ViewPagerAdapter extends PagerAdapter {

    private static String[] titles = new String[] {
        "Girl",
        "Dog",
        "Cat"
    };

    private static int[] images = new int[] {
        R.drawable.girl,
        R.drawable.dog,
        R.drawable.cat
    };

    private final Context context;

    public ViewPagerAdapter(Context context) {
        this.context = context;
    }

    @Override
    public String getPageTitle(int position) {
        return titles[position];
    }

    @Override
    public int getCount() {
        return titles.length;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ImageView view = new ImageView(this.context);
        view.setImageResource(images[position]);
        ((ViewPager) container).addView(view, 0);
        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        ((ViewPager) container).removeView((ImageView) object);
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view.equals(object);
    }

}

– Finally the MainScreen.java

ackage pete.apps.study.droid05;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.Window;
import android.view.WindowManager;
import com.viewpagerindicator.TitlePageIndicator;

public class MainScreen extends Activity
{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

        setContentView(R.layout.main);

        ViewPagerAdapter adapter = new ViewPagerAdapter(this);
        ViewPager pager = (ViewPager) findViewById(R.id.viewpager);
        TitlePageIndicator title = (TitlePageIndicator) findViewById(R.id.titles);
        pager.setAdapter(adapter);
        title.setViewPager(pager);
    }
}

4. Execute the final
– Let’s build and run the code to see the results

$ ant clean debug install

C – Get source

– Get full source code at: Browse Source

 

Well, enjoy and create your amazing application !

Cheers,

Pete Houston

 

Image Processing – Image Reflection Effect

November 1, 2011 5 comments

So you want to create a nice, cool effect for your picture/photo viewer or camera effect?

Reflection is always a good one to mention.

Original Image

Original Image

Image w/ Reflection Effect

Image w/ Reflection Effect

I’ve just found the implementation for this technique on this page:

http://www.inter-fuser.com/2009/12/android-reflections-with-bitmaps.html

I remake it into a method for reusability:

    public static Bitmap applyReflection(Bitmap originalImage) {
        // gap space between original and reflected
        final int reflectionGap = 4;
        // get image size
        int width = originalImage.getWidth();
        int height = originalImage.getHeight();          
    
        // this will not scale but will flip on the Y axis
        Matrix matrix = new Matrix();
        matrix.preScale(1, -1);
          
        // create a Bitmap with the flip matrix applied to it.
        // we only want the bottom half of the image
        Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0, height/2, width, height/2, matrix, false);          
              
        // create a new bitmap with same width but taller to fit reflection
        Bitmap bitmapWithReflection = Bitmap.createBitmap(width, (height + height/2), Config.ARGB_8888);
        
        // create a new Canvas with the bitmap that's big enough for
        // the image plus gap plus reflection
        Canvas canvas = new Canvas(bitmapWithReflection);
        // draw in the original image
        canvas.drawBitmap(originalImage, 0, 0, null);
        // draw in the gap
        Paint defaultPaint = new Paint();
        canvas.drawRect(0, height, width, height + reflectionGap, defaultPaint);
        // draw in the reflection
        canvas.drawBitmap(reflectionImage,0, height + reflectionGap, null);
         
        // create a shader that is a linear gradient that covers the reflection
        Paint paint = new Paint();
        LinearGradient shader = new LinearGradient(0, originalImage.getHeight(), 0,
        		bitmapWithReflection.getHeight() + reflectionGap, 0x70ffffff, 0x00ffffff,
        		TileMode.CLAMP);
        // set the paint to use this shader (linear gradient)
        paint.setShader(shader);
        // set the Transfer mode to be porter duff and destination in
        paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
        // draw a rectangle using the paint with our linear gradient
        canvas.drawRect(0, height, width, bitmapWithReflection.getHeight() + reflectionGap, paint);
                
        return bitmapWithReflection;
    }

Thanks Neil Davies for this nice implementation!!!

Cheers,

Pete Houston

Image Processing – Hue Filter

October 30, 2011 Leave a comment

The same concept of the Saturation Filter but apply for Hue.

Original Image

Original Image

Image w/ Hue Filter (Level 3)

Image w/ Hue Filter (Level 3)

Image w/ Hue Filter (Level 9)

Image w/ Hue Filter (Level 9)

Here the implementation:

	public static Bitmap applyHueFilter(Bitmap source, int level) {
		// get image size
		int width = source.getWidth();
		int height = source.getHeight();
		int[] pixels = new int[width * height];
		float[] HSV = new float[3];
		// get pixel array from source
		source.getPixels(pixels, 0, width, 0, 0, width, height);
		
		int index = 0;
		// iteration through pixels
		for(int y = 0; y < height; ++y) {
			for(int x = 0; x < width; ++x) {
				// get current index in 2D-matrix
				index = y * width + x;				
				// convert to HSV
				Color.colorToHSV(pixels[index], HSV);
				// increase Saturation level
				HSV[0] *= level;
				HSV[0] = (float) Math.max(0.0, Math.min(HSV[0], 360.0));
				// take color back
				pixels[index] |= Color.HSVToColor(HSV);
			}
		}
		// output bitmap				
		Bitmap bmOut = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
		bmOut.setPixels(pixels, 0, width, 0, 0, width, height);
		return bmOut;		
	}

Cheers,

Pete Houston

Categories: Tutorials Tags: , , ,

Image Processing – Saturation Filter

October 30, 2011 4 comments

By converting RGB to HSV, we can adjust pixel color in different way, in this case, I’d like to filter only Saturation value, I guess this technique is called “Saturation Filter“.

http://en.wikipedia.org/wiki/HSL_and_HSV#Saturation

Original Image

Original Image

Image w/ Saturation Filter (Level 1)

Image w/ Saturation Filter (Level 1)

It’s kinda similar to some technique of color enhancement, but I’m not really sure.

Here the implementation:

	public static Bitmap applySaturationFilter(Bitmap source, int level) {
		// get image size
		int width = source.getWidth();
		int height = source.getHeight();
		int[] pixels = new int[width * height];
		float[] HSV = new float[3];
		// get pixel array from source
		source.getPixels(pixels, 0, width, 0, 0, width, height);

		int index = 0;
		// iteration through pixels
		for(int y = 0; y < height; ++y) {
			for(int x = 0; x < width; ++x) {
				// get current index in 2D-matrix
				index = y * width + x;
				// convert to HSV
				Color.colorToHSV(pixels[index], HSV);
				// increase Saturation level
				HSV[1] *= level;
				HSV[1] = (float) Math.max(0.0, Math.min(HSV[1], 1.0));
				// take color back
				pixels[index] |= Color.HSVToColor(HSV);
			}
		}
		// output bitmap
		Bitmap bmOut = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
		bmOut.setPixels(pixels, 0, width, 0, 0, width, height);
		return bmOut;
	}

Cheers,

Pete Houston

Categories: Tutorials Tags: , , ,

Image Processing – Shading Filter

October 30, 2011 10 comments

Shading Filter” is a technique that use AND operator for the current pixel color and a desired-shading color.

Original Image

Original Image

Image w/ Shading (Sky Blue)

Image w/ Shading (Sky Blue)

Image /w Shading (Lawn Green)

Image /w Shading (Lawn Green)

Image w/ Shading (Violet)

Image w/ Shading (Violet)

I love her in Violet

Here the implementation:

	public static Bitmap applyShadingFilter(Bitmap source, int shadingColor) {
		// get image size
		int width = source.getWidth();
		int height = source.getHeight();
		int[] pixels = new int[width * height];
		// get pixel array from source
		source.getPixels(pixels, 0, width, 0, 0, width, height);

		int index = 0;
		// iteration through pixels
		for(int y = 0; y < height; ++y) {
			for(int x = 0; x < width; ++x) {
				// get current index in 2D-matrix
				index = y * width + x;
				// AND
				pixels[index] &= shadingColor;
			}
		}
		// output bitmap
		Bitmap bmOut = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
		bmOut.setPixels(pixels, 0, width, 0, 0, width, height);
		return bmOut;
	}

 

Cheers,
Pete Houston

Categories: Tutorials Tags: , , ,

Image Processing – Snow Effect

October 30, 2011 6 comments

Well, still base on randomizing the pixel color, in contrast to the Black Filter, if set all pixels having R,G,B values to the max (0xFF) when they’re greater than threshold, then we have the Snow Effect.

Original Image

Original Image

Image w/ Snow Effect

Image w/ Snow Effect

I think it’s nice 🙂

	public static Bitmap applySnowEffect(Bitmap source) {
		// get image size
		int width = source.getWidth();
		int height = source.getHeight();
		int[] pixels = new int[width * height];
		// get pixel array from source
		source.getPixels(pixels, 0, width, 0, 0, width, height);
		// random object
		Random random = new Random();
		
		int R, G, B, index = 0, thresHold = 50;
		// iteration through pixels
		for(int y = 0; y < height; ++y) {
			for(int x = 0; x < width; ++x) {
				// get current index in 2D-matrix
				index = y * width + x;				
				// get color
				R = Color.red(pixels[index]);
				G = Color.green(pixels[index]);
				B = Color.blue(pixels[index]);
				// generate threshold
				thresHold = random.nextInt(COLOR_MAX);
				if(R > thresHold && G > thresHold && B > thresHold) {
					pixels[index] = Color.rgb(COLOR_MAX, COLOR_MAX, COLOR_MAX);
				}							
			}
		}
		// output bitmap				
		Bitmap bmOut = Bitmap.createBitmap(width, height, Bitmap.Config.RGB_565);
		bmOut.setPixels(pixels, 0, width, 0, 0, width, height);
		return bmOut;
	}
Categories: Tutorials Tags: , , ,

Image Processing – Black Filter (Increasing the Darkness)

October 30, 2011 4 comments

Base on randomizing image pixels, another filter is created, named “Black Filter“, or enhance the noise of darkness.

Original Image

Original Image

Image w/ Black Filter

Image w/ Black Filter

It looks like ink-dropping, isn’t it?

Basically, the algorithm is to generate a threshold number (0-255), if all R,G,B values of a pixel are less than the threshold, then set the pixel to black.

	public static Bitmap applyBlackFilter(Bitmap source) {
		// get image size
		int width = source.getWidth();
		int height = source.getHeight();
		int[] pixels = new int[width * height];
		// get pixel array from source
		source.getPixels(pixels, 0, width, 0, 0, width, height);
		// random object
		Random random = new Random();

		int R, G, B, index = 0, thresHold = 0;
		// iteration through pixels
		for(int y = 0; y < height; ++y) {
			for(int x = 0; x < width; ++x) {
				// get current index in 2D-matrix
				index = y * width + x;
				// get color
				R = Color.red(pixels[index]);
				G = Color.green(pixels[index]);
				B = Color.blue(pixels[index]);
				// generate threshold
				thresHold = random.nextInt(COLOR_MAX);
				if(R < thresHold && G < thresHold && B < thresHold) {
					pixels[index] = Color.rgb(COLOR_MIN, COLOR_MIN, COLOR_MIN);
				}
			}
		}
		// output bitmap
		Bitmap bmOut = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
		bmOut.setPixels(pixels, 0, width, 0, 0, width, height);
		return bmOut;
	}

Cheers,
Pete Houston

Categories: Tutorials Tags: , , , ,