AndroidDevChallenge week1-JetpackCompose

Nav Singh
Nav Singh
Apr 25 · 4 min read
Image header

Today, I will share with you my experience of building Puppy 🐶 adoption app AndroidDevChallenge week1.

Requirements of challenge

All the UI of the app must be written using Jetpack compose.

NavHost, composable, Column, Image, Text, LazyColumn, Row, and Spacer

I created the data class called Pet which holds the data for each puppy item

  • Their is no interaction with internet so, I have added the mock data to create the static pet list for our app
data class Pet(
val id: Int = 0,
val name: String,
val breed: String,
val age: String
) {
companion object {
fun listOfPets(): List<Pet> {
val list = mutableListOf<Pet>()
repeat(21) {
list.add(
Pet(
it,
name = listOfPetNames[it],
breed = listOfBreeds[it],
age = "${it * 2} Days"
)
)
}
return list
}

private val listOfPetNames = listOf(
"Abby", "Abe", "Addie", "Abbott", "Alexis", "Ace", "Alice",
"Aero", "Allie", "Aiden", "Alyssa", "AJ", "Amber", "Albert",
"Angel", "Aspen", "Andy", "Athena", "Angus", "Autumn", "Apollo",
)
private val listOfBreeds = listOf(
"Akbash", "Akita", "Alano Español", "Alapaha Blue Blood Bulldog",
"Alaskan husky", "Alaskan Klee Kai", " Alaskan Malamute",
"Alopekis", "Austrian Black and Tan Hound", "Austrian Pinscher",
"Azawakh", "Bakharwal dog", "Banjara Hound", "Barbado da Terceira",
"Bosnian Coarse-haired Hound", "Boston Terrier", "Bouvier des Ardennes", "Boxer",
"Boykin Spaniel", "Bracco Italiano", "Braque d'Auvergne",
)
}
}

All the UI wrapped into Column which has 2 children

Column(horizontalAlignment = Alignment.CenterHorizontally) {
// UI components goes here
}

App title component

Text(
text = "Puppy adoption app",
style = typography.h4, // material design text style Headline4
textAlign = TextAlign.Center,
)

Composable function called PuppyItem is defined to handle the UI for each Puppy item.

It take 2 parameters NavController and Pet

@Composable
fun PuppyItem(pet: Pet, navController: NavController) {
}
  • NavController used to navigate to detail screen when user tap on any puppy item in list
  • Pet used to provide the data to the UI component for each item

Here is the full code of PuppyItem function

@Composable
fun PuppyItem(pet: Pet, navController: NavController) {
Row(
Modifier
.clickable(
enabled = true,
onClick = {
navController.navigate("PuppyDetails/${pet.id}") {
}
Log.d("TAG", "Puppy: ${pet.age}")
}
)
.border(2.dp, color = Color.Green, shape = CircleShape)
.fillMaxWidth()
.padding(16.dp)
) {
Image(
painter = painterResource(
when (pet.id % 2 == 0) {
true -> R.drawable.dog2
else -> R.drawable.dog_clip
}
),
contentDescription = null,
modifier = Modifier
.width(48.dp)
.height(48.dp),
contentScale = ContentScale.Fit
)
Spacer(
modifier = Modifier
.height(48.dp)
.width(32.dp)
)
Column {
Text(
text = "Name: ${pet.name}",
style = typography.h4
)
Text(
text = "Breed: ${pet.breed}",
style = typography.body1.copy(color = Color.Red)
)
Text(
text = "Age: ${pet.age}",
style = typography.body2.copy(color = Color.Blue)
)
}
}
Spacer(
modifier = Modifier
.height(4.dp)
.fillMaxWidth()
)
}
Puppy item page

on Row’s click user navigate to the detail screen

onClick = {
We have defined the NavHost which has 2 composable with route name defined
navController.navigate("PuppyDetails/${pet.id}") // pet' id passed as argument to PuppyDetails page.
}

NavHost is the Main component of our App which helps to connect 2 pages

// Start building your app here!
@Composable
fun MyApp() {
val navController = rememberNavController()
NavHost(navController, startDestination = "PuppyList") {
composable(route = "PuppyList")
{ PuppiesListPage(navController) }
}

}
  • startDestination It defines the first screen of the app.

Composable used to define the routes

composable(
"PuppyDetails/{dogId}",
arguments = listOf(navArgument("dogId") { type = NavType.IntType })
) { backStackEntry ->
PuppyDetailsPage(backStackEntry.arguments?.getInt("dogId") ?: 0)
}
  • When user tap on the pet item, we pass the id of the tapped pet item to PuppyDetailsPage as an argument of type int which helps to show the details of selected item.

Composable function called PuppyDetailsPage used to render the UI for details page.

@Composable
fun PuppyDetailsPage(dogId: Int) {
Column(
modifier = Modifier
.fillMaxWidth()
.fillMaxHeight(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Image(
painter = painterResource(
when (dogId % 2 == 0) {
true -> R.drawable.dog2
else -> R.drawable.dog_clip
}
),
contentDescription = null,
modifier = Modifier
.width(100.dp)
.height(100.dp),
contentScale = ContentScale.Fit
)

with(Pet.listOfPets()[dogId]) {
Text(text = "Name: $name", style = typography.h4)
Text(text = "Breed: $breed", style = typography.body1)
Text(text = "Age: $age", style = typography.caption)
}
}
}
Puppy detail page
  • That’s all the code you need to create lists using Jetpack compose.
  • If you are familiar with the RecyclerView, you will be surprised that creating lists using Jetpack compose is super easy and very less code.
App Output

👨‍💻👏👏 I hope you learn little bit about Android’s new UI framework in this article 👏👏👨‍💻

For this challenge, I have received the Jetpack trophy 🏆 🎁

Gift box 🎁

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To stay up to date on other topics, follow us on LinkedIn. https://www.linkedin.com/company/nerdfortech

Nav Singh

Written by

Nav Singh

Mobile Software Engineer at Manulife. GDG Organizer at GDG Montreal.

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To stay up to date on other topics, follow us on LinkedIn. https://www.linkedin.com/company/nerdfortech

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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