1
\$\begingroup\$

The app is based upon an exercise from a Udemy-course. The purpose is to become familiar with LazyColumns. I've enhanced the exercise with a Details-view and a navigation between LazyColumn and Details.

List View Details View

Here are the essential code-snippets:

// MainActivity with the definition of the navigation
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DogsLazyListTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    val navController = rememberNavController()
                    NavHost(navController = navController,
                        startDestination = Destination.Home.route) {
                        composable(Destination.Home.route) {
                            DogsList(navController = navController)
                        }
                        composable(Destination.Details.route) {
                            DogDetails(navController = navController,
                                it.arguments?.getString("index") ?: "0")
                        }
                    }
                }
            }
        }
    }
}

// Routes definition
sealed class Destination(val route: String) {
    object Home: Destination("list")
    object Details: Destination("details/{index}")
}

// Data
object Data {
    val names = listOf(
        "Labrador retriever",
        "German shepherd",
        "Golden retriever",
        // ...
    )
    val imageIds = listOf(
        R.drawable.d1_lab,
        R.drawable.d2_german_shepherd,
        R.drawable.d3_golden,
        // ...
    )
    val desc = listOf(
        "Lorem ipsum dolor sit amet, consectetuer adipiscing ...",
        "In enim justo, rhoncus ut, imperdiet a, venenatis ... ",
        "Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum ... ",
        // ...
    )
}

// Items-list, using LazyColum
@Composable
fun DogsList(navController: NavController) {
    LazyColumn(modifier = Modifier.fillMaxWidth().padding(7.dp),
        horizontalAlignment = Alignment.CenterHorizontally) {
        item() {
            Text(text = "Most popular dog breeds",
                textAlign = TextAlign.Center,
                fontSize = 24.sp,
                fontWeight = FontWeight.Bold,
                modifier = Modifier.fillMaxWidth().padding(bottom = 10.dp))
        }
        items(Data.names.count()) { index ->
            Card(shape = RoundedCornerShape(10.dp),
                modifier = Modifier.padding(bottom = 10.dp)
                    .clickable {
                        navController.navigate("details/${index}")
                    },
                backgroundColor = Color(0xffdedede)
            ) {
                Row(modifier = Modifier) {
                    Image(painter = painterResource(id = Data.imageIds[index]),
                        contentDescription = "",
                        contentScale = ContentScale.Crop,
                        modifier = Modifier.weight(0.34f))
                    Column(modifier = Modifier
                        .padding(10.dp)
                        .weight(0.66f)) {
                        Text(text = Data.names[index],
                            fontSize = 20.sp,
                            fontWeight = FontWeight.Bold)
                        Text(text = Data.desc[index],
                            fontSize = 16.sp)
                    }
                }
            }
        }
    }
}

// Details-View
@Composable
fun DogDetails(navController: NavController, index: String) {
    Scaffold(topBar = {
        TopAppBar(title = {
            Text("Dog Details")
        }, backgroundColor = Color(0xffdedede),
            navigationIcon = {
            IconButton(onClick = {
                navController.popBackStack()
            }) {
                Icon(painterResource(id = R.drawable.ic_arrow_back),
                    contentDescription = "")
            }
        })
    }) {
        val dogName = Data.names[index.toInt()]
        val dogDescription = Data.desc[index.toInt()]
        val dogPainter = Data.imageIds[index.toInt()]

        Column(modifier = Modifier
            .fillMaxSize()
            .padding(20.dp)) {
            Text(text = dogName, fontSize = 28.sp, fontWeight = FontWeight.Bold)
            Text(text = dogDescription, fontSize = 20.sp)
            Image(
                painter = painterResource(id = dogPainter),
                contentDescription = "",
                contentScale = ContentScale.Fit,
                modifier = Modifier
                    .fillMaxSize()
                    .clip(RoundedCornerShape(10.dp))
                    .padding(top = 20.dp, bottom = 20.dp))
        }
    }
}

I'm mostly interested in answers concerning the way I have set-up the app. Is the navigation placed well within the MainActivity? What do thing about the decision attaching the data as constants to a singleton?

All other comments and hints concerning the app appreciated too.

\$\endgroup\$
3
  • \$\begingroup\$ Can you provide any screenshots or anything about how your application looks for context? \$\endgroup\$ Jan 29, 2023 at 19:52
  • \$\begingroup\$ @SimonForsberg I guess I'm not allowed doing so. The used images were provided by the instructor of the course. He might consider them as his property. Sorry. \$\endgroup\$ Jan 31, 2023 at 5:43
  • \$\begingroup\$ @SimonForsberg I replaced a few of the images and texts, now. Then added two screenshots to my question. \$\endgroup\$ Jan 31, 2023 at 5:51

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.