how to set endIconMode in a custom TextInputLayout?

535 Views Asked by At

I'm trying to figure out how to set the endIconMode in a custom text input layout. I am trying to set this in the attrs.xml, not programmatically (this is how I'm asked to do it at work)

here's what it looks like:

attrs.xml

<declare-styleable name="CustomTextInputLayout">
  <attr name="custom_label" format="string|reference"/>
  <attr name="custom_hint" format="string|reference"/>
  <attr name="custom_helper_text" format="string|reference"/>
  <attr name="custom_password_field" format="boolean"/>
  <attr name="custom_show_helper_text" format="boolean"/>
  <attr name="custom_end_icon_drawable" format="reference"/>
  <attr name="custom_end_icon_mode" format="enum">
    <enum name="custom" value="-1"/>
    <enum name="none" value="0"/>
    <enum name="password_toggle" value="1"/>
    <enum name="clear_text" value="2"/>
    <enum name="dropdown_menu" value="3"/>
  </attr>
  <attr name="custom_end_icon_description" format="reference"/>
  <attr name="custom_show_label" format="boolean"/>
  <attr name="custom_input_mode" format="reference"/>
</declare-styleable>

And here is the xml:

<com.example.ui_components.CustomTextInputLayout
    android:id="@+id/bk_birthday"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    app:custom_label="@string/profile_field_birthday"
    app:custom_hint="@string/profile_field_birthday"
    app:custom_helper_text="@string/sign_up_birthday_field_helper"
    app:custom_show_label="true"
    app:custom_show_helper_text="true"
    app:custom_end_icon_drawable="@drawable/ic_calendar"
    app:custom_end_icon_description="@string/set_birthday"
    app:custom_end_icon_mode="custom"
    app:layout_constraintTop_toBottomOf="@id/description"
    app:layout_constraintStart_toStartOf="@id/g_left"
    app:layout_constraintEnd_toEndOf="@id/g_right"
  />

however the icon is not showing up at all. What am I missing? All of the other values are showing up as expected except the end icon.

This is why I chose to do the endIconMode the way I did -

I'd also like to avoid getters and setters if possible, but not sure how to go about doing that. Here's my custom text input component:

class CustomTextInputLayout @JvmOverloads constructor(
  context: Context,
  attrs: AttributeSet? = null,
  defStyleAttr: Int = 0,
  defStyleRes: Int = 0,
) : ConstraintLayout(context, attrs, defStyleAttr, defStyleRes) {

  private val binding = CustomTextInputLayoutBinding.inflate(LayoutInflater.from(context), this)

  init {
    context.obtainStyledAttributes(attrs, R.styleable.CustomTextInputLayout, defStyleAttr, defStyleRes)
      .run {
        setHint(getString(R.styleable.CustomTextInputLayout_textInput_hint) ?: "")
        if (getBoolean(R.styleable.CustomTextInputLayout_textInput_show_label, false)) {
          setLabel(getString(R.styleable.CustomTextInputLayout_textInput_label) ?: "")
        }
        if (getBoolean(R.styleable.CustomTextInputLayout_bktil_show_helper_text, false))
          setHelperText(getString(R.styleable.CustomTextInputLayout_textInput_helper_text) ?: "")
        recycle()

      }
  }
fun setLabel(label: String) {
  binding.customTextInputLayout.text = label
  header.labelFor
}

fun setHint(hint: String) {
    binding.customTextEditText.hint = hint
  }

fun setHelperText(helper: String) {
    binding.customTextInputLayout.helperText = helper
  }

here is the .xml layout

<merge
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:parentTag="androidx.constraintlayout.widget.ConstraintLayout"
    >

  <TextView
      android:id="@+id/header_label"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginTop="20dp"
      android:textAppearance="?textAppearanceHeadline6"
      android:textStyle="bold"
      android:labelFor="@id/custom_text_input_wrapper"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      tools:text="Email Address"
      android:contentDescription="@string/textHeaderLabel"
      />

  <com.google.android.material.textfield.TextInputLayout
      android:id="@+id/custom_text_input_wrapper"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginTop="20dp"
      app:boxCornerRadiusTopStart="8dp"
      app:boxCornerRadiusBottomEnd="8dp"
      app:boxCornerRadiusBottomStart="8dp"
      app:boxCornerRadiusTopEnd="8dp"
      app:layout_constraintTop_toBottomOf="@id/header_label"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:hintEnabled="false"
      >

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/custom_text_input_edit_text"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        tools:hint="Email Address"
        android:paddingTop="0dp"
        android:paddingBottom="0dp"
        android:imeOptions="actionNext"
        android:inputType="textEmailAddress"
        android:singleLine="true"
        />

  </com.google.android.material.textfield.TextInputLayout>

</merge>

Thanks!!

0

There are 0 best solutions below