Skip to content
This repository has been archived by the owner on Mar 3, 2023. It is now read-only.

Android Pending Invites Screen

Miroslav Smukov edited this page Jul 9, 2016 · 8 revisions

Pending Invites Screen

Now that we have the My Contacts screen implemented, it's a good time to implement another, very similar, screen called Pending Invites.

On this screen users will see all the invitations to connect that he received from other users of the app. Here the user will be able to tap on ListView rows to see details of the contacts (like in My Contacts screen). However, we'll also give the user a cool functionality to quickly swipe left or right to dismiss or accept the invitation on the fly.

Implementing the basics

The initial process for adding this screen is almost exact to the My Contacts screen implementation, so I won't be repeating it here. The change set with exact code changes can be found here.

Row Swipe Functionality

I've seen this functionality in lots of new apps, and I expected that this will be something I could use out of the box, but that actually wasn't the case. I then did a quick google search to find some tips & tricks on how to implement this, and that's when I stumbled upon a great github repo from a user called wdullaer. His SwipeActionAdapter gave me all the required functionality in a few short lines of code. wdullaer has great documentation on his repo that I followed pretty closely. Here's how I implemented it:

Including the Library

I added the new library to my build.gradle:

Source Code

dependencies {
    ...
    compile 'com.wdullaer:swipeactionadapter:2.0.0'
}

Creating Layout Resources

I created two background resources for my row swipe events. These background layouts will appear when a user starts swiping the row:

Source Code

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="?android:listPreferredItemHeight"
    android:background="@android:color/holo_red_light"
    android:layoutDirection="rtl">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:layout_marginRight="10dp"
        android:textSize="20sp"
        android:textStyle="bold"
        android:text="@string/dismiss" />
</LinearLayout>

I used the android:layoutDirection="rtl" to align the TextView on the right side of the row. This is a resource for my Dismiss action, and here's for the Accept.

Wiring up the SwipeActionAdapter

Below you can see my implementation that closely followed the guide that is available on wdullaer's great repo.

adapter = new PendingInvitesAdapter(getActivity(), new ArrayList<Contact>());
//wire up the SwipeActionAdapter
swipeAdapter = new SwipeActionAdapter(adapter);
swipeAdapter.setListView(getListView());
setListAdapter(swipeAdapter);

// Set backgrounds for the swipe directions
swipeAdapter.addBackground(DIRECTION_NORMAL_LEFT,R.layout.row_swipe_left_layout)
        .addBackground(DIRECTION_NORMAL_RIGHT,R.layout.row_swipe_right_layout)
        .setFixedBackgrounds(true);

swipeAdapter.setSwipeActionListener(new SwipeActionAdapter.SwipeActionListener(){
    @Override
    public boolean hasActions(int position, SwipeDirection direction){
        if(direction.isLeft()) return true; // Change this to false to disable left swipes
        if(direction.isRight()) return true;
        return false;
    }

    @Override
    public boolean shouldDismiss(int position, SwipeDirection direction){
        // Always dismiss items
        return true;//direction == DIRECTION_NORMAL_LEFT;
    }

    @Override
    public void onSwipe(int[] positionList, SwipeDirection[] directionList){
        for(int i=0;i<positionList.length;i++) {
            SwipeDirection direction = directionList[i];
            int position = positionList[i];
            String action = "";

            switch (direction) {
                case DIRECTION_FAR_LEFT:
                case DIRECTION_NORMAL_LEFT:
                    action = "Dismissed";
                    break;
                case DIRECTION_FAR_RIGHT:
                case DIRECTION_NORMAL_RIGHT:
                    action = "Accepted";
                    break;
            }
            Toast.makeText(
                    getActivity(),
                    action + " invite from " + adapter.getItem(position).getFullName(),
                    Toast.LENGTH_SHORT
            ).show();
            adapter.remove(position);
            adapter.notifyDataSetChanged();
            swipeAdapter.notifyDataSetChanged();
        }
    }
});

This code is added to PendingInvitesFragment class, and all it does now (apart from setting up the swiping functionality) is removing the swiped rows and reporting a toast message about the action that was just executed.

Conclusion

One more screen added in less than 30 minutes. A combination of already implemented functionality, and the use of great 3rd party library helped a lot.

Pending Invites Screen

References

Commits

Clone this wiki locally