How can I expand a Floating Action Button into an EditText in Android?

Question

I'm trying to create a custom interaction where a Floating Action Button (FAB) expands into an EditText when clicked, and collapses back into the FAB when clicked again. The behavior I'm looking for is similar to what’s shown in the image below, where the FAB smoothly transitions into an input field.

Here’s an example of what I’m trying to achieve:

The expanded FAB would ideally still show an icon (like a checkmark), but it would also allow the user to type in the input field after it expands.

What I've Tried So Far:

1. I attempted to use an ExtendedFloatingActionButton, which has built-in expand/collapse methods (extend() and shrink()), but this doesn't quite give me the seamless behavior of integrating an input field directly into the FAB.

2. I also considered placing an EditText next to the FAB in a LinearLayout, hiding it by default, and then making it visible when the FAB is clicked. However, I want the EditText to appear as if it's part of the FAB itself, not as a separate component.

Is there a better approach to this?

Answer 1

Your Can achieve this with ImageView and EditText.

Here is XML Code Example

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/search_container"
    android:layout_width="wrap_content"
    android:layout_height="70dp"
    android:layout_margin="30dp"
    android:background="@drawable/round_corner"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">


    <ImageView
        android:id="@+id/search_icon"
        android:layout_width="70dp"
        android:layout_height="50dp"
        android:layout_margin="5dp"
        android:scaleType="center"
        android:src="@drawable/ic_edit_24"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/search_edit_text"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/search_edit_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="start|center_vertical"
        android:hint="Search..."
        android:paddingEnd="20dp"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@id/search_icon"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

Here is Kotlin Code Example

 override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main2)
    
   var searchIcon:ImageView = findViewById(R.id.search_icon)
   var searchEditText:EditText = findViewById(R.id.search_edit_text)
    searchEditText.background = null
    searchEditText.visibility = View.GONE

    val constraintLayout = findViewById<ConstraintLayout>(R.id.search_container)
    val constraintSet = ConstraintSet()
    constraintSet.clone(constraintLayout)

    searchEditText.visibility = View.VISIBLE
    searchEditText.hint = "Search"
    searchEditText.requestFocus()

    val widthAnimator = ValueAnimator.ofInt(
        0,
        (constraintLayout.parent as View).width * 6 / 10
    ) // 60% of parent width
    widthAnimator.addUpdateListener { valueAnimator ->
        val layoutParams = searchEditText.layoutParams
        layoutParams.width = valueAnimator.animatedValue as Int
        searchEditText.layoutParams = layoutParams
    }

    widthAnimator.duration = 400 // Keep the same duration for balance
    widthAnimator.start()

    searchIcon.setImageResource(R.drawable.ic_done_24)
    val imm = getSystemService(INPUT_METHOD_SERVICE) as InputMethodManager
    imm.showSoftInput(searchEditText, InputMethodManager.SHOW_IMPLICIT)


}

Here is Final Output in Gif enter image description here