android-gpuimage - provide image filter in a horizontal scroll view like instagram

Question

As titled, I am trying to develop an app with image filters like instagram. I am able to use the CPUImage library to add effect to photo, but having trouble to show image filter options in a horizontal scroll view.

My idea is to create a bunch of demo pictures which represent different filtering effects and list them in a horizontal scroll view. When the demo picture is selected, use the CPUImage library to added corresponding effect.

The question is:

Is this the right or easiest way to achieve a image filter in horizontal scroll view?

Am I missed any existing reference, tutorial or library which does the same thing?

Any help is appreciated. Thanks guys.

Answer 1

After spending some time to figure our how to incorporate a horizontal scroll view and gpuImageFilter, I am able to achieve an instagram like image filter.

Some related link and code sharing below for anyone who has the same problem.

Code

// Set the current effect mode as image border or filter
private void setEffectMode(String mode)
{

    // Compute the width of a carousel item based on the screen width and
    // number of initial items.
    final DisplayMetrics displayMetrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
    final int imageWidth = (int) (displayMetrics.widthPixels / INITIAL_ITEMS_COUNT);
    TypedArray filterResourcesTypedArray = null;

    mCarouselContainer.removeAllViews();
    if (mode.equals(borderMode))
    {
        // Get the array of puppy resources
        filterResourcesTypedArray = getResources().obtainTypedArray(R.array.borderArray);
    } else if (mode.equals(filterMode))
    {
        // Get the array of puppy resources
        filterResourcesTypedArray = getResources().obtainTypedArray(R.array.filterArray);
    }

    // Populate the carousel with items
    for (int i = 0; i < filterResourcesTypedArray.length(); i++)
    {
        // Create new ImageView
        imageItem = new ImageView(this);
        imageItem.setId(i);
        imageItem.setTag(mode);

        // Set the image view resource
        imageItem.setImageResource(filterResourcesTypedArray.getResourceId(i, -1));

        // Set the size of the image view to the previously computed value
        imageItem.setLayoutParams(new LinearLayout.LayoutParams(imageWidth, imageWidth));

        // / Add image view to the carousel container
        mCarouselContainer.addView(imageItem);
        imageItem.setOnClickListener(this);
    }
}

How to create a horizontal image scroll view http://www.smashingmagazine.com/2013/02/01/android-carousel-design-pattern/