How to show a multiple fields of documents in Firestore in one row of LazyColumn

Question

I'm new to Firestore. I need to show two of the values of the fields, "category" and "title" 3, of documents in Firestore in one row of LazyColumn like this 1. I tried some codes as below but they are shown like this 2. Is it possible?

My code of MainActivity

var t = mutableListOf<String>()
    db.collection("posts")
        .get()
        
        .addOnSuccessListener { result ->
            for (document in result) {
                val category = document.data["category"].toString()
                val title = document.data["title"].toString()
                t.add(category)
                t.add(title)
                Log.d("black", "${document.id} => ${category}")
                Log.d("red", "${document.id} => ${title}")
            }
        }
        .addOnFailureListener { exception ->
            Log.w("gray", "Error getting documents.", exception)
        }

My code of View

LazyColumn(
            modifier = Modifier.background(Beige),
            verticalArrangement = Arrangement.spacedBy(10.dp),
            contentPadding = PaddingValues(5.dp)
        ) {

            items(posts) { post ->
                Row(
                    modifier = Modifier
                        .fillMaxWidth()

                        .selectable(
                            selected = true,
                            onClick = { navController.navigate("PostContent") }
                        )
                        .background(Color.White, RoundedCornerShape(5.dp))
                ) {

                    Text(
                        text = "$post/category\n$post/title",
                        color = Brown,
                        modifier = Modifier
                            .padding(40.dp)
                    )
                }

Thank you.

"they are not shown correctly" doesn't provide enough information so we can help. What exactly isn't shown correctly? Besides that, I think that this [resource](https://medium.com/firebase-tips-tricks/how-to-make-a-clean-architecture-android-app-using-mvvm-firestore-and-jetpack-compose-abdb5e02a2d8) can help. — Alex Mamo, Sep 04 '22 at 06:44
Thank you. I need to show like this. "place about a(in one row)" and "food about b(in one row)". But they are shown as Pitcture 2. — Yuki, Sep 04 '22 at 06:57
I'm having a hard time understanding what the problem is. Can you please be more specific? — Alex Mamo, Sep 04 '22 at 07:05
I've just posted what I need to creat as Picture 1. I hope it helps. I'm a beginner of programming. Thank you very much for being patient with me, Alex. — Yuki, Sep 04 '22 at 07:23
Where do you get the `posts` variable from? How do you define it? — Richard Onslow Roper, Sep 04 '22 at 23:39

score 1 · Accepted Answer · answered Sep 04 '22 at 23:51

You have a bad implementation of the storing mechanism.

In the class where you are calling the database, add this line of code

data class Post(category: String, title: String)

Then, update the t variable like so

var t = mutableStateListOf<Post>()

Then, update the storing mechanism

db.collection("posts")
        .get()
        
        .addOnSuccessListener { result ->
            for (document in result) {
                val category = document.data["category"].toString()
                val title = document.data["title"].toString()
                t.add(Post(category, title))
                Log.d("black", "${document.id} => ${category}")
                Log.d("red", "${document.id} => ${title}")
            }
        }
        .addOnFailureListener { exception ->
            Log.w("gray", "Error getting documents.", exception)
        }

Now, I assume it is the same t variable you are somehow accessing in your LazyColumn as posts, so update that code like this

LazyColumn {

  items(posts) { post ->
                Row(
                    modifier = Modifier
                        .fillMaxWidth()

                        .selectable(
                            selected = true,
                            onClick = { navController.navigate("PostContent") }
                        )
                        .background(Color.White, RoundedCornerShape(5.dp))
                ) {

                    Text(
                        text = "${post.category}\n${post.title}",
                        color = Brown,
                        modifier = Modifier
                            .padding(40.dp)
                    )
                }

All done, modify the design however you like, the logic is good like this.

How to show a multiple fields of documents in Firestore in one row of LazyColumn

1 Answers1