Swipe Image with button and fingers

Question

I'm trying to do a custom gallery with images shown in fullscreen mode and be able to swipe between different images with Previous Next buttons and with fingers.So for now I did the part with changing images with fingers,but I had to redesign my xml file and the whole structure and logic of my code and I need a little help or suggestions of how to add the new stuff.So the old code which I was using to swipe images with fingers was like this :

  this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);

        HorizontalPager realViewSwitcher = new HorizontalPager(getApplicationContext());

        ImageView img1 = new ImageView(getApplicationContext());
        ImageView img2 = new ImageView(getApplicationContext());
        ImageView img3 = new ImageView(getApplicationContext());
        ImageView img4 = new ImageView(getApplicationContext());
        ImageView img5 = new ImageView(getApplicationContext());
        ImageView img6 = new ImageView(getApplicationContext());

        img1.setImageResource(R.drawable.one);
        img2.setImageResource(R.drawable.two);
        img3.setImageResource(R.drawable.three);
        img4.setImageResource(R.drawable.four);
        img5.setImageResource(R.drawable.five);
        img6.setImageResource(R.drawable.six);

        realViewSwitcher.addView(img1);
        realViewSwitcher.addView(img2);
        realViewSwitcher.addView(img3);
        realViewSwitcher.addView(img4);
        realViewSwitcher.addView(img5);
        realViewSwitcher.addView(img6);

        setContentView(realViewSwitcher);

And this code shows the image in fullscreen mode and I can swipe between them.Now I need to do something like this :

I want to be able to swipe images with buttons and finger.And my second question is how can I hide the bar in top (Back,Galler,Info) and the bar in bottom (Previous,Next) and show the image in Fullscreen mode and still be able to swipe images only with fingers. Here is how my xml file looks :

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

            <ImageView 
                android:id="@+id/single_card"
                android:src="@drawable/one"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" />

            <RelativeLayout
                android:id="@+id/actionbar"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="#000000"
                android:orientation="horizontal"
                android:layout_gravity="center"
                android:padding="10dp"
                android:layout_alignParentTop="true" >

                <Button
                    android:id="@+id/back_button"
                    android:text="Back"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:background="#333333"
                    android:layout_centerVertical="true"
                    android:textSize="13dp"
                    android:textColor="#ffffff"
                    android:paddingLeft="10dp"
                    android:paddingRight="10dp"
                    android:paddingTop="5dp"
                    android:paddingBottom="5dp" />

                <TextView 
                    android:text="Gallery"
                    android:textStyle="bold"
                    android:textSize="15dp"
                    android:textColor="#FFFFFF"
                    android:id="@+id/single_msg_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" 
                    android:layout_centerInParent="true"/>

                <Button
                    android:id="@+id/info_button"
                    android:text="Info"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:background="#333333"
                    android:layout_centerVertical="true"
                    android:textSize="13dp"
                    android:textColor="#ffffff"
                    android:paddingLeft="10dp"
                    android:paddingRight="10dp"
                    android:paddingTop="5dp"
                    android:paddingBottom="5dp" />

            </RelativeLayout>


            <RelativeLayout 
                android:id="@+id/content"
                android:layout_width="fill_parent"
                android:layout_height="50dp"
                android:layout_alignParentBottom="true"
                android:background="#000000" >


                <Button
                    android:id="@+id/previous_button"
                    android:text="Previous"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="#333333"
                    android:layout_alignParentLeft="true"
                    android:textSize="13dp"
                    android:textColor="#ffffff"
                    android:paddingLeft="10dp"
                    android:paddingRight="10dp"
                    android:paddingTop="5dp"
                    android:paddingBottom="5dp"
                    android:layout_marginLeft="50dp"
                    android:layout_marginBottom="10dp"
                    android:layout_alignParentBottom="true" />

                <Button
                    android:id="@+id/next_button"
                    android:text="Next"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="#333333"
                    android:layout_alignParentRight="true"
                    android:textSize="13dp"
                    android:textColor="#ffffff"
                    android:paddingLeft="10dp"
                    android:paddingRight="10dp"
                    android:paddingTop="5dp"
                    android:paddingBottom="5dp"
                    android:layout_marginRight="50dp"
                    android:layout_marginBottom="10dp"
                    android:layout_alignParentBottom="true" />

            </RelativeLayout>


</RelativeLayout>

Thanks in advance!!! Any help,suggestions or links with example are welcomed!

Answer 1

For Swiping images we can simply use ViewPager concept.

1.set the viewpager in your layout

    <android.support.v4.view.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />
    </RelativeLayout>

2.MyMain.java

                public class MyMain extends Activity {
                      @Override
                    public void onCreate(Bundle savedInstanceState) {
                  super.onCreate(savedInstanceState);
                  setContentView(R.layout.main);

                 ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
                  ImagePagerAdapter adapter = new ImagePagerAdapter();
                  viewPager.setAdapter(adapter);
               }

            private class ImagePagerAdapter extends PagerAdapter {
                 private int[] mImages = new int[] {
                       R.drawable.one,
                       R.drawable.two,
                       R.drawable.hree,
                       R.drawable.four
                           };

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

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

               @Override
               public Object instantiateItem(ViewGroup container, int position) {
                    Context context = MyMain.this;
                  ImageView imageView = new ImageView(context);
               int padding =context.getResources().  
                    getDimensionPixelSize(R.dimen.padding_medium);
                 imageView.setPadding(padding, padding, padding, padding);
                 imageView.setScaleType(ImageView.ScaleType.CENTER);
      imageView.setImageResource(mImages[position]);
      ((ViewPager) container).addView(imageView, 0); 
      return imageView;
    }

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


    }

Answer 2

Use the view Flow project to do this. your code with adding imageViews is not a good solution at all.

see viewFlow on gitHub. there are examples with images also. all you do is add this layout in the activity, make an image adapter and thats it.

Answer 3

I did something like this a while back, basically a finger swipe left or finger swipe right perform 2 different actions and there are buttons for the same actions that can be clicked.

In my Main Activity I register the finger swipe listener:

gestureDetector = new GestureDetector(new ListItemGestureDetector(this));
gestureListener = new View.OnTouchListener() {
    public boolean onTouch(View v, MotionEvent event) {
        if (gestureDetector.onTouchEvent(event)) {
            return true;
        }
        return false;
    }
};

Then in my Efficient Adapter that renders my list view, I register the buttons and their click (this would not be the same for you but when adding the buttons to my layout I do this (call and sms being buttons in my layout)

static class ViewHolder {
    TextView name, phone;
    ImageButton call, sms, other;
    //ImageView icon;
}

    ViewHolder holder = new ViewHolder();
    holder.call.setClickable(true);
    holder.call.setFocusable(true);
    holder.call.setTag("call");
    final int pos = position;

    holder.call.setOnClickListener(new View.OnClickListener() {

        public void onClick(View view) {
            Toast.makeText(context, "CALL", Toast.LENGTH_SHORT).show();
            Cursor c = (Cursor) getItem(pos);
            Intent i = new Intent(Intent.ACTION_CALL);
            String phoneNumber = c.getString(WaddleAddressBook.DATA_ID);
            i.setData(Uri.withAppendedPath(ContactsContract.CommonDataKinds.Phone.CONTENT_URI, phoneNumber));
            context.startActivity(i);
        }
    });