SwipeDeck2
A Tinder style Swipeable deck view for Android
A Message To Developers
This is an almost complete re write of the first swipe deck, hopefully this one will be less bug prone and easier to update. this is a very early release so i'm relying on your bug reports and feature suggestions to get this ready for prime time.
Installation
In your repositories and dependencies section add these parameters:
dependencies {
compile 'com.daprlabs.aaron:swipedeck:2.0.6'
}Sync Gradle and import Swipe-Deck into your project
import com.daprlabs.aaron.swipedeck.SwipeDeck;Example
Start by defining a card view. Note that you can use any view type of your choice, cardviews provide you with access to shadows plus they look good. If you decide to use another view I recommend adding a drop shadow and perhaps a border.
Here we have a pretty ordinary card view defined in XML:
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/card_view"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="4dp"
card_view:cardElevation="4dp"
card_view:cardUseCompatPadding="true"
android:layout_margin="8dp"
android:gravity="center_horizontal"
android:padding="25dp">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
tools:src="@drawable/food"
android:id="@+id/offer_image"
android:layout_width="match_parent"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:layout_height="200dp" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<ImageView
android:layout_weight="1"
android:id="@+id/left_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/left_arrow"
android:layout_below="@id/offer_image"
android:layout_centerHorizontal="true" />
<ImageView
android:layout_weight="1"
android:id="@+id/right_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/right_arrow"
android:layout_below="@+id/offer_image"
android:layout_centerHorizontal="true" />
</LinearLayout>
<TextView
android:id="@+id/sample_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Sample Text"
android:gravity="center_horizontal"
android:textSize="20dp" />
</LinearLayout>
</android.support.v7.widget.CardView>Next Swipe Deck takes an adapter in much the same way as other adapter views:
public class SwipeDeckAdapter extends BaseAdapter {
private List<String> data;
private Context context;
public SwipeDeckAdapter(List<String> data, Context context) {
this.data = data;
this.context = context;
}
@Override
public int getCount() {
return data.size();
}
@Override
public Object getItem(int position) {
return data.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
View v = convertView;
if (v == null) {
LayoutInflater inflater = getLayoutInflater();
// normally use a viewholder
v = inflater.inflate(R.layout.test_card2, parent, false);
}
ImageView imageView = (ImageView) v.findViewById(R.id.offer_image);
Picasso.with(context).load(R.drawable.food).fit().centerCrop().into(imageView);
TextView textView = (TextView) v.findViewById(R.id.sample_text);
String item = (String)getItem(position);
textView.setText(item);
v.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.i("Layer type: ", Integer.toString(v.getLayerType()));
Log.i("Hardware Accel type:", Integer.toString(View.LAYER_TYPE_HARDWARE));
}
});
return v;
}
}Now we add a swipe deck to our layout:
<com.daprlabs.aaron.swipedeck.layouts.SwipeFrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:swipedeck="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/swipeLayout"
android:orientation="vertical">
<com.daprlabs.aaron.swipedeck.SwipeDeck
android:id="@+id/swipe_deck"
android:layout_width="match_parent"
android:layout_height="480dp"
android:padding="50dp"
swipedeck:max_visible="3"
swipedeck:card_spacing="15dp"
swipedeck:swipe_enabled="false"/>
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="swipe left" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:text="add card" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:text="swipe right" />
</com.daprlabs.aaron.swipedeck.layouts.SwipeFrameLayout>
I've included some modified layouts (SwipeFrameLayout, SwipeRelativeLayout etc) for ease of use, but you can use any layout you desire. However you may not get the desired outcome unless you set android:clipChildren="false" on your containing layout. If you choose not to do this cards will be clipped as they move outside their view boundary.
Now we simply give our card deck an adapter and perhaps a callback from our Activity:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
cardStack = (SwipeDeck) findViewById(R.id.swipe_deck);
testData = new ArrayList<>();
testData.add("0");
testData.add("1");
testData.add("2");
testData.add("3");
testData.add("4");
adapter = new SwipeDeckAdapter(testData, this);
if(cardStack != null){
cardStack.setAdapter(adapter);
}
cardStack.setCallback(new SwipeDeck.SwipeDeckCallback() {
@Override
public void cardSwipedLeft(int positionInAdapter) {
Log.i("MainActivity", "card was swiped left, position in adapter: " + positionInAdapter);
}
@Override
public void cardSwipedRight(int positoinInAdapter) {
Log.i("MainActivity", "card was swiped right, position in adapter: " + positoinInAdapter);
}
});
cardStack.setLeftImage(R.id.left_image);
cardStack.setRightImage(R.id.right_image);
//example of buttons triggering events on the deck
Button btn = (Button) findViewById(R.id.button);
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
cardStack.swipeTopCardLeft(180);
}
});
Button btn2 = (Button) findViewById(R.id.button2);
btn2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
cardStack.swipeTopCardRight(180);
}
});
Button btn3 = (Button) findViewById(R.id.button3);
btn3.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
testData.add("a sample string.");
adapter.notifyDataSetChanged();
}
});
}
