Change view onClick coverflow - Android

Question

I'm using this CoverFlow : http://www.inter-fuser.com/2010/02/android-coverflow-widget-v2.html

I want to be able to change View when I click on a button, the button being a back/forward icon which will take you to the previous/next item in the coverflow.

I have modded the coverflow slightly so that I use an XML layout instead.

Here is my onCreate() method:

 setContentView(R.layout.main);

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

 coverFlow.setAdapter(new ImageAdapter(this));
 ImageAdapter coverImageAdapter =  new ImageAdapter(this);     
 coverFlow.setAdapter(coverImageAdapter);
 coverFlow.setSpacing(-20);
 coverFlow.setSelection(0, true);
 coverFlow.setAnimationDuration(1000);

 tv = (TextView)findViewById(R.id.textView1);

 coverFlow.setOnItemClickListener(new OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
        Toast.makeText(getBaseContext(), String.valueOf(arg2), Toast.LENGTH_SHORT).show();
    }
 });

 coverFlow.setOnItemSelectedListener(new OnItemSelectedListener() {
    @Override
    public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
        tv.setText(String.valueOf(arg2));
    }

    @Override
    public void onNothingSelected(AdapterView<?> arg0) {
        // Do something
    }
 });

My XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/home_background"
    android:orientation="vertical" >

    <com.demo.app.coverflow.CoverFlow
        android:id="@+id/coverflow"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_marginBottom="39dp"
        android:layout_marginLeft="35dp"
        android:background="@drawable/button_left" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="39dp"
        android:layout_marginRight="35dp"
        android:background="@drawable/button_right" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="55dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="hello"
        android:textColor="@color/White"
        android:textSize="16dp" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="170dp"
        android:layout_marginTop="15dp"
        android:src="@drawable/unsa_logo" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="14dp"
        android:layout_marginTop="23dp"
        android:src="@drawable/pnc_logo" />

</RelativeLayout>

Answer 1

Thanks David, I'm one of the Mike colleagues but I've never written a line of Java. I work in the iOS department of our company. I understood what you were talking about. Your answer was helpful and well written!

I just had to add :

if ( currentimageposition < coverFlow.getcount()-1) {
     coverFlow.setSelection(currentImagePosition +1, true);
     currentImagePosition = currentImagePosition +1;
}

Because your onItemSelected was not called (update the current marker), I don't know why.

However, coverFlow.selection( int , bool) is not animated. It is just a set method when the view is loaded. For example, coverFlow.selection(3,true) will set the fourth image on the center of the coverflow.

Answer 2

While I was trying to find out how to add the animation I came across this which does everything in just one line :

go left

coverFlow.onKeyDown(KeyEvent.KEYCODE_DPAD_LEFT, new KeyEvent(0, 0));

go right

coverFlow.onKeyDown(KeyEvent.KEYCODE_DPAD_RIGHT, new KeyEvent(0, 0));

(just add each line to their respective button onclick methods

Hope this can help anyone else who finds them self in the same situation as I was :)

Answer 3

I hope i understand your question. if so, here's an idea:

you need to store a private instance variable that tracks the current position of the image that is being displayed from the coverflow. then, you update it from the setOnItemSelectedListener() method, which is inherited from Gallery. On the "back" or "forward" button, you simply set your current selection +/- 1 depending on the button pressed.

so in your Activity, add an instance variable int that will keep track of position like...

public class MyActivity {
    private int currentImagePosition = -1;

    //add the rest of your onCreate code here...
}

Next, you need to be able to update the current position of the image that is currently being displayed in the coverflow. you can do so by overriding setOnItemSelectedListener like so (inside your onCreate method):

coverFlow.setOnItemSelectedListener(new OnItemSelectedListener(){
            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                currentImagePosition = position; //this will update your current marker
            }
};

Lastly, all you have to do is set each button's onclick listeners to change to the previous or next image by using setSelection( currentImagePosition+1 ) or setSelection( currentImagePosition-1 ). By the way, what's the true or false parameter of setSelection() do? i'm not sure what it does so i'm just going to use true like you did initially. your onCreate() method will now look something like:

@Override
public void onCreate(Bundle savedInstanceState){
    //insert your other code in onCreate here in this spot.... 

    //add the following lines to your code:
    Button goLeft = (Button) findViewById(R.id.button1);
    goLeft.setOnClickListener( new OnClickListener() {
        @Override
        public void onClick(View v) {
                //go to previous image
                        if( currentImagePosition > 0 ){ //i'm assuming you dont want to go left anymore once at the leftmost image
                             coverFlow.setSelection(currentImagePosition - 1, true);
                        }
        }
    } ) ;


    Button goRight = (Button) findViewById(R.id.button2);
    goRight.setOnClickListener( new OnClickListener() {
        @Override
        public void onClick(View v) {
                //go to previous image
                        if( currentImagePosition < coverFlow.getCount()-1 ){ //i'm assuming you dont want to go left anymore once at the leftmost image
                             coverFlow.setSelection(currentImagePosition + 1, true);
                        }
        }
    } ) ;


}

NOTE: the part about updating position is assumed to work from reading Get the position of the current image displayed in Gallery so i hope this works. if not, at least i tried :D

Good luck!!!