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