Issue
How would I go about displaying multiple images the way Tinder does it: it should display the next image when I click on the right side of the image and display the previous image when I click on the left side of the image.
It should also display a little arrow to the right or left only when clicked and show somehow which picture is being displayed (with little bars like tinder or dots or something).
Is there a library for that?
EDIT: To clarify: I already implemented the Tinder swipe-cards with the help of the Diolor/Swipecards library. What I'm suprisingly a little stuck with is implementing the image gallery INSIDE the Tinder swipecards. Only the part seen in the picture above.
Solution
My solution was adding two pictures of arrows, putting two layouts above them, then adding onClickListeners for the Layouts, which select the next/previous picture in the adapter to be displayed in the ImageView.
The layout .xml file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:clipToPadding="false"
android:outlineProvider="bounds"
android:paddingLeft="10sp"
android:paddingTop="10sp"
android:paddingRight="10sp"
android:paddingBottom="100sp">
<android.support.v7.widget.CardView
android:id="@+id/cardView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:elevation="2dp"
app:cardCornerRadius="4dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/imageViewMainBackground"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/ic_user_default" />
<ImageView
android:id="@+id/imageNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|end"
android:scaleType="centerCrop"
android:src="@drawable/outline_keyboard_arrow_right_black_48" />
<ImageView
android:id="@+id/imagePrevious"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:scaleType="centerCrop"
android:src="@drawable/outline_keyboard_arrow_left_black_48" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<LinearLayout
android:id="@+id/previousLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".50"
android:orientation="horizontal" />
<LinearLayout
android:id="@+id/nextLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="end"
android:layout_weight=".50"
android:orientation="horizontal" />
</LinearLayout>
<TextView
android:id="@+id/nameTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:padding="20sp"
android:shadowColor="@color/colorBlack"
android:shadowRadius="20"
android:textColor="@color/colorWhite"
android:textSize="30sp"
tools:text="hello" />
<ImageView
android:id="@+id/infoImageViewItemCard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:scaleType="centerCrop"
android:padding="20sp"
android:shadowColor="@color/colorBlack"
android:shadowRadius="20"
android:src="@drawable/outline_info_white_48" />
<LinearLayout
android:id="@+id/bottomLayout"
android:layout_width="match_parent"
android:layout_height="110dp"
android:layout_gravity="bottom"
android:orientation="horizontal" />
</FrameLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Answered By - murkr
Answer Checked By - Cary Denson (JavaFixing Admin)