Skip to content

Instantly share code, notes, and snippets.

@abd3lraouf
Last active August 5, 2024 19:19
Show Gist options
  • Save abd3lraouf/8fb977996e52f23cd9315d1797e0c072 to your computer and use it in GitHub Desktop.
Save abd3lraouf/8fb977996e52f23cd9315d1797e0c072 to your computer and use it in GitHub Desktop.
Android Compose Keyboard Visibility Detector: A Jetpack Compose implementation to detect the visibility of the software keyboard in an Android app. This example demonstrates the use of WindowInsets and isImeVisible in a simple Compose layout

Android Compose Keyboard Visibility Detector

This Kotlin file contains a simple implementation for detecting the visibility of the software keyboard in an Android app using Jetpack Compose.

Overview

The MainActivity class in this file demonstrates how to use WindowInsets.isImeVisible to check if the software keyboard is visible on the screen. The UI consists of a TextField for input and a Text that displays the keyboard visibility status.

Usage

  1. Include this Kotlin file in your Android Jetpack Compose project.
  2. Run the app and focus on the TextField. The text will update to indicate whether the keyboard is visible.

Features

  • Utilizes WindowInsets.isImeVisible for keyboard visibility detection.
  • Simple Compose layout with Scaffold and Column.
  • Dynamically updates the UI based on the keyboard's visibility state.

Contributions

Feel free to fork this gist and contribute to enhancing its functionality or addressing any issues. Suggestions and improvements are always welcome!


Created by Abdelraouf Sabri - Senior Android Developer

package dev.abd3lraouf.learn.myapplication
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.isImeVisible
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.ui.Modifier
import dev.abd3lraouf.learn.myapplication.ui.theme.MyApplicationTheme
class MainActivity : ComponentActivity() {
@OptIn(ExperimentalLayoutApi::class)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
MyApplicationTheme {
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
Column(modifier = Modifier.padding(innerPadding)) {
Text(
text = "Is KEYBOARD VISIBLE?",
style = MaterialTheme.typography.bodyMedium
)
Text(
text = if (WindowInsets.isImeVisible) "YES" else "NO",
style = MaterialTheme.typography.bodyLarge,
)
TextField(value = "", onValueChange = {})
}
}
}
}
}
}
@abd3lraouf
Copy link
Author

IsKeyboardVisible

@abd3lraouf
Copy link
Author

as Discussed here, we need to use the edgeToEdge() api and it's available on the androidx.activity:activity-compose:1.8.0

@BadgerTrailApps
Copy link

This helped, thanks :)

@navneet851
Copy link

thanks for help :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment