Image Switcher Examples

Step by step examples to teach you Image Switcher.

Switch Images with Animation

Before After Image switcher animation library written in Kotlin.

Use this library if you want to switch images with animation. Here is the demo of what this code is about:

Step 1: Install it

Install it via gradle:

allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
  }
}

  .....

dependencies {
      implementation 'com.github.fevziomurtekin:BeforeAfterView:1.0.0'
   }
}

Step 2: Layout

Then add it to your xml layout:

<com.fevziomurtekin.beforeafterview.BeforeAfterView
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           app:bgColor="@android:color/black"
           app:sliderTintColor="@android:color/white"
           app:sliderIconTint="@android:color/white"
           app:afterSrc="@drawable/after"
           app:beforeSrc="@drawable/before"
           app:imageHeightPercent="0.5"
           app:sliderWidthPercent="0.75"
   />

Attributes

Here are the attributes:

• bgColor
• sliderTintColor
• sliderIconTint
• afterSrc
• beforeSrc
• imageHeightPercent
• sliderWidthPercent

Let us look at a full Image Switcher Example based on this library:

Step 1. Design Layouts

For this project let's create the following layouts:

(a). activity_main.xml

Our activity_main layout.

This layout will represent our Main Activity's layout. Specify android.support.constraint.ConstraintLayout as it's root element then inside it place the following widgets:

1. BeforeAfterView

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        android:id="@+id/root"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:background="@android:color/transparent"
        xmlns:android="http://schemas.android.com/apk/res/android">

   <com.fevziomurtekin.beforeafterview.BeforeAfterView
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           app:bgColor="@android:color/black"
           app:sliderTintColor="@android:color/white"
           app:sliderIconTint="@android:color/white"
           app:imageHeightPercent="0.5"
           app:sliderWidthPercent="0.75"
   />

</android.support.constraint.ConstraintLayout>

Step 2. Write Code

Finally we need to write our code as follows:

(a). MainActivity.kt

Our MainActivity class.

Here is the full code:

package replace_with_your_package_name

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import kotlinx.android.synthetic.main.activity_main.*
import kotlin.math.roundToInt

class MainActivity : AppCompatActivity(){

    private var rangeWidth=0

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

    }

}

Reference

Download the code below:

No.	Link
1.	Download Full Code
2.	Read more here.
3.	Follow code author here.