I'm trying to make an on screen keyboard from buttons and trying to do this using a button function is kind of annoying as I can't set weights like this:
#Composable
fun MyKeyboardButton(text: String){
Button(onClick = { /*TODO*/ }, modifier = Modifier.weight(1F)) {
Text(text = text, textAlign = TextAlign.Center)
}
}
and then insert that into a row for each letter on a keyboard.. instead I'm stuck doing this:
Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(4.dp)) {
Button(onClick = { /*TODO*/ }, Modifier.weight(1F)) {
Text(text = "Q")
}
Button(onClick = { /*TODO*/ }, Modifier.weight(1F)) {
Text(text = "W")
to get even spacing, which for each minor change in the code needs to then be implemented for 28 buttons.
Is there a way to add the buttons via a function? or do I need to set a button width for each for like so:
#Composable
fun MyKeyboardButton(text: String, width: Int){
Button(onClick = { /*TODO*/ }, modifier = Modifier.width(width.dp) {
Text(text = text, textAlign = TextAlign.Center)
}
}
I would also massively appreciate examples of on screen keyboards like this if there are any..
Modifier.weight is available inside Row because it's declared on RowScope. You can declare your composable on the same scope, so you can use weight:
#Composable
fun RowScope.MyKeyboardButton(text: String) {
Note that then you won't be able to call it outside of Row.
Related
.
I want my code to remove elements from list of text fields properly.
Each element has an X button to remove it's text field.
If I start removing elements from the bottom it works but it doesn't work for removing random elements
I want to use forEachIndexed for displaing the list
Please help me with solving this problem. I've been trying to do this for some time but every trial is unsuccessful.
This is a piece of code that I've managed to write but removing elements doesn't work properly
val listOfWords = mutableStateListOf<String>()
#Composable
fun Main() {
Column(
modifier = Modifier
.fillMaxSize()
.verticalScroll(rememberScrollState()),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "Words",
modifier = Modifier.padding(0.dp, 0.dp, 0.dp, 4.dp),
style = MaterialTheme.typography.h6
)
listOfWords.forEachIndexed { index, word ->
Input(word, 30, "Word", 1,
{newWord ->
listOfWords[index] = newWord
Log.d("text ",word)
},
{
listOfWords.removeAt(index)
}
)
}
IconButton(
onClick = {
listOfWords.add("")
}
) {
Icon(
imageVector = Icons.Filled.Add,
contentDescription = "Add"
)
}
}
}
#Composable
fun Input(
word: String,
maxChar: Int,
label: String,
maxLines: Int,
onEdit: (word: String) -> (Unit),
onRemove: () -> (Unit)
) {
var text by remember { mutableStateOf(word) }
Column(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp, 0.dp, 8.dp, 0.dp)
) {
OutlinedTextField(
value = text,
onValueChange = {
if (it.length <= maxChar) text = it
onEdit(text)
},
modifier = Modifier.fillMaxWidth(),
label = { Text(label) },
leadingIcon = {
Icon(Icons.Default.Edit, null)
},
trailingIcon = {
IconButton(onClick = {
onRemove()
}) {
Icon(
imageVector = Icons.Default.Clear,
contentDescription = "Back"
)
}
},
maxLines = maxLines
)
Text(
text = "${text.length} / $maxChar",
textAlign = TextAlign.End,
style = MaterialTheme.typography.caption,
modifier = Modifier
.fillMaxWidth()
.padding(end = 16.dp)
)
}
}
The problem is here.
var text by remember { mutableStateOf(word) }
Without supplying a key to Input's remember, compose will not be able refresh/update your remaining Input's states during Main's re-composition every time an Input is removed.
You can use the word parameter as key for remember to re-calculate every composition pass (i.e when you add/remove or typed a value in the TextField), and your code should probably work as you expected.
var text by remember(word) { mutableStateOf(word) }
Have you tried doing the following instead?
listOfWords.forEachIndexed { index, word ->
... // rest of code
{
listOfWords.removeAt(index)
}
Can I make a item on LazyColumn occupy only the remaining height available? I'm I tried to use fillParentMaxSize but it make the item as the same size of the LazyColumn, so i can't put another item at the top of the list, like a header that I want to scroll with the content.
Sample code
#Composable
fun LazyColumnTest() {
LazyColumn(
modifier = Modifier.fillMaxSize()
) {
item {
Column {
Text(text = "This is a title", style = MaterialTheme.typography.h4)
Text(text = "With a subtitle", style = MaterialTheme.typography.subtitle1)
}
}
item {
OtherLayout(modifier = Modifier.fillParentMaxHeight())
}
}
}
#Composable
fun OtherLayout(modifier: Modifier = Modifier) {
Box(modifier = modifier.fillMaxSize()) {
Icon(
Icons.Default.Close,
contentDescription = null,
modifier = Modifier
.size(150.dp)
.align(Alignment.TopCenter)
)
Button(
onClick = { /*TODO*/ },
modifier = Modifier
.padding(bottom = 16.dp)
.align(Alignment.BottomCenter)
) {
Text(text = "Button at bottom")
}
}
}
Here is the current result. The button is outside the screen, so I need to scroll to see it.
Update
In the example above, the idea is to use this OtherLayout like a state. I can show the items or this OtherLayout that has a button at bottom, like a retry button.
I can do about the same layout on view system if I add fillViewport="true" on a ScrollView. It's possible to add a gravity="bottom" on another view and it will stay at the bottom of screen.
I will add a new example here with the header/footer layout to see if I can explain better.
#Composable
fun LazyColumnTest() {
LazyColumn(
modifier = Modifier.fillMaxSize()
) {
item {
// need to scroll with the content
Header()
}
items(2) { position ->
Text(text = "Item $position")
}
item {
// need to stay at bottom if the items not fill the screen
// and scroll with the content if has a lot of items
Footer(modifier = Modifier)
}
}
}
#Composable
private fun Header() {
Column {
Text(text = "This is a title", style = MaterialTheme.typography.h4)
Text(text = "With a subtitle", style = MaterialTheme.typography.subtitle1)
}
}
#Composable
fun Footer(modifier: Modifier = Modifier) {
Column(modifier = modifier.fillMaxWidth()) {
Text(text = "This is a default footer that cannot be changed")
Button(
onClick = { /*TODO*/ },
modifier = Modifier
.padding(bottom = 16.dp)
) {
Text(text = "With a button")
}
}
}
in this example I need that header and footer scrolls with the content, but if the items not fill the entire screen, the footer remains at bottom of the screen.
Using the item function you are adding another item to the scrollable content of the LazyColumn.
If you want that the LazyColumn occupies only the remaining height available, and the footer that doesn't scroll with the list, you can move the footer out of the LazyColumn and apply the weight modifier to the LazyColumn.
Something like:
Column(){
Header()
LazyColumn(Modifier.weight(1f)) {
//....
}
Footer() //your Box
}
In your case:
Column {
//Header
Box(Modifier.fillMaxWidth().height(30.dp).background(Red))
LazyColumn(Modifier.weight(1f)) {
items(itemsList){
Text("Item $it")
}
}
//Footer
OtherLayout()
}
With:
#Composable
fun OtherLayout(modifier: Modifier = Modifier) {
Box(modifier = modifier.fillMaxWidth()) {
//..
}
}
I'm trying to build a simple chat screen, with a header, a footer (text field) and the messages part which is a lazycolumn. I've seen many people using such methods like the ones below: (fill parent max height, size etc.)
https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyItemScope
All I can put in lazycolumn modifiers is fillMaxHeight, width or size, if I use fillMaxHeight, it destroys the footer, if I don't use anything, the lazycolumn expands until the bottom of the screen, so it does the same behaviour. What am I doing wrong? Why does it behave like this? I can't put images because I don't have enough reputation...
Here is the full code:
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Surface() {
Column(Modifier.background(Color.Green)) {
ProfileCard("Kate", "Available")
Conversation(messages = SampleData.conversationSample)
SimpleTextField()
}
}
}
}
}
#Composable
fun Conversation(messages: List<Message>) {
LazyColumn(
modifier = Modifier
.background(color = MainBg).fillMaxHeight(),
reverseLayout = true,
) {
items(messages) { message ->
MessageCard(message)
}
}
}
#Composable
fun MessageCard(message: Message) {
var isExpanded by remember { mutableStateOf(false) }
Column() {
Text(
text = message.message,
color = com.boradincer.hellojetpack.ui.theme.PrimaryText,
modifier = Modifier
.padding(vertical = 4.dp, horizontal = 16.dp)
.clip(RoundedCornerShape(4.dp))
.background(color = LightBg)
.clickable { isExpanded = !isExpanded }
.padding(horizontal = 8.dp, vertical = 5.dp),
maxLines = if (isExpanded) Int.MAX_VALUE else 2
)
}
}
Apply Modifier.weight(1f) to the LazyColumn
Column(){
Header()
LazyColumn(Modifier.weight(1f)) {
//....
}
Footer()
}
Using fillMaxHeight() the modifier will make the LazyColumn fill the whole available height.
The weight modifier requires a ColumnScope.
In your case use the modifier as parameter:
#Composable
fun Conversation(
modifier: Modifier = Modifier,
messages: List<Message>
){
LazyColumn(modifier) {
//...
}
}
Column(){
//
Conversation(
modifier = Modifier.weight(1f),
messsages = list
) {
//....
}
}
I am trying to work with the compose lazy column, i want each item of my lazy column to have the maximum height , I tried the below code but it is not giving the expected result
Code
val itemsList: List by mainScreenViewModel.portfolioItems.observeAsState(listOf())
Box(modifier = Modifier.fillMaxSize()) {
Column(modifier = Modifier.matchParentSize()) {
LazyColumn(
content = {
itemsIndexed(itemsList) { index, item ->
Text(text = "Hello", modifier = Modifier.fillMaxHeight())
}
},
)
}
}
fillMaxHeight()/fillMaxWidth() do not work correctly for vertical and horizontal scrolling list respectively. Instead we can use fillParentHeight() and fillParentWidth() respectively provided in LazyItemScope.
Sample Code:
LazyColumn(
modifier = modifier.fillMaxHeight()) {
items(count = 3) {
Column(modifier = Modifier.fillParentMaxHeight()) {
Text(
text = "Item $it",
modifier = Modifier.fillMaxWidth()
)
Divider(Modifier.height(2.dp))
}
}
}
Refer for more details: https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyItemScope
I want to develop my next Android App with Jetpack Compose. I know it is new and in Alpha state.
With this code, I want to implement a login view. It works so far until the keyboard opens :-(
private val items = listOf(Tab.Home)
private sealed class Tab(#StringRes val resourceId: Int) {
object Home : Tab(R.string.home)
}
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyApplicationTheme {
Surface(color = MaterialTheme.colors.background) {
Scaffold(
topBar = {
TopAppBar(
title = {
Text(text = "Home")
}
)
},
bottomBar = {
BottomNavigation {
items.forEach { screen ->
BottomNavigationItem(
icon = { Icon(Icons.Filled.Favorite, null) },
label = { Text(stringResource(screen.resourceId)) },
selected = true,
onClick = { /* ... */
}
)
}
}
}
) {
Column(
Modifier.verticalScroll(rememberScrollState()).padding(16.dp)
) {
Text(text = "Lorem ipsum ...")
Spacer(modifier = Modifier.height(32.dp))
Text(text = "Lorem ipsum ...")
Spacer(modifier = Modifier.height(32.dp))
Text(text = "Lorem ipsum ...")
Spacer(modifier = Modifier.height(32.dp))
TextField(
value = "",
label = { Text("Name", color = MaterialTheme.colors.onPrimary.copy(alpha = 0.5f)) },
onValueChange = { /*TODO*/ },
modifier = Modifier.fillMaxWidth()
)
Spacer(modifier = Modifier.height(16.dp))
TextField(
value = "",
label = { Text("Password", color = MaterialTheme.colors.onPrimary.copy(alpha = 0.5f)) },
onValueChange = { /*TODO*/ },
modifier = Modifier.fillMaxWidth()
)
Spacer(modifier = Modifier.height(16.dp))
Button(
content = { Text("Login") },
onClick = { /*TODO*/ },
)
}
}
}
}
}
}
}
I use this vertical scrollable column, but it doesn't scroll if parts of the column are behind the keyboard.
To fix it, I added android:windowSoftInputMode="adjustResize|stateHidden" in the manifest.
Now I can scroll the column but on top of the keyboard is also the bottomBar. And the bottomBar covers the login button at the bottom of the column. The bottomBar also covers the button if the content is enough that it also scrolls if the keyboard is closed.
Now I have three questions:
How to make the column scrollable when the keyboard opens but without the bottomBar on top of the keyboard?
How to implement an auto-scroll to the focused text field?
How to prevent the bottomBar from covering the button?
This is a known issue (at least with LazyColumn in my experience). Please feel free to star that bug.
In that thread there's a hacky solution that involves RelocationRequester (which relocates a composable so it's visible) and onfocusChanged which tells you when to do the relocation.