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!!

IIT | Co-Founder @ MindOrks | Building AfterAcademy | Code.all() | Disrupting EdTech | #MakeEveryoneCode | Now I only write at https://blog.mindorks.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store