How to use EditText or TextInput widget in Jetpack compose?

Question

I was exploring Jetpack compose by trying a few widgets like Image and EditText.

For text input, it has EditableText. I have tried below code but it is not showing anything in UI

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            loadUi()
        }
    }

    @Composable
    fun loadUi() {
        CraneWrapper {
            MaterialTheme {
                val state = +state { EditorState("") }
                EditableText(
                    value = state.value,
                    onValueChange = { state.value = it },
                    editorStyle = EditorStyle(
                        textStyle = TextStyle(
                            fontSize = (50f)
                        )
                    )
                )
            }
        }
    }
}

What I am missing here? Any help would be appreciated!

Gabriele Mariotti · Answer 1 · 2021-04-22T16:12:13.587

5

With 1.0.0-beta05 you can the TextField.

Something like:

var text by rememberSaveable { mutableStateOf("Text") }

TextField(
    value = text,
    onValueChange = {
        text = it
    },
    label = { Text("Label") }
)

edited Apr 22 '21 at 16:12

answered Aug 30 '20 at 10:24

Gabriele Mariotti

192,671
57
469
489

score 3 · Answer 2 · answered Aug 31 '19 at 09:39

3

Sorry for late answer. API was changed a bit, so your code now should look like this:

@Composable
fun loadUi() {
    val state = +state { EditorModel("smth") }
    TextField(
        value = state.value,
        onValueChange = { state.value = it },
        editorStyle = EditorStyle(
            textStyle = TextStyle(
                fontSize = (50.sp)
            )
        )
    )
}

Also you could miss widget, because it doesnt have default background and is almost invisible by default if you have empty string

answered Aug 31 '19 at 09:39

Andrey Danilov

5,024
4
22
44

I think I have to update source of jetpack compose, anyway thanks for the answer – Malik Motani Aug 31 '19 at 09:57
EditorModel is MIA in dev05 of compose, and no mention of it in the release notes. – Rob Feb 23 '20 at 19:10

score 2 · Answer 3 · answered Dec 23 '19 at 14:09

TextField(
    value = state.value,
    onValueChange = { new ->
        state.value = if (new.text.any { it == '\n' }) {
            state.value
        } else {
            new
        }
    },
    keyboardType = KeyboardType.Text,
    imeAction = ImeAction.Search,
    textStyle = TextStyle(color = Color.DarkGray),
    onImeActionPerformed = onImeActionPerformed
)

score 0 · Answer 4 · answered Apr 24 '20 at 10:23

0

 val state = +state {
                    EditorModel("Edit Text")
                }
                TextField(
                    value = state.value,
                    onValueChange = {
                        state.value = it
                    },
                    textStyle = TextStyle(
                        fontSize = (30.sp),
                        color = Color.DarkGray
                    ),
                    keyboardType = KeyboardType.Text
                )

Try this one.

answered Apr 24 '20 at 10:23

Mr. Tayyab MuGhal

273
2
8

Hello! While this code may solve the question, [including an explanation](https://meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. – Brian Apr 24 '20 at 13:32

How to use EditText or TextInput widget in Jetpack compose?

4 Answers4