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