Android ListView Swipe Right and Left to Accept and Reject
I want to develop a list view that when swiped left to right - displays in the left corner an accept (true) icon (non clickable - show just a color change when swiping left to right), like the following screen shot:
When I swipe from left to right it will accept (calling 'accept' API), and when I swipe right to left it will display something like this:
This is done in iOS, but I can't find how to do this in Android, I tried googling but couldn't find exactly what I want.
I tried the following example: http://www.tutecentral.com/android-swipe-listview/
but in that example, when I swipe left to right and right to left, the same onOpened(..) method is called so it's confusing to know when to call accept and when to call reject API because the same method is called on any type of swipe.
and I also want the accept (on left side) and reject (on right side) images to display only when I swipe left-right or right-left, but when I take the finger up they must disappear and the entire ListView should be displayed (never show both side images at the same time).
So any one please help me to understand how to do this.
My question is somewhat confusing but I don't know how to explain the entire animation so I tried to explain like the above.
If any one can help me it would be very appreciated.
Answer
Solution number 1 :
You Have to do like following to reach "near" to your functionality,
Wrap the adapter of your ListView
Like following :
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Create an Adapter for your content
String[] content = new String[20];
for (int i=0;i<20;i++) content[i] = "Row "+(i+1);
ArrayAdapter<String> stringAdapter = new ArrayAdapter<String>(
this,
R.layout.row_bg,
R.id.text,
new ArrayList<String>(Arrays.asList(content))
);
// Wrap your content in a SwipeActionAdapter
mAdapter = new SwipeActionAdapter(stringAdapter);
// Pass a reference of your ListView to the SwipeActionAdapter
mAdapter.setListView(getListView());
// Set the SwipeActionAdapter as the Adapter for your ListView
setListAdapter(mAdapter);
}
Create a background layout for each swipe direction
Like Following:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Create an Adapter for your content
String[] content = new String[20];
for (int i=0;i<20;i++) content[i] = "Row "+(i+1);
ArrayAdapter<String> stringAdapter = new ArrayAdapter<String>(
this,
R.layout.row_bg,
R.id.text,
new ArrayList<String>(Arrays.asList(content))
);
// Wrap your content in a SwipeActionAdapter
mAdapter = new SwipeActionAdapter(stringAdapter);
// Pass a reference of your ListView to the SwipeActionAdapter
mAdapter.setListView(getListView());
// Set the SwipeActionAdapter as the Adapter for your ListView
setListAdapter(mAdapter);
// Set backgrounds for the swipe directions
mAdapter.addBackground(SwipeDirections.DIRECTION_FAR_LEFT,R.layout.row_bg_left_far)
.addBackground(SwipeDirections.DIRECTION_NORMAL_LEFT,R.layout.row_bg_left)
.addBackground(SwipeDirections.DIRECTION_FAR_RIGHT,R.layout.row_bg_right_far)
.addBackground(SwipeDirections.DIRECTION_NORMAL_RIGHT,R.layout.row_bg_right);
}
You got both libraries and Example from the here : https://github.com/wdullaer/SwipeActionAdapter
This will not exact like you want, but i hope this will help you so much to fulfilled your functionality.
Solution number 2 :
Solution 2 is about Changing some code in your Used code : http://www.tutecentral.com/android-swipe-listview/
i had try your code from the link http://www.tutecentral.com/android-swipe-listview/ and changing some code and successfully solve your problem(your confusion) about onOpened(..) method ( called left to right and vice versa )
First change :
custom_row.xml layout file has three button swipe_button1 to 3 , remove middle of them.
Copy paste following code for remain two button :
<Button android:id="@+id/swipe_button1" android:layout_width="48dp" android:layout_height="48dp" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:background="@drawable/your_accept_image" /> <Button android:id="@+id/swipe_button3" style="@style/MyListButtonAction" android:layout_width="48dp" android:layout_height="48dp" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:background="@drawable/your_reject_image" />
Remains code same for this layout.
Second change :
So now your accept and reject and list code is ready , now discuss about onOpened(..) method.
Confusion solution 1- You told , your onOpend(...) method called same both left to right and vice-verse
-> just to change following :
public void onOpened(int position, boolean toRight) {
if(toRight)
{
// for left to right your api calling here
swipelistview.closeAnimate(position);
}
else
{
// for right to left your api calling here
swipelistview.closeAnimate(position);
}
}
Confusion solution 2 when i take finger up it will must display entire listview or listview sides should retain it corners so its not working
-> i already answered it in above
called swipelistview.closeAnimate(position); in both if else, it hide left accept and right reject image when your your swipe left and right over.
So final code is following :
Entire cutom_row.xml layout
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:id="@+id/back"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tag="back" >
<Button
android:id="@+id/swipe_button1"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="@drawable/accept_image" />
<Button
android:id="@+id/swipe_button3"
style="@style/MyListButtonAction"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="@drawable/reject_image" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/front"
style="@style/MyListFrontContent"
android:orientation="vertical"
android:tag="front" >
<ImageView
android:id="@+id/example_image"
style="@style/MyListImage" />
<TextView
android:id="@+id/example_itemname"
style="@style/MyListTitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/example_image" />
</RelativeLayout>
</FrameLayout>
Entire MainActivity.java
public class MainActivity extends Activity {
SwipeListView swipelistview;
ItemAdapter adapter;
List<ItemRow> itemData;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
swipelistview=(SwipeListView)findViewById(R.id.example_swipe_lv_list);
itemData=new ArrayList<ItemRow>();
adapter=new ItemAdapter(this,R.layout.custom_row,itemData);
swipelistview.setSwipeListViewListener(new BaseSwipeListViewListener() {
@Override
public void onOpened(int position, boolean toRight) {
if(toRight)
{
// for left to right your api calling here
swipelistview.closeAnimate(position);
}
else
{
// for right to left your api calling here
swipelistview.closeAnimate(position);
}
}
@Override
public void onClosed(int position, boolean fromRight) {
// close list slide
}
@Override
public void onListChanged() {
}
@Override
public void onMove(int position, float x) {
}
@Override
public void onStartOpen(int position, int action, boolean right) {
Log.d("swipe", String.format("onStartOpen %d - action %d", position, action));
}
@Override
public void onStartClose(int position, boolean right) {
Log.d("swipe", String.format("onStartClose %d", position));
}
@Override
public void onClickFrontView(int position) {
Log.d("swipe", String.format("onClickFrontView %d", position));
}
@Override
public void onClickBackView(int position) {
Log.d("swipe", String.format("onClickBackView %d", position));
swipelistview.closeAnimate(position);//when you touch back view it will close
}
@Override
public void onDismiss(int[] reverseSortedPositions) {
}
});
//These are the swipe listview settings. you can change these
//setting as your requirement
swipelistview.setSwipeMode(SwipeListView.SWIPE_MODE_BOTH); // there are five swiping modes
// swipelistview.setSwipeActionLeft(SwipeListView.SWIPE_ACTION_DISMISS); //there are four swipe actions
swipelistview.setSwipeActionRight(SwipeListView.SWIPE_ACTION_REVEAL);
swipelistview.setOffsetLeft(convertDpToPixel(0f)); // left side offset
swipelistview.setOffsetRight(convertDpToPixel(80f)); // right side offset
swipelistview.setAnimationTime(500); // Animation time
swipelistview.setSwipeOpenOnLongPress(true); // enable or disable SwipeOpenOnLongPress
swipelistview.setAdapter(adapter);
for(int i=0;i<10;i++)
{
itemData.add(new ItemRow("Swipe Item"+ i,getResources().getDrawable(R.drawable.ic_launcher) ));
}
adapter.notifyDataSetChanged();
}
public int convertDpToPixel(float dp) {
DisplayMetrics metrics = getResources().getDisplayMetrics();
float px = dp * (metrics.densityDpi / 160f);
return (int) px;
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
Other code and library remains same, It helpful to you and other also, So enjoy.