I'm trying to create the layout below using compose. I've been looking for similar designs, but I'm not sure if some things has become deprecated or something; since some things do not function. Anyone has any idea how to create something similar as in the image or why my code is not displaying as in the image?

My Code:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.customcomposable.ui.theme.CustomComposableTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CustomComposableTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting()
                }
            }
        }
    }
}

@Composable
fun Greeting() {
    Column(modifier = Modifier
        .fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        var text by remember { mutableStateOf("Type here...") }
        BasicTextField(value = "Type here...", onValueChange = { newText ->
            text = newText
        },
        label = {
            Text(text = "Title")
        })
    }

}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    CustomComposableTheme {
        Greeting()
    }
}

My Code Preview:

CodePudding user response：

You need to use Material Design Components androidx.compose.material