Designing custom layout in compose

Issue

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:

Solution

You need to use Material Design Components androidx.compose.material See material.io, here they have two links to the docs of the text field for compose doc ref, if you scroll down you see some examples as well that explain some stuff.

You need to change BasicTextField to a TextField or OutlinedTextField depending on the style you want.

@Composable
fun Greeting() {
    Column(modifier = Modifier
        .fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        var textfieldA by remember { mutableStateOf("") } // Start with a empty field
        var textfieldB by remember { mutableStateOf("") }
        OutlinedTextField(
            value = textfieldA,
            onValueChange = { newText ->
                textfieldA = newText
            },
            label = {Text(text = "Title field A")},
            placeholder = { Text("Type here...") } // placeholder / hint
        )
        OutlinedTextField(
            value = textfieldB,
            onValueChange = { newText ->
                textfieldB = newText
            },
            label = {Text(text = "Title field B")},
            placeholder = { Text("Type here...") } // placeholder / hint
        )
    }
}

Answered By - Stefan de Kraker