Android StackView type of Layout with Horizontal Swipe

Question

I am building an Android app that needs a "Card Deck" UI widget.

This is a request for an activity/layout example that can do the following:

1) Vertical Swipe Support:

List a deck of cards that can be vertically scrolled/swiped. StackView does this, but I'm open to any solution that works well (e.g., some CardUI project)

2) Horizontal Swipe Support:

For any card, there are 2 dictionary definitions:

• If we do a left swipe - then we can see definition A.
• If we do a right swipe, we see definition B
• Horizontal swipe update does not update the entire screen layout, just the card that was swiped. So if I swipe Card2 to the right to see A2, I still have Card1 behind A2

Example:

[A1][Card1][B1]
[A2][Card2][B2]
[A3][Card3][B3]

I did see this related post here , the answers there provide some hints and reference info.. but unfortunately, I am still trying to figure it out.

Answer 1

You have two possible approaches: take some open source project and adapt it to your needs, or otherwise, build your card swipe as a image slider from a detailed tutorial.

For the first option, have a look in Github, where you will find several small projects that do deck of cards with features usually on vertical or horizontal scrolling. I guess you may find interesting the following projects:

• CardDeck: Deck of Cards for Android

• DeckPicker: A complete android anki droid project with some additional feature of Card Preview within browser screen. In Preview screen card will be shown like review mode on card browser window.

In the end if the additional changes you made looks nice, it can be worth to submit a patch to the original project.

For the second alternative, for the case you prefer to implement it from scratch, then take simple steps, growing your project into more specific/complex details customizing it at your will. A fullscreen image slider would fit the bill, which would comprise the activity for the view page:

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

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

</LinearLayout>

And a Java class with a full screen viewer:

public class FullScreenImageAdapter extends PagerAdapter {

    private Activity _activity;
    private ArrayList<String> _imagePaths;
    private LayoutInflater inflater;

    // constructor
    public FullScreenImageAdapter(Activity activity,
            ArrayList<String> imagePaths) {
        this._activity = activity;
        this._imagePaths = imagePaths;
    }

    @Override
    public int getCount() {
        return this._imagePaths.size();
    }

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ImageView imgDisplay;
        Button btnClose;

        inflater = (LayoutInflater) _activity
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View viewLayout = inflater.inflate(R.layout.layout_fullscreen_image, container,
                false);

        imgDisplay = (ImageView) viewLayout.findViewById(R.id.imgDisplay);
        btnClose = (Button) viewLayout.findViewById(R.id.btnClose);

        BitmapFactory.Options options = new BitmapFactory.Options();
        options.inPreferredConfig = Bitmap.Config.ARGB_8888;
        Bitmap bitmap = BitmapFactory.decodeFile(_imagePaths.get(position), options);
        imgDisplay.setImageBitmap(bitmap);

        // close button click event
        btnClose.setOnClickListener(new View.OnClickListener() {           
            @Override
            public void onClick(View v) {
                _activity.finish();
            }
        });

        ((ViewPager) container).addView(viewLayout);

        return viewLayout;
    }

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

    }
}

Then you achieve the image sliding horizontally, such as:

And to add vertical motion, just include additional vertical layout:

main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="Swipe Demo"

        android:gravity="center"

        android:layout_margin="10dip" />

        <LinearLayout

            android:layout_width="fill_parent"

            android:layout_height="fill_parent"

            android:orientation="vertical"

            android:gravity="center">

                 <ImageView

                     android:layout_width="wrap_content"

                     android:layout_height="wrap_content"

                     android:layout_gravity="center"

                     android:gravity="center"

                     android:layout_margin="10dip"

                     android:id="@+id/image_place_holder"/>

           </LinearLayout>

</LinearLayout>

Which will allow you to slide things vertically:

At the end of the day, what you want to have is a grid, such as vertical and horizontal scrolling together. For that you have to combine both vertical and horizontal sliding into a table layout:

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

    <HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
                  android:layout_width="wrap_content"
                  android:layout_height="fill_parent">

         <TableLayout
                  android:id="@+id/amortization"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content">

              <TableRow
                  android:background="#ffff00">
                  <TextView
                       android:text="@string/amortization_1"
                       android:padding="3dip"/>
                  <TextView
                       android:text="@string/amortization_2"
                       android:padding="3dip"/>
                  <TextView
                       android:text="@string/amortization_3"
                       android:padding="3dip"/>
                  <TextView
                       android:text="@string/amortization_4"
                       android:padding="3dip"/>
                  <TextView
                       android:text="@string/amortization_5"
                       android:padding="3dip"/>
                  <TextView
                       android:text="@string/amortization_6"
                       android:padding="3dip"/>
                  <TextView
                       android:text="@string/amortization_7"
                       android:padding="3dip"/> 
              </TableRow>
         </TableLayout>
    </HorizontalScrollView>
</ScrollView>

Taking such steps and combining it, will allow you to achieve the effect you want.