androidimage-gallerytinder

android: Displaying multiple images like INSIDE the Tinder-cards


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.

enter image description here

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>