Thuy's Blog

Hack showcase: WeekPager2

October 01, 2019

Source code is available on my GitHub.

What’s WeekPager2?

This weekend hack was inspired by a design from UpLabs. Basically WeekPager2 is a scrollable calendar view that shows only one week per page. We can navigate to the other weeks by swiping left or swiping right. WeekPager2 is built by using the new ViewPager2.

WeekPager2 will perform a little animation when clicking on a date. As for the newly selected date, a red circle will fade in. The day-of-month text color will also animate from black to white.

A few new things I’ve learned

Date & time logic made easy with ThreeTen

I always avoid the default, notoriously bad Date, Calendar and Time from Android SDK when it comes to implementing date & time logic. Instead, I prefer ThreeTen with its thread-safe and immutable APIs.

With WeekPager2, I encountered a new use-case that, given a week position relative to the position of the current week, I need to figure out all the dates within that week. The beginning day of that week may be Monday or Sunday depending on a given locale. For example, it will be Sunday for US and Monday for Germany.

fun getAllDatesForThisWeek(weekPosition: Long): List<LocalDate> {
  val now: LocalDate = getNow()
  val weekCountDiff = weekPosition - getCurrentWeekPosition()
  val firstDateOfWeek = now
    .plusWeeks(weekCountDiff)
    .run {
      with(WeekFields.of(getLocale()).firstDayOfWeek)
    }
  return dateIndices.map { firstDateOfWeek.plusDays(it) }
}

Trying Flow instead of LinearLayout

Flow is a new API introduced in ConstraintLayout 2.0. With WeekPager2, I used Flow to position and stretch all 7 date layouts within a week layout. I could have achieved the same with LinearLayout in a simpler manner but the point here is to try and learn new thing.

flow

Animating colors with ValueAnimator.ofArgb()

I’ve used ValueAnimator for a couple of times but never with the ofArgb() factory. Such a convenient way to animate a color A to a color B!

ValueAnimator.ofArgb(
  ContextCompat.getColor(context, android.R.color.black),
  ContextCompat.getColor(context, android.R.color.white)
).apply {
  addUpdateListener {
    setTextColor(it.animatedValue as Int)
  }
  start()
}

Android emulators now support recording into GIFs

This is really amazing! As of emulator version 29.2.2-5904653, a new option is added to export screen records into GIF (besides WebM). The quality of the exported GIFs is very high.

screen record

Previously I had to convert the MP4 (or WebM) files into GIFs via FFmpeg.

Editing GIFs with Adobe Photoshop

Though I feel like using a tank just to kill a mosquito but everything is very straightforward with Adobe Photoshop. I can easily delete some redundant frames in the beginning of the GIF. Cropping can also be done once and it applies to all frames.

photoshop gif


Thuy Trinh

Written by Thuy Trinh who lives and works in Frankfurt, Germany building robust Android apps. You should follow him on Twitter