Focusing Hint EditText: A Picky requirement from UI Designer
Focusing Hint EditText: A Picky requirement from UI Designer
Software Engineers deal with picky requirements. Sometimes, I would just say ‘It’s impossible because Android does not allow it.’.
The requirements looks really simple for UI/UX designers, but for us it’s not! Anyway actually I make it.
In Android, When EditText is focused, the hint is disappear. But UI/UX designer wanted that hint remain when it doesn’t have any text even if it’s focused.
After an hour trying, I made it!!
Be Tricky Developer👻
MainActivity.kt
class MainActivity: AppCompatActivity() {
private lateinit var binding: ActivityMainBinding
private var hasChanged = false
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
binding.editText.run {
requestFocus()
//set TextColor to the hint color
setTextColor(context.getColorCompatible(android.R.color.darker_gray))
//set position of cursor at the head.
setSelection(0)
addTextChangedListener(object: TextWatcher {
override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}
override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
if(!hasChanged) {
//this Focusing Hint valid only the first time.
hasChanged = true
//set TextColor to the normal color
setTextColor(context.getColorCompatible(android.R.color.black))
//remove the hint in the Text
text = text.toString().replace("YOUR_HINT", "").toEditable()
//set position of cursor at the second
setSelection(1)
}
}
override fun afterTextChanged(s: Editable?) {}
})
}
}
}
activity_main.xml
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Actually `android:text` will be a tricky hint, because it's focused. -->
<EditText
android:id="@+id/editText"
android:layout_width="200dp"
android:layout_height="70dp"
android:hint=""
android:inputType="textMultiLine"
android:text="YOUR_HINT"
android:textSize="16dp"
app:layout_cosstraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Real Tricky And Easy Way😈
My team leader let me know this way…
MainActivity.kt
class MainActivity: AppCompatActivity() {
private lateinit var binding: ActivityMainBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
binding.editText.run {
requestFocus()
addTextChangedListener(object: TextWatcher {
override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}
override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
if (s.isNullOrBlank()) {
hintText.visibility = View.VISIBLE
} else {
hintText.visibility = View.GONE
}
}
override fun afterTextChanged(s: Editable?) {}
})
}
}
}
activity_main.xml
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="@+id/editText"
android:layout_width="200dp"
android:layout_height="70dp"
android:hint=""
android:inputType="textMultiLine"
android:textSize="16dp"
app:layout_cosstraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="@+id/hint_text"
style="@style/regular_textStyle"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="YOUR_HINT"
android:textColor="@android:color/darker_gray"
android:textSize="16dp"
android:gravity="center_vertical"
app:layout_constraintBottom_toBottomOf="@+id/editText"
app:layout_constraintLeft_toLeftOf="@+id/editText"
app:layout_constraintTop_toTopOf="@+id/editText" />
</androidx.constraintlayout.widget.ConstraintLayout>
If there are some mistakes, always welcome your opinion!
android
[Jetpack Compose] LazyColumn: Escape from Recyclerview
Last month, Jetpack Compose Beta was released! see Beta Overview Even if it’s beta, looks cool for some super advantages. In this posting, I will focus on L...
Your First Custom View: Clubhouse ProgressBar!
No doubt about that Clubhouse is the most hottest social media recently. There is no special UI/UX which is never have seen anywhere else. But I’m impressed ...
Activity Result API: RegisterForActivityResult
Almost every Android developers have tried passing data and getting response between two activities. Before Result API released, we passed data on startActi...
kotlin
[Custom Accessor] Make Getter more simple with Kotlin
Let’s say you already know about getter and setter of Java. The Accessors are like this:
progressBar
Your First Custom View: Clubhouse ProgressBar!
No doubt about that Clubhouse is the most hottest social media recently. There is no special UI/UX which is never have seen anywhere else. But I’m impressed ...
compose
[Jetpack Compose] LazyColumn: Escape from Recyclerview
Last month, Jetpack Compose Beta was released! see Beta Overview Even if it’s beta, looks cool for some super advantages. In this posting, I will focus on L...