Modifying Android Tinder Swipe View Example to support auto resize

This thread is in continuation to the Android Tinder Swipe View Example. it modifies the example codes to auto fit various screen sizes. It also fixes the issue of card overlapping the like/dislike buttons and making them unclickable.

Please do the following modifications to the example codes.

1. Use 0.2.4 version or above

compile 'com.mindorks:placeholderview:0.2.4'

2. In tinder_card_view.xml replace the below codes

   android:layout_width="350dp"
    android:layout_height="425dp"
    android:layout_marginBottom="50dp"

with this

android:layout_width="match_parent"
android:layout_height="match_parent"

3. Add two methods to Utils.java

public static Point getDisplaySize(WindowManager windowManager){
try {
if(Build.VERSION.SDK_INT > 16) {
            Display display = windowManager.getDefaultDisplay();
            DisplayMetrics displayMetrics = new DisplayMetrics();
            display.getMetrics(displayMetrics);
return new Point(displayMetrics.widthPixels, displayMetrics.heightPixels);
        }else{
return new Point(0, 0);
        }
    }catch (Exception e){
        e.printStackTrace();
return new Point(0, 0);
    }
}

public static int dpToPx(int dp) {
return (int) (dp * Resources.getSystem().getDisplayMetrics().density);
}

4. Modify OnCreate method of MainActivity.java

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

mSwipeView = (SwipePlaceHolderView)findViewById(R.id.swipeView);
mContext = getApplicationContext();

int bottomMargin = Utils.dpToPx(160);
    Point windowSize = Utils.getDisplaySize(getWindowManager());
mSwipeView.getBuilder()
            .setDisplayViewCount(3)
            .setSwipeDecor(new SwipeDecor()
                    .setViewWidth(windowSize.x)
                    .setViewHeight(windowSize.y - bottomMargin)
                    .setViewGravity(Gravity.TOP)
                    .setPaddingTop(20)
                    .setRelativeScale(0.01f)
                    .setSwipeInMsgLayoutId(R.layout.tinder_swipe_in_msg_view)
                    .setSwipeOutMsgLayoutId(R.layout.tinder_swipe_out_msg_view));


for(Profile profile : Utils.loadProfiles(this.getApplicationContext())){
mSwipeView.addView(new TinderCard(mContext, profile, mSwipeView));
    }

    findViewById(R.id.rejectBtn).setOnClickListener(new View.OnClickListener() {
        @Override
public void onClick(View v) {
mSwipeView.doSwipe(false);
        }
    });

    findViewById(R.id.acceptBtn).setOnClickListener(new View.OnClickListener() {
        @Override
public void onClick(View v) {
mSwipeView.doSwipe(true);
        }
    });
}

Notice the changes:

.setViewWidth(windowSize.x)
.setViewHeight(windowSize.y - bottomMargin)
.setViewGravity(Gravity.TOP)

They help resize the cards to fit screens of all sizes, with or without on screen bottom navigation bar.

The source code is available here

Hope it solves the frequently asked question.

Coders Rock!!