Image Sliding Effect in Android

 What is the Image Sliding Effect?

Sometimes we notice some website has an auto sliding image on the top just like the following.


this is called the sliding effect.

The most important thing is you can use this effect in your own android app via some XML code in android studio.

Below is the step to implement it easily.

Sliding Effect is two types

  1. Auto sliding effect
  2. Manual sliding effect

1. Auto sliding effect:

In this effect the photo change automatically. You can do this by ViewFlipper view in android studio. You can know more about ViewFlipper from the official android documentation. Below is the XML code for this effect. We just need to paste the code in your XML layout where you want the sliding effect. We don't need to change the java file.

<ViewFlipper
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:autoStart="true"
android:id="@+id/sliding_image"
android:flipInterval="3000">
<ImageView
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="@drawable/jatardeul"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="@drawable/raj_hotel"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="@drawable/raidighi_college"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="@drawable/raidighi_high_school"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="@drawable/raidighi_rural_hospital"/>

</ViewFlipper>


The below is the design










2. Manual Image Sliding Effect :

The difference is the design has two buttons. Below the design



for this, the XML code is the same as described before. So paste it in your XML layout where you want to display the image sliding effect and next you just add two buttons in the java code for this page. Below is the code


Resources:
https://medium.com/imageslider-in-android-studio/image-slider-9097d693986

Post a Comment

0 Comments