title: Set two compound drawables in Android EditText
body: <p>I have the below <code>TextInputEditTexts</code> nested inside custom <code>TextInputLayouts</code> and I'm wanting to have both the "x" icon and the password toggle visible at the same time. However, the eye toggle is overriding the "x" icon.</p>
  
  <p>I have a custom <code>TextInputLayout</code> called <code>LoginInputLayout</code> where I'm trying to add two drawables over on the right hand side of the password editText, but I keep only getting the eye icon.</p>
  
  <p><strong>How can I add the two drawables over on the right hand side and not have one override the other? Like in the image below.</strong></p>
  
  <p>This is the design that I'm trying to get to </p>
  
  <p><a href="https://i.stack.imgur.com/0YpLH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0YpLH.png" alt="enter image description here"></a></p>
  
  <p>In the Android implementation for the parent <code>LayoutInputTextView</code> it looks like the first child is actually a <code>FrameLayout</code> and a child of that FL is the <code>TextInputEditText</code>. </p>
  
  <p>When the password toggle (which causes the eye to appear) is set to show, it looks like the android implementation inflates the view for the toggle, and sets it inside the FrameLayout like below.</p>
  
  <pre><code>if (shouldShowPasswordIcon()) {
              if (mPasswordToggleView == null) {
                  mPasswordToggleView = (CheckableImageButton) LayoutInflater.from(getContext())
                          .inflate(R.layout.design_text_input_password_icon, mInputFrame, false);
                  mPasswordToggleView.setImageDrawable(mPasswordToggleDrawable);
                  mPasswordToggleView.setContentDescription(mPasswordToggleContentDesc);
                  mInputFrame.addView(mPasswordToggleView);
  
                  mPasswordToggleView.setOnClickListener(new View.OnClickListener() {
                      @Override
                      public void onClick(View view) {
                          passwordVisibilityToggleRequested(false);
                      }
                  });
              }
  </code></pre>
  
  <p>The only thing is, the mFrameLayout member variable is private and I can't add more children in there or control where they're placed. Which is why I feel like I'm limited to trying the compound drawable way.</p>
  
  <pre><code> &lt;com.ge.cbyge.view.LoginInputTextLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:gravity="center_vertical"
          app:error="@{viewModel.emailError}"&gt;
  
          &lt;android.support.design.widget.TextInputEditText
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:hint="@string/login_fragment_email_text"
              android:focusable="true"
              android:focusableInTouchMode="true"
              android:inputType="textEmailAddress"
              android:maxLines="1"
              android:text="@={viewModel.email}"/&gt;
  
      &lt;/com.ge.cbyge.view.LoginInputTextLayout&gt;
  
      &lt;com.ge.cbyge.view.LoginInputTextLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_marginBottom="@dimen/placeholder_dimen"
          android:maxLines="1"
          app:error="@{viewModel.passwordError}"
          app:passwordToggleEnabled="true"&gt;
  
          &lt;android.support.design.widget.TextInputEditText
              android:id="@+id/password_edit_text"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:hint="@string/login_fragment_password_text"
              android:focusable="true"
              android:focusableInTouchMode="true"
              android:text="@={viewModel.password}"/&gt;
  
  &lt;/com.ge.cbyge.view.LoginInputTextLayout&gt;
  </code></pre>
  
  <p>This is my custom implementation of the <code>TextInputLayout</code></p>
  
  <pre><code>class LoginInputTextLayout : TextInputLayout, TextWatcher {
  
      lateinit var clearTextIcon: Drawable
  
      constructor(context: Context) : super(context)
  
      constructor(context: Context, attrs: AttributeSet) : super(context, attrs)
  
      constructor(context: Context, attrs: AttributeSet, defStyle: Int) : super(context, attrs, defStyle)
  
      override fun addView(child: View?, index: Int, params: ViewGroup.LayoutParams) {
          super.addView(child, index, params)
  
          if(child is EditText) {
              Timber.d("$TAG child was an editText")
              if (editText != null) {
                  Timber.d("$TAG initializing the clearText")
                  init(context)
              }
          }
      }
  
      private fun init(context: Context) {
          val drawable = ContextCompat.getDrawable(context, R.drawable.abc_ic_clear_material)
          DrawableCompat.setTint(drawable, editText!!.currentHintTextColor)
          clearTextIcon = drawable
          clearTextIcon.setBounds(0, 0, clearTextIcon.intrinsicHeight, clearTextIcon.intrinsicHeight)
          setClearIconVisible(false)
          editText!!.transformationMethod = PasswordTransformationMethod.getInstance()
          editText!!.setOnTouchListener(onTouchListener)
          editText!!.setOnFocusChangeListener(focusChangeListener)
          editText!!.addTextChangedListener(this)
      }
  
      private val onTouchListener: View.OnTouchListener = OnTouchListener { v, event -&gt;
          val x = event.x.toInt()
          if (clearTextIcon.isVisible &amp;&amp; x &gt; width - paddingRight - clearTextIcon.intrinsicWidth) {
              if (event.action == MotionEvent.ACTION_UP) {
                  editText?.setText("")
              }
              return@OnTouchListener true
          }
  
          return@OnTouchListener false
      }
  
      private val focusChangeListener: View.OnFocusChangeListener = OnFocusChangeListener { v, hasFocus -&gt;
          if (hasFocus) {
              setClearIconVisible(editText!!.text.isNotEmpty())
          } else {
              setClearIconVisible(false)
          }
      }
  
      private fun setClearIconVisible(visible: Boolean) {
          clearTextIcon.setVisible(visible, false)
          val compoundDrawables = TextViewCompat.getCompoundDrawablesRelative(editText!!)
          TextViewCompat.setCompoundDrawablesRelative(
                  editText!!,
                  compoundDrawables[0],
                  compoundDrawables[1],
                  if (visible) clearTextIcon else null,
                  compoundDrawables[3])
      }
  
      override fun onTextChanged(s: CharSequence, start: Int, before: Int, count: Int) {
          if (editText!!.isFocused) {
              setClearIconVisible(s.isNotEmpty())
          }
      }
  
      override fun beforeTextChanged(s: CharSequence, start: Int, count: Int, after: Int) {}
  
      override fun afterTextChanged(s: Editable) {}
  }
  </code></pre>