How to create a Photostory like WhatsApp's Stories…

Anyone wonder that to build the story like a WhatsApp's Story like status. So, Today we gonna building the WhatsApp's stories like called “ Photostory”.

Firstly, create a project in android studio and name it Photostory. To start with we gonna require some dependency to work flawlessly. paste this dependencies into build.gradle(app) version and Sync it.

//Glide 
implementation 'com.github.bumptech.glide:glide:4.12.0'
//Stories Progress View
implementation 'com.github.shts:StoriesProgressView:2.0.0'

After that we import the some image into drawable folder.

Then create a Image file that holds the value of image and caption. create a file Image.kt and paste the code below.

data class Image(
    @DrawableRes
    val imageurl : Int,
    val title : String
)

then paste this code in activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@null"
        android:scaleType="centerCrop"
        tools:src="@drawable/sample1" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <View
            android:id="@+id/reverse"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <View
            android:id="@+id/skip"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" />
    </LinearLayout>

    <jp.shts.android.storiesprogressview.StoriesProgressView
        android:id="@+id/stories"
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:layout_gravity="top"
        android:layout_marginTop="8dp"
        android:paddingLeft="8dp"
        android:paddingRight="8dp" />

    <TextView
        android:id="@+id/tvview"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:background="#7f000000"
        android:gravity="center"
        android:textColor="@android:color/white"
        android:textSize="18sp"
        android:textStyle="bold"
        tools:text="Stories" />

</RelativeLayout>

Now, it’s the time for game, the main activity. paste the code below into MainActivity

class MainActivity : AppCompatActivity(), StoriesProgressView.StoriesListener {


    private lateinit var storiesProgressView: StoriesProgressView
    private lateinit var image: ImageView
    private lateinit var textview: TextView

    private var counter = 0
    private val resourse = arrayOf(
            Image(R.drawable.sample1, "Mountain"),
            Image(R.drawable.sample2, "Cruise"),
            Image(R.drawable.sample3, "Lonely"),
            Image(R.drawable.sample4, "Curiosity"),
            Image(R.drawable.sample5, "Blossom"),
            Image(R.drawable.sample6, "Parashute Balloon"),
            Image(R.drawable.sample7, "City light"),
            Image(R.drawable.sample8, "Night Beauty"),
            Image(R.drawable.sample9, "Galaxies"),
            Image(R.drawable.sample10, "Waterfall")
    )

    var pressTime = 0L
    var limit = 500L

    private val onTouchListener: View.OnTouchListener = object : View.OnTouchListener {
        override fun onTouch(v: View?, event: MotionEvent): Boolean {
            when (event.action) {
                MotionEvent.ACTION_DOWN -> {
                    pressTime = System.currentTimeMillis()
                    storiesProgressView!!.pause()
                    return false
                }
                MotionEvent.ACTION_UP -> {
                    val now = System.currentTimeMillis()
                    storiesProgressView!!.resume()
                    return limit < now - pressTime
                }
            }
            return false
        }
    }


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        supportActionBar?.hide()
        window.setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN)

        image = findViewById(R.id.imageview)
        textview = findViewById(R.id.tvview)
        storiesProgressView = findViewById(R.id.stories)

        storiesProgressView.setStoriesCount(resourse.size)
        storiesProgressView.setStoryDuration(3000L)
        storiesProgressView.setStoriesListener(this)
        storiesProgressView.startStories()


        Glide.with(this)
                .load(resourse[counter].imageurl)
                .centerCrop()
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .into(image)
        textview.text = resourse[counter].title

        //Reverse
        val reverse = findViewById<View>(R.id.reverse)
        reverse.setOnClickListener {
            storiesProgressView.reverse()
        }
        reverse.setOnTouchListener(onTouchListener)

        //Skip
        val skip = findViewById<View>(R.id.skip)
        skip.setOnClickListener {
            storiesProgressView.skip()
        }
        skip.setOnTouchListener(onTouchListener)
    }

    override fun onComplete() {
        finish()
    }

    override fun onPrev() {
        if ((counter - 1) < 0) return

        Glide.with(this)
                .load(resourse[--counter].imageurl)
                .centerCrop()
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .into(image)

        textview.text = resourse[counter].title
    }

    override fun onNext() {
        Glide.with(this)
                .load(resourse[++counter].imageurl)
                .centerCrop()
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .into(image)

        textview.text = resourse[counter].title
    }

    override fun onDestroy() {
        storiesProgressView.destroy()
        super.onDestroy()
    }
}

Finally, to reduce memory and improvise the cache add the two line in manifest file.

<application
...
android:hardwareAccelerated="false"
android:largeHeap="true"
...
...
/>

That’s it.. Your App is ready to rollout.

Thanks for Reading…. Checkout the full code in the github repository….

PhotoStory/PhotoStory at master · SaqibAhmed-hub/PhotoStory