Modifying Android Tinder Swipe View Example to support auto resize

Janishar Ali
Oct 8, 2016 · 1 min read

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

Janishar Ali

Written by

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade