WhatsApp Status like View: Android

Let’s create a status activity like WhatsApp using RxJava.

First of all, I will create some extension functions that I am going to use in this post later.

Now let’s create XML for the activity whatsapp_status_activity. We are not bothered about the exact layout; it can be customized at any time. It's just for testing.

We need some images to display in status. For now, I am using hardcoded image URLs, but you can modify them to upload them from the gallery.

Add these images to frame layout ll_status . By default, all image views will be gone. We will make them visible one by one based on time duration; we want to show each image.

Now add the progress bar layouts in ll_progress_bar . As you can see in WhatsApp, there is some space between progress bars of different images; for that, I am using margin end for each progress bar except the last one.

We need some variables to control the flow.

mDisposable => We will use it to dispose of the observable.

mCurrentProgress => it will show current progress for the current image view.

mCurrentIndex => It will show the currently selected image index.

Now let’s see how our observable will look like.

We have used intervalRange the operator for emitting the progress. It needs five parameters:

  1. start => It shows the initial value that will be emitted. We have set this to mCurrentProgress . Initially, it's 0, but we will see why I have not put here 0, why I am using mCurrentProgress .
  2. count => It shows the number of emission from this observable. I have already mentioned that I am using max progress as 40. But again I have used 40-mCurrentProgress instead of 40, will describe later.
  3. initial delay => It shows the first emission delay. Which is 0 in our case as we don't want to delay the first emission here.
  4. interval => it shows at how many intervals observable emit data. We have used 100( which is 100 milliseconds).
  5. TimeUnit => 5th parameter shows which time unit you are going to use for the interval. As we have interval 100 and time units in milliseconds, so it will emit next time after 100 milliseconds and so on.

Now let’s see two function moveToNextStatus and updateProgress .

In this function, we are setting the current view as gone and next view as visible. Also, for the next image view, we are setting current progress to 0. We are disposing of the previous observable and creating new for the next image view by calling emitStattusProgress .

Here we are setting progress of current progress bar.

Let’s start this process by showing the first image view and start emitting its progress. And as its progress will reach its max, which is 40 here, it will begin to view the next image and so on.

Now let’s see how we can detect singleTap and longPress , to achieve the pause , resume , previous and next view of status.

Here we have three more function pauseStatus , resumeStatus and onSingleTapClicked .

Here we are pausing the status by disposing it.

While resuming the status, we are just starting emitting again from the progress that was previously done. That’s why we are setting the first parameter of intervalRange as mCurrentProgress and that's why we are setting the second parameter as 40-mCurrentProgress to restrict the count only till 40.

Now let’s see how we can see the previous status by clicking on the left side of the screen and how we can see the next state by clicking on the right side of the screen.

So if the touchpoint is left to middle, we are showing the previous status, and if it’s next to the center, we are displaying the next state.

Here I have used only image view status. You can do it similarly for other views also.

Note: I will implement the same feature for videos, audios, images and text with viewPager in later post.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store