So I am trying to make a text messaging app as a learning project. I have the text messages uploaded from firebase and loaded into a lazy column, I also have a textfield that you use to send and type messages, I broke them down in to a few different composeables
here he where the lazy column is
Composable
fun TextSectionAndKeyBoard(
state:LazyListState,
messageList:List<MessageModel>,
currentUserSenderId:String,
match:MatchedUserModel = MatchedUserModel(),
message:String,
sendMessage: () -> Unit,
sendAttachment: () -> Unit,
messageChange: (String) -> Unit,
feedBack:Boolean = false
){
Column(
Modifier.fillMaxSize()
) {
LazyColumn(
modifier = Modifier
.fillMaxSize()
.statusBarsPadding()
.weight(1f)
.imePadding(),
state = state
) {
itemsIndexed(messageList) { index, message ->
val last = index == (messageList.size -1)
val isCurrentUser = message.senderId.contains(currentUserSenderId.replaceFirstChar { "" })
val time = message.currentTime
if(feedBack){
MessageItemFeedBack(message = message, isCurrentUser = isCurrentUser, timeStamp = time, last)
}else{
MessageItem(match = match ,message = message, isCurrentUser = isCurrentUser, timeStamp = time, last)
}
}
}
}
}
as you can see I have an item with the id keyboard, I originally had the keybaord there, and when it was there I was able to effect the lazy column when I opened the keybaord, moved all the items up when needed. but the keybaor was also the bottom item, so you didn’t see the keybaord section at all times with is not ideal
@Composable
fun MessagingBar(
modifier: Modifier,
message:String,
messageChange: (String) -> Unit,
sendMessage: () -> Unit,
sendAttachment: () -> Unit
){
Row(modifier = Modifier
.background(AppTheme.colorScheme.onTertiary)
.fillMaxWidth()
.padding(12.dp)){
Row (
modifier = Modifier.fillMaxWidth(),
//horizontalArrangement = Arrangement.SpaceEvenly
){
IconButton(onClick = sendAttachment,
modifier = Modifier
.offset(y = 5.dp)
.weight(1.0F),
colors= IconButtonDefaults.iconButtonColors(
containerColor = Color.Transparent,
contentColor = AppTheme.colorScheme.secondary,
),
) {
Icon(imageVector = ImageVector.vectorResource(id = R.drawable.attachment), contentDescription = "Send")
}
OutlinedTextField(
modifier = Modifier
.fillMaxWidth()
.weight(7.5F),
value = message, onValueChange = messageChange,
textStyle = baseAppTextTheme(),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Text,
capitalization = KeyboardCapitalization.Sentences,
autoCorrect = true,
),
maxLines = 4,
)
IconButton(onClick = sendMessage,
modifier = Modifier
.offset(y = 5.dp)
.weight(1.0F),
colors= IconButtonDefaults.iconButtonColors(
containerColor = Color.Transparent,
contentColor = AppTheme.colorScheme.secondary,
),
) {
Icon(imageVector = ImageVector.vectorResource(id = R.drawable.send), contentDescription = "Send")
}
}
}
}
this is the keybaord, simple row with buttons for sending messages and attachements and an outlined textfield
@Composable
fun MessagerScreen(navController: NavHostController, vm: ViewModel){
val talkedUser by vmDating.selectedUser.collectAsState()
val avail by remember {mutableStateOf(talkedUser == null)}
if(avail && talkedUser == null){
InsideMessages(
nav = navController,
titleText = "Loading",
chatSettings = {},
messages = {}
)
}else{
val chatId = vm.getChatId(vm.getUser().number, talkedUser!!.number) //change to UID later need to account for reverses
var message by rememberSaveable { mutableStateOf("") }
val messageModel = viewModel { MessageViewModel(MyApp.x) }
val messageList by messageModel.getChatData(chatId).collectAsState(listOf())
//TODO need to make this work
var scrollValue by remember { mutableIntStateOf(Int.MAX_VALUE) }
val lazyListState = rememberLazyListState()
LaunchedEffect(messageList) {
lazyListState.scrollToItem(scrollValue) //NEED this to update when keybaord opens
}
InsideMessages(
nav = navController,
titleText = talkedUser!!.name,
goToProfile = { navController.navigate("MatchedUserProfile") },
chatSettings = {},
startCall = {/* TODO Start normal Call (Need to make a screen for it)*/},
startVideoCall = {/* TODO Start Video Call (Need to make a screen for it)*/},
messageBar = {MessagingBar(
modifier = Modifier.imePadding(),
message = message,
messageChange = { message = it },
sendMessage = {
if (message != "") {
messageModel.storeChatData(chatId, message)
}
message = ""
scrollValue = messageList.size + 2
},
sendAttachment = {/* TODO photos or attachments Message...advise if we should keep*/ }
)},
messages = {
TextSectionAndKeyBoard(
lazyListState = lazyListState,
messageList = messageList,
currentUserSenderId = messageModel.getCurrentUserSenderId(),
match = talkedUser!!,
)
},
)
}
}
this where it is held on the screen, nothing here is very important, it has the LazyListState, that updates when you send a new message, ensure that it stays at the bottom.
I need help on figuring out what do I need to do to my lazy column that it is aware of the keyboard and keeps the last item above MessagingBar() so you can read the last message properly
I do have android:windowSoftInputMode=”adjustResize” inside my manifest
EDIT: I changed the keyboard so that is the bottom bar of my scoffed so its always at the bottom.
//rest of the code[enter image description here][1]
bottomBar = {
messageBar()
},
) {
paddingValues ->
Column(
Modifier
.padding(paddingValues)
.fillMaxSize()
){
messages()
}
you can see I have no issue when I open the chat, or when I send a message, its just when I open the keyboard, if I can add to my LaunchedEffect something that reacts with the keyboard opening I should be golden
Sample of issue
1
Check out the documentation of the imePadding Modifier. It automatically applies the necessary padding to a Composable when the keyboard opens.
You can apply it to your MessagingBar Composable as follows:
MessagingBar(
modifier = Modifier.imePadding(),
message = message,
messageChange = messageChange,
sendMessage = sendMessage,
sendAttachment = sendAttachment
)
Be sure to actually apply the passed Modifier in the MessagingBar Composable, what you currently aren’t doing:
@Composable
fun MessagingBar(
modifier: Modifier,
message:String,
messageChange: (String) -> Unit,
sendMessage: () -> Unit,
sendAttachment: () -> Unit
){
Row(modifier = modifier // APPLY PASSED MODIFIER HERE
.background(AppTheme.colorScheme.onTertiary)
.fillMaxWidth()
.padding(12.dp)) {
//...
}
}
Note that you should not set the weight Modifier on the MessagingBar, it is not needed there.
Finally, remove all the code that you used to manually set padding when the keyboard opens. It is no longer needed.
Also check out the official JetChat sample app. It provides a demo implementation of a chat app, it might help you. Especially take a look at the Conversation.kt file.
Example:
@Composable
fun ChatScreen() {
Column(
Modifier.fillMaxSize()
) {
LazyColumn(
modifier = Modifier.weight(1f),
contentPadding = PaddingValues(16.dp),
reverseLayout = true
) {
items(100) {
Text(
modifier = Modifier.fillMaxWidth(),
text = "Message $it",
fontSize = 20.sp
)
}
}
TextField(
modifier = Modifier
.fillMaxWidth()
.imePadding(),
value = "",
onValueChange = {}
)
}
}
Output:
3