27

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!

5 Answers 5

43

As stated in Gabriele Mariotti's answer, this is the right way to do it:

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

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

If however, you encounter an error that states:

Type 'TypeVariable(T)' has no method 'getValue(MainActivity, KProperty<*>)' and thus it cannot serve as a delegate

Simply add these two imports to your file and you'd be good:

import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
0
23

You can use the TextField.

Something like:

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

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

enter image description here

Additional details:

https://developer.android.com/jetpack/compose/text#enter-modify-text

3
  • 3
    Type 'TypeVariable(T)' has no method 'getValue(MainActivity, KProperty<*>)' and thus it cannot serve as a delegate Jun 2, 2021 at 15:45
  • 2
    Fixed it: here Jun 2, 2021 at 15:53
  • Any idea on how can we remove the padding on start of the "Text" ? Mar 1, 2022 at 7:44
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

2
  • EditorModel is MIA in dev05 of compose, and no mention of it in the release notes.
    – Rob
    Feb 23, 2020 at 19:10
  • Warning Old answer and not valid now Nov 6, 2021 at 12:10
2
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
)
-1
 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.

1
  • 3
    Hello! While this code may solve the question, including an explanation 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. Apr 24, 2020 at 13:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.