View Flipper Implementation

Hello there everyone,

This week we are going to see how to implement VIEW FLIPPER in Android with IMAGES.

The following code will help you implement a basic view flipper in your Android application

APP.GRADLE : (DEPENDENCIES ONLY)

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:27.0.2'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    compile 'com.google.android.gms:play-services-ads:11.8.0'
    compile 'com.android.support:design:27.0.2'
    testCompile 'junit:junit:4.12'
}

MAIN.XML :

<ViewFlipper
    android:id="@+id/payViewFlipper"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/adView"
    android:layout_alignParentStart="true"
    android:layout_below="@+id/paymentTextView"
    android:layout_centerVertical="true">

    <ImageView
        android:id="@+id/paymentSamsungImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/payment_mode_name"
        app:srcCompat="@drawable/samsungpay" />

    <ImageView
        android:id="@+id/paymentCardImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/payment_mode_name"
        app:srcCompat="@drawable/debitcreditcard" />

    <ImageView
        android:id="@+id/paymentSodexoImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/payment_mode_name"
        app:srcCompat="@drawable/sodexo" />

    <ImageView
        android:id="@+id/paymentAmericanImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/payment_mode_name"
        app:srcCompat="@drawable/americanexpress" />

    <ImageView
        android:id="@+id/paymentPaytmImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/payment_mode_name"
        app:srcCompat="@drawable/paytm" />

</ViewFlipper>

MAIN-ACTIVITY.JAVA :

public class MainActivity extends AppCompatActivity {

private ViewFlipper payViewFlipper;

@Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 payViewFlipper = this.findViewById(R.id.payViewFlipper); // intializing component
 payViewFlipper.setFlipInterval(3000); // time interval to load next image
 payViewFlipper.animate(); // animation effect
 payViewFlipper.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left)); // fade left
 payViewFlipper.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right)); //fade right
 payViewFlipper.startFlipping(); // to start flipping in app
 }
}

NOTE:

VIEW FLIPPER COMPONENT IS MOSTLY USED TO SHOWCASE OFFERS IN MANY APPS