How to Create Stories View in Android

Stories are now one of the most popular features on many different apps, including WhatsApp, LinkedIn, Instagram, and many others. In this tutorial, we'll look at how to implement a similar style of display in our Android app.

In this article, you will learn how to create your Stories view Example of nested Stories view in Android. So let’s take example of nested Stories view  in Android of Mobile application.   

 Add below Dependencies  

implementation(group = "com.github.shts", name = "StoriesProgressView", version = "3.0.0")

Step-by-Step Implementation 

​Step 1: Create a New Project in Android ​studio (File >new  project).


Step 2: Create an main_activity.xml file in your layout folder . path (res>layout) 

Implement the same in​voke the following code inside main_activity.xml file.  

 <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity3">


<jp.shts.android.storiesprogressview.StoriesProgressView
android:id="@+id/stories"
android:layout_width="match_parent"
android:layout_height="3dp"
android:layout_gravity="top"
android:background="@color/blue"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
android:paddingLeft="8dp"
android:paddingRight="8dp" />
<ImageView
android:id="@+id/image"
app:layout_constraintTop_toBottomOf="@+id/stories"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@null"
android:layout_margin="10dp"
/>

</androidx.constraintlayout.widget.ConstraintLayout>
Step 3: Create an MainActivity.kt file in your layout folder 

Implement the same in​voke the following code inside MainActivity.kt file.  

 import android.os.Bundle
import android.widget.ImageView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import jp.shts.android.storiesprogressview.StoriesProgressView

class MainActivity3 : AppCompatActivity(), StoriesProgressView.StoriesListener {
val numbers: IntArray = intArrayOf(
R.drawable.company_logo,
R.drawable.download,
R.drawable.company_logo,
R.drawable.download,
R.drawable.company_logo
)
var imageview: ImageView? = null
private var counter = 0;

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main4)
val storiesProgressView = findViewById<StoriesProgressView>(
R.id.stories
)
storiesProgressView.setStoriesCount(numbers.size)
storiesProgressView.setStoryDuration(3000L)
imageview = findViewById(R.id.image);

imageview?.setImageResource(numbers[counter])
storiesProgressView.setStoriesListener(this);
storiesProgressView.startStories(counter);
}

override fun onNext() {
imageview?.setImageResource(numbers[++counter]);
}

override fun onPrev() {
if ((counter - 1) < 0) return;
imageview?.setImageResource(numbers[--counter]);
}

override fun onComplete() {
Toast.makeText(this@MainActivity3, "Done!", Toast.LENGTH_SHORT).show()
}
}
Step 4 : Output of the above example.

                                                                                        Happy coding!                                                                                 

365Bloggy July 25, 2024
Share this post
Tags
SUBSCRIBE THIS FORM


Archive