androidkotlinandroid-jetpack-composetext-align

Aligning text in the right column

I'm trying to make an apartment rental app for a project where the images, title, location, price and description are shown for each apartment. Here's the code for the Kotlin file ApartmentListItem.kt which contains the layout of the apartment list and how it'll be presented in the MainApartmentActivity Kotlin class:

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.modifier.modifierLocalMapOf
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.project.R
import com.example.project.data.Apartment

@Composable
fun ApartmentListItem(apartment: Apartment) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
            .background(Color.LightGray, shape = RoundedCornerShape(18.dp))
            .padding(16.dp)
    ) {
        Image(
            painter = painterResource(id = apartment.apartmentImageId),
            contentDescription = "Apartment Image",
            modifier = Modifier
                .size(200.dp)
                .padding(end = 16.dp)
                .align(Alignment.Top)
        )
        Column(
        ) {
            Text(text = apartment.apartmentName, style = MaterialTheme.typography.h5)
            Text(text = apartment.apartmentLocation, style = MaterialTheme.typography.subtitle1)
            Text(text = apartment.apartmentPrice, style = MaterialTheme.typography.subtitle2)
            Text(text = apartment.apartmentDescription, style = MaterialTheme.typography.subtitle2)
        }
    }
}

@Composable
@Preview
fun PreviewApartmentListItem() {
    val apartment = Apartment(
        apartmentImageId = R.drawable.apartment_one,
        apartmentName = "name",
        apartmentLocation = "location",
        apartmentID = "1",
        apartmentPrice = "100",
        apartmentDescription = "Apartment description appears here"
    )
    Surface(modifier = Modifier.fillMaxSize()) {
        ApartmentListItem(apartment = apartment)
    }
}

And here is the ApartmentMainActivity Kotlin class which calls the code from ApartmentListItem to insert the necessary information about each apartment:

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Scaffold
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import com.example.project.R
import com.example.project.data.Apartment

@Composable
fun MainApartmentViewScreen() {
    val apartmentsDetails = remember {
        listOf(
            Apartment(
                "1",
                "Apartment, 80 sq.m.",
                "Nea Kypseli, Kypseli (Athens - Center)",
                "€110.000",
                "Apartment For Sale, floor: 2nd, in the area: Kypseli - Fokionos Negri. The area of \u200B\u200Bthe property is 80 sq.m. It consists of: 2 Bedrooms (1 Master), 1 bathroom/s, 1 kitchen/s, 1 living room/s. It was built in 1955. The heating of the property is autonomous with oil.",
                R.drawable.apartment_one
            ),
            Apartment(
                "2",
                "Apartment, 55 sq.m.",
                "A Cemetery, Mets - Kallimarmaro (Athens - Center)",
                "€€84.000",
                "Neos Kosmos Kynosargos FOR SALE apartment on the ground floor interior surface area 55 sq.m. . It consists of 1 bedroom, living room, kitchen, bathroom . It was built in 1970 and has a city view landscape, wooden frames, mosaic and wood floors, built-in wardrobes. Leased until 12/2024.",
                R.drawable.apartment_two
            ),
            Apartment(
                "3",
                "Apartment, 47 sq.m.",
                "Ano Kypseli - Evelpidon, Kypseli (Athens - Center)",
                "€150.000",
                "Kypseli Nea Kypseli FOR SALE renovated apartment on the 2nd floor with a total area of \u200B\u200B47 sq.m. . It consists of 1 bedroom, living room, kitchen, bathroom. It was built in 1998 with energy class B and renovated in 2023.",
                R.drawable.apartment_three
            ),
            Apartment(
                "4",
                "Apartment, 68 sq.m.",
                "Areos Field, Gyzi - Areos Field (Athens - Center)",
                "€130.000",
                "Quiet, spacious, interior apartment, in a very central location, next to the under construction metro station on Alexandra Avenue for sale. Ideal for investment. The property is very close to the location shown on the map. Apartment For Sale, floor: 2nd, in the area: Gyzi - Pedion Areos - Pedion Areos. The area of \u200B\u200Bthe property is 68 sq.m. and is located on a plot of 500 sq.m. It consists of: 2 bedrooms, 1 bathroom, 1 kitchen, 1 living room. It was built in 1972. The heating of the property is Central with Oil.",
                R.drawable.apartment_four
            ),
            Apartment(
                "5",
                "Apartment, 42 sq.m.",
                "Lykavittos, Kolonaki - Lykavittos (Athens - Center)",
                "€140.000",
                "Exarchia - Neapoli Exarchia NAPOLI FOR SALE renovated furnished mezzanine apartment with a total area of \u200B\u200B42 sq.m. . It consists of 1 bedroom, living room, kitchen, bathroom. It was built in 1970 with energy class E and has individual heating - natural gas, aluminum frames, tile and wood floors, armored door, built-in wardrobes, elevator, A/C, alarm, electrical appliances, screens, double glazing, night current",
                R.drawable.apartment_five
            )
        )
    }

    Scaffold(
        topBar = {
            TopAppBar(title = { Text(text = "Apartments List") })
        }
    ) { paddingValues ->
        LazyColumn(
            contentPadding = paddingValues,
            modifier = Modifier.padding(16.dp)
        ) {
            items(apartmentsDetails) { apartment ->
                ApartmentListItem(apartment)
                Spacer(modifier = Modifier.height(8.dp))
            }
        }
    }
}

This is how the screen looks at the moment. The description next to the image, beginning with "Apartment for sale" and onward is what needs to be moved.
actual result

I'm trying to get the description to appear below the image and aligned to the left, but I'm not sure how to do it.

I tried using the spacing code in the ApartmentListItem.kt file so the description can appear below the image like so:

Column {
    Text(text = apartment.apartmentName, style = MaterialTheme.typography.h5)
    Text(text = apartment.apartmentLocation, style = MaterialTheme.typography.subtitle1)
    Text(text = apartment.apartmentPrice, style = MaterialTheme.typography.subtitle2)
}

Spacer(
    modifier = Modifier
        .height(10.dp)
        .fillMaxWidth()
)
Text(
    text = apartment.apartmentDescription,
    style = MaterialTheme.typography.body1,
    modifier = Modifier.fillMaxWidth(),
)

But it doesn't seem to appear on the screen when I do this.

How can I align the apartmentDescription to go underneath the image for each item?
This is how I want the screen to look:
expected result.

Solution

  • To achieve what you want, you can update your code like this:

    @Composable
fun ApartmentListItem(apartment: Apartment) {
    Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp)
                .background(Color.LightGray, shape = RoundedCornerShape(18.dp))
                .padding(16.dp)
        ) {
        Row {
            Image(
                painter = painterResource(id = apartment.apartmentImageId),
                contentDescription = "Apartment Image",
                modifier = Modifier
                    .size(200.dp)
                    .padding(end = 16.dp)
                    .align(Alignment.Top)
            )
            Column(
            ) {
                Text(text = apartment.apartmentName, style = MaterialTheme.typography.h5)
                Text(text = apartment.apartmentLocation, style = MaterialTheme.typography.subtitle1)
                Text(text = apartment.apartmentPrice, style = MaterialTheme.typography.subtitle2)
            }
        }
        Text(text = apartment.apartmentDescription, style = MaterialTheme.typography.subtitle2)
    }
}

    However, I don't recommend putting the entire description in the item. It's better to display minimal information and show the full details when the user clicks on the item.