Alright, in this last part of the series, we’ll be looking into implementing the detail view of our app that one navigates to from the list view that we’ve successfully implemented in the previous parts.

In case you’re not fond of reading blog posts, I’ve also turned this 4-part Jetpack Compose series into a 13-minute speed code video with some laid back music for you to watch and relax to! 😊

For a quick recap, here’s where we left our app after implementing the navigation from the list view to the detail view in Part III:

If you’ve been following my series of posts regarding RecyclerView (LazyColumn) in Jetpack Compose, chances are, you might have already accomplished most of what we wanted to achieve with the Puppy Adoption app.

For a quick recap, here’s where we left our app after styling it in Part II:

As of Part I, we successfully implemented a RecyclerView (known as LazyColumn in Compose), populating it with a list of puppies that we have for adoption. 🐶

But as I mentioned, we still have some things to do before we call it a complete Compose app. The two things left now are:

  1. To style the app to our final look.
  2. To implement a detailed view screen.

In case you’re not fond of reading blog posts, I’ve also turned this 4-part Jetpack Compose series into a 13-minute speed code video with some laid back music for you to watch and relax…

If you’re new to Jetpack Compose and looking at all the cool UI screens and animations around the internet like me, you’re probably a bit overwhelmed but also curious about how things work in compose.

Since I’m new to learning Jetpack Compose like most of you, the recent #AndroidDevChallenge was a good opportunity for me to get my hands dirty and write some Jetpack Compose UIs. Since I learnt tons of stuff with a basic app, I thought my learnings would make a good series of blog posts to help all of you.

With this series of blog posts, we’ll…

Recently, I got myself engaged in a new world of Android development: publishing an open source Android library.

I can say that the struggle of publishing the library was real after realizing that I spent more time publishing the library than writing the entire library itself! 🤦‍♂️

After getting help from a lot of blogposts online and a lot of trial and error, I finally was able to publish it (I credit Márton Braun whose blogpost was a huge help for me).

I learnt that not only was it a lot of hard manual work to publish a library, but…

If you’re into tiny details and interactions in the app like me, something probably always annoy you when the interaction is just not too perfect.

While I covered almost all the things there was about creating a Gmail like Navigation Drawer in the first part, this story is just about adding that tiny ripple effect to when you press the navigation drawer items.

To look into the different before and after adding the ripple effect, here are two GIFs:

I didn’t plan to write this at first since my last tutorial covers pretty much everything about MotionLayout I intended to write about.


I received questions on social media about this one action several times, which is about how to move to next screen after our animation is complete. I thought it’d be easy to figure out on your own but when I looked around, I figured that there aren’t very many resources for MotionLayout yet.

Also, my last tutorial is a bit long to follow for beginners (I tend to keep beginners in mind when writing blog posts…

If you’ve been following me on Medium for a while, chances are, you might have passed by my blog posts regarding an easy approach to Navigation Drawer and styling it:

Since those posts are more thorough, I know that it’s intimidating to consume so much knowledge all at once. And I know that because I received a few DMs asking about styling specific elements in the Navigation Drawer after those posts.

Also, a personal opinion: I think that when you know exactly what you want to create, you tend to explore the component so much better. …

Remember the Twitter’s “oh so famous” splash screen that everyone talked about and had their version to imitate it? It’s now easier than ever to achieve that with the new MotionLayout from the Android Jetpack library. And that’s what we’ll create in this post and in addition, learn some basics about how MotionLayout works.

For those who wonder about the Twitter splash screen, here’s the animation that we’re going to achieve in this post:

With Android 9 (API level 28), Google officially started supporting what’s famously known as the notch, a cutout display at the top (because the last two years were the years of the notch?). I can’t claim that but with the notch support, most of the brands came out with their version of a cutout display and with that, we as developers need to think about yet another edge case, especially if we’re working with a completely immersive experience.

To give you a little knowledge of what I’ve researched, what I noticed while dealing with the notch is that the devices’…

Waseef Akhtar

Android Developer at Degoo Backup AB.

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