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

README.md

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

KeyboardVisibilityDetector.kt

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 = {})
                    }
                }
            }
        }
    }
}

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