social media storyview android library

Hi Guys, Welcome to Proto Coders Point, In this android Tutorial we will make use of a StoryView android library developed by Ankit Kumar bxute to show stories like social media.

WhatsApp like Story/status view in android

A Android Library for social media stories/status.

DEMO OF FINAL APP OUTPUT

THAT SHOWS STORY VIEW

How to add StoryView in Android Application?

Ok Then, let’s begin adding this library in our android project.

Step 1: Create new android project in android studio

offcourse you need to createΒ  a new android project or you just open any existing android project is yu have.

In Android Studio > File > New > New Project

Give a name to this project, In my case i have named it asΒ β€œSocial Media StoryView”.Β 

Then Hit the NEXT BUTTON.

Step 2: Add maven jitpack

open built.gradle(root level) and add this maven jitpack

allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' }  // add this line 
    }
}

Step 3: Add the Dependencies for StoryView library

Then, Open build.gradle (App level) and add this dependencies

dependencies {
   implementation 'com.github.bxute:StoryView:v1.0'  // add this line

}

After adding both the maven and StoryView Dependencies now hit that Sync now button.

Step 4: Add the xml code in activitymain.xml file

open activitymain.xml file and add the below lines of xml code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:layout_margin="10dp"
    android:padding="10dp"
    android:orientation="horizontal">


    <xute.storyview.StoryView
        android:id="@+id/storyView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        app:spaceBetweenImageAndIndicator="1dp"
        app:storyImageRadius="10dp"
        app:storyItemIndicatorWidth="1dp" />   <!-- Here is the Story view preview on tap will expand and show full screen stories -->

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="15sp"
        android:paddingTop="10dp"
        android:layout_marginStart="10dp"
        android:textStyle="bold"
        android:text="My Status"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12sp"
            android:layout_marginStart="10dp"
            android:text="Today, 2.31 PM"/>
    </LinearLayout>

</LinearLayout>

Step 5: Add java code for StoryView

Then, Now open MainActivity.java file and copy paste the below lines of code in it

package com.protocoderspoint.socialmediastoryview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import java.util.ArrayList;

import xute.storyview.StoryModel;
import xute.storyview.StoryView;

public class MainActivity extends AppCompatActivity {
    StoryView storyView;   // get the object for StoryView

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       storyView = findViewById(R.id.storyView); // find the XML view using findViewById
        storyView.resetStoryVisits(); // reset the storyview
        
        ArrayList<StoryModel> StoriesList = new ArrayList<>();  // create a Array list of Stories

        StoriesList.add(new StoryModel("https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80","Status 1","Yesterday"));
        StoriesList.add(new StoryModel("https://www.bigstockphoto.com/images/homepage/module-6.jpg","Status 2","10:15 PM"));
        StoriesList.add(new StoryModel("https://www.gettyimages.com/gi-resources/images/500px/983794168.jpg","Satus 3","Today,2:31 PM"));
        storyView.setImageUris(StoriesList);  // finally set the stories to storyview
    }
}

There you go..! your android app is ready to show Stories like any other social media application.

If you are interested in flutter check out how to show Story view in flutter app

RELATED ARTICLESMORE FROM AUTHOR