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.

fun ImageView.loadImage(imageUrl:String) {
val req = Glide.with(this)
.load(imageUrl)
.into(this)
}
fun View.show() {
if (this.visibility != View.VISIBLE)
this.visibility = View.VISIBLE
}
fun View.gone() {
if (this.visibility != View.GONE)
this.visibility = View.GONE
}
fun Context.getScreenWidth(): Int {
val metrics = this.resources.displayMetrics
return metrics.widthPixels
}
fun Context.convertDpToPixel(dp: Float): Float {
val resources = this.resources
val metrics = resources.displayMetrics
return dp * (metrics.densityDpi / 160f)
}

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/ll_progress_bar"
android:layout_width="match_parent"
android:orientation="horizontal"
android:background="#4D4D4D"
android:layout_height="wrap_content"/>
<FrameLayout
android:id="@+id/ll_status"
android:layout_below="@id/ll_progress_bar"
android:layout_width="match_parent"
android:background="#000000"
android:layout_height="match_parent"/>
</RelativeLayout>

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.

private val imagesList = mutableListOf(  "https://www.fillmurray.com/640/360",                                                                                           "https://loremflickr.com/640/360", "https://www.placecage.com/640/360", "https://placekitten.com/640/360")

Add these images to frame layout . 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.

private fun setImageStatusData() {
imagesList.forEach { imageUrl->
val imageView: ImageView = ImageView(this)
imageView.layoutParams = ViewGroup.LayoutParams(
FrameLayout.LayoutParams.MATCH_PARENT,
FrameLayout.LayoutParams.MATCH_PARENT
)
imageView.gone()
imageView.loadImage(imageUrl)
ll_status.addView(imageView)
}

Now add the progress bar layouts in . 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.

private fun setProgressData() {
ll_progress_bar.weightSum = imagesList.size.toFloat()
imagesList.forEachIndexed { index, progressData ->
val progressBar: ProgressBar = ProgressBar(this, null, android.R.attr.progressBarStyleHorizontal) //horizontal progress bar
val params = LinearLayout.LayoutParams(
FrameLayout.LayoutParams.MATCH_PARENT,
FrameLayout.LayoutParams.WRAP_CONTENT, 1.0f)
params.height = convertDpToPixel(8f).toInt()
if (index != 3) {
params.marginEnd = convertDpToPixel(10f).toInt()
}
progressBar.layoutParams = params
progressBar.max = 40 // max progress i am using is 40 for
//each progress bar you can modify it
progressBar.indeterminateDrawable.setColorFilter(Color.BLACK, PorterDuff.Mode.MULTIPLY);
progressBar.progress = 0 //initial progress
ll_progress_bar.addView(progressBar)
}
}

We need some variables to control the flow.

var mDisposable: Disposable? = null
var mCurrentProgress: Long = 0
var mCurrentIndex: Int = 0

We will use it to dispose of the observable.

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

It will show the currently selected image index.

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

private fun emitStatusProgress() {
mDisposable = Observable.intervalRange(mCurrentProgress, 40-mCurrentProgress, 0, 100, TimeUnit.MILLISECONDS)
.observeOn(Schedulers.computation())
.subscribeOn(AndroidSchedulers.mainThread())
.doOnComplete {
moveToNextStatus()
}
.subscribe({
updateProgress(it)
}, {
it
.printStackTrace()
})
}

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

  1. => It shows the initial value that will be emitted. We have set this to . Initially, it's 0, but we will see why I have not put here 0, why I am using .
  2. => 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 instead of 40, will describe later.
  3. => It shows the first emission delay. Which is 0 in our case as we don't want to delay the first emission here.
  4. => it shows at how many intervals observable emit data. We have used 100( which is 100 milliseconds).
  5. => 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 and .

private fun moveToNextStatus() {
if ( mCurrentIndex < imagesList.size-1) {
mCurrentProgress = 0
mDisposable?.dispose()
mDisposable = null
runOnUiThread {
ll_status[mCurrentIndex].gone()
mCurrentIndex++
ll_status[mCurrentIndex].show()
}
if (mCurrentIndex != imagesList.size-1)
emitStatusProgress()
} else {
mDisposable?.dispose()
mDisposable = null
}
}

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 .

private fun updateProgress(progress: Long) {
mCurrentProgress = progress
runOnUiThread {
(ll_progress_bar[mCurrentIndex] as? ProgressBar)?.progress = progress.toInt()
}
}

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.

private fun startViewing() {
ll_status[0].show()
emitStatusProgress()
}

Now let’s see how we can detect , to achieve the , , and view of status.

var startTime: Long = System.currentTimeMillis()
private val onTouchListener = OnTouchListener { v, event ->
when (event.action) {
MotionEvent.ACTION_DOWN -> {
startTime = System.currentTimeMillis()
pauseStatus()
return@OnTouchListener true
}
MotionEvent.ACTION_UP -> {
if (System.currentTimeMillis() - startTime > 2000) {
resumeStatus()
} else {
onSingleTapClicked(event.x)
}
startTime = 0
return@OnTouchListener true
}
MotionEvent.ACTION_BUTTON_RELEASE -> {
resumeStatus()
return@OnTouchListener true
}
}
false
}

Here we have three more function , and .

private fun pauseStatus() {
mDisposable?.dispose()
mDisposable = null
}

Here we are pausing the status by disposing it.

private fun resumeStatus() {
emitStatusProgress()
}

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 as and that's why we are setting the second parameter as 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.

private fun onSingleTapClicked(x: Float) {
if (x < getScreenWidth()/2) {
startPreviousStatus()
} else {
startStatusNext()
}
}

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.

private fun startPreviousStatus() {
mCurrentProgress = 0
runOnUiThread {
if (mCurrentIndex != 0) {
(ll_progress_bar[mCurrentIndex] as? ProgressBar)?.progress = 0
ll_status[mCurrentIndex].gone()
mCurrentIndex--
ll_status[mCurrentIndex].show()
if (mCurrentIndex != imagesList.size-1)
emitStatusProgress()
} else {
mCurrentIndex = 0
(ll_progress_bar[mCurrentIndex] as? ProgressBar)?.progress = 0
ll_status[mCurrentIndex].show()
emitStatusProgress()
}
}
}
private fun startStatusNext() {
mCurrentProgress = 0
runOnUiThread {
if (mCurrentIndex != imagesList.size-1) {
(ll_progress_bar[mCurrentIndex] as? ProgressBar)?.progress = 40
ll_status[mCurrentIndex].gone()
mCurrentIndex++
ll_status[mCurrentIndex].show()
(ll_progress_bar[mCurrentIndex] as? ProgressBar)?.progress = 0
emitStatusProgress()
}
}
}

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.

Working remotely as Android Developer