How to make a Jetpack compose element appear on top of the keyboard in android?

Question

Making a button stick to the bottom of the screen and to the keyboard when it pops up was pretty straightforward in XML, we could do something like this

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">

//the ui views

    <TableLayout
    android:id="@+id/m_table_menu"
    style="@style/table_layout_style">

    <View style="@style/view_style" />

        <TableRow style="@style/table_row_button_style">
        //This button sticks to the bottom of the screen or to the keyboard when its open
        <Button
            android:id="@+id/save_user_name"
            style="@style/green_bottom_sticky_button"
            android:background="@drawable/green_disabled_ripple_rectangular_button"
            android:enabled="false"
            android:text="@string/next" />

        </TableRow>

    </TableLayout>

</RelativeLayout>

How would we replicate this in Jetpack compose?

Answer 1

I'm not sure how that XML works as it had no definition of Gravity or Height.

But if you want a view to be at the bottom of the colum at all times, you can make a separate Box that has your button and giving max size and a content gravity of Bottom