Coverflow with custom adapter

Question

I want to create a cover flow with custom adapter (Image View as Thumbnail, Text View as Title, Progress Bar that indicates some progress..).

All the examples or the implementations of the Cover flow widget are based on Gallery (witch supports a collection of Images, only).

Is there any hints, ideas that may help me?

Thank you :)

Answer 1

This is rather easy to do; you use the same adapter as with for example a listview. Extend the BaseAdapter, use the ViewHolder pattern and return your inflated view in the

public View getView(int position, View convertView, ViewGroup parent) {

method. But you should change the

 transformImageBitmap(THIS child, Transformation t, int rotationAngle) 

to

transformImageBitmap(View child, Transformation t, int rotationAngle)

in the CoverFlow.java or you'll get ClassCastExceptions.

Answer 2

You can do that by using the lazy adapter. You have to create the reflected images in decode file of Image loader class. Next, you have to return a image view from getview method of your custom adapter class.

Here is the sample code:

In main activity:

CoverFlow coverflow=(CoverFlow)findViewById(R.id.yourcoverflowid);

coverflow.setAdapter(new customadapter(getActivity(),list,imagesize));

In getview method of custom adapter:

    ImageView i=new ImageView(activity);       
    imageLoader.DisplayImage(data.get(position).getimage(),i);


    i.setPadding(0,5,0,0);

    i.setLayoutParams(new CoverFlow.LayoutParams(width,height));

    i.setScaleType(ImageView.ScaleType.MATRIX);

    return i;

In decodefile method of imageloader class

try{ final int reflectionGap = 4;

    Bitmap originalImage;


     BitmapFactory.Options o = new BitmapFactory.Options();
     o.inJustDecodeBounds = true;
     FileInputStream stream1=new FileInputStream(f);
     originalImage=BitmapFactory.decodeStream(stream1);
     stream1.close();

        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 deafaultPaint = new Paint();
       canvas.drawRect(0, height, width, height + reflectionGap, deafaultPaint);
       //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;

Answer 3

if you want the coverflow for all views than its possible from honeycomb where you can rotate views by using method View.setRotationY(rotationangle).

Answer 4

The workaround I used may not be what you need. However this is what I could come up with... I put whatever I want in a LinearLayout, and then convert it to a Bitmap:

LayoutInflater inflater = (LayoutInflater) ClassifiedActivity.this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);              

LinearLayout layout = (LinearLayout) inflater.inflate(R.layout.my_layout_as_imageview,
                null);
layout.setBackgroundResource(R.drawable.stub);

layout.setDrawingCacheEnabled(true);

layout.measure(MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED), 
            MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
layout.layout(0, 0, layout.getMeasuredWidth(), layout.getMeasuredHeight());

layout.buildDrawingCache(true);
Bitmap b = Bitmap.createBitmap(layout.getDrawingCache());
layout.setDrawingCacheEnabled(false); // clear drawing cache

ImageView iv= (ImageView) findViewById(R.id.imageView1);
iv.setImageBitmap(b);

My layout XML looks like this:

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

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Medium Text" />

</LinearLayout>

This answer helped me convert a LinearLayout to a Bitmap.