Inscription TextInputLayout to a level exceeding the left selected part of EditText

Question

Is it possible for the TextInputLayout label to appear perpendicular above the left EditText drawing when the user focuses or types in the EditText.

Here is the xml EditText:

<android.support.design.widget.TextInputLayout android:id="@+id/completion_date_layout2" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" android:layout_weight="1" android:orientation="horizontal"> <EditText android:id="@+id/etTaskDate" android:layout_width="match_parent" android:layout_height="match_parent" android:hint="@string/title_completion_date" android:inputType="text" android:drawableLeft="@drawable/ic_date" android:paddingBottom="15dp" android:drawablePadding="5dp" android:textSize="@dimen/fields_text_size"/> </android.support.design.widget.TextInputLayout> 

Here is the desired result:

Here is the result I get:

Answer 1

Thanks to the access model for Java members and Google developers who have left a small loophole, this can be achieved with a simple subclass that repeats the minimal source code:

 package android.support.design.widget; import android.content.Context; import android.graphics.Rect; import android.util.AttributeSet; public final class TextInputLayoutEx extends TextInputLayout { private final int mDefaultPadding = __4DP__; private final Rect mTmpRect = new Rect(); public TextInputLayoutEx(Context context, AttributeSet attrs) { super(context, attrs); } @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { super.onLayout(changed, left, top, right, bottom); if (isHintEnabled() && mEditText != null) { final Rect rect = mTmpRect; ViewGroupUtils.getDescendantRect(this, mEditText, rect); mCollapsingTextHelper.setCollapsedBounds( rect.left + mDefaultPadding, getPaddingTop(), rect.right - mDefaultPadding, bottom - top - getPaddingBottom()); mCollapsingTextHelper.recalculate(); } } } 

Here we put the new class in the same package, which gives access to mCollapsingTextHelper with package-level visibility, and then repeats part of the code from the original onLayout method, which controls the positioning of the field name. The __4DP__ value is a 4dp value converted to pixels, I'm sure everyone has a utility method for this.

In your xml layout, just switch from android.support.design.widget.TextInputLayout to android.support.design.widget.TextInputLayoutEx so that your layout looks like this:

 <android.support.design.widget.TextInputLayoutEx android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Mobile"> <android.support.design.widget.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content" android:drawableLeft="@drawable/ic_phone_black_24dp" android:drawablePadding="4dp"/> </android.support.design.widget.TextInputLayoutEx> 

And the result

It currently works for com.android.support:design:25.3.1

Answer 2

You can use the animation and frame_layout to animate the left icon, try this link, it may be useful to you.

Answer 3

I made a workaround on this issue. It may be a little unreliable, but it works on my end. Here is the code:

 String spacer=" "; EditText myEditText= (EditText)findViewById(R.id.myEditText); myEditText.setText(spacer + "Today"); myEditText.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_calendar, 0, 0, 0); 

What I did here was placing a separator in front of the text inside the editText, then programmatically adding the left program code.

But do not remove these spaces before extracting the contents of the editText:

 String title = myEditText.getText().toString().substring(8); 

This means that I trimmed 8 spaces before the word "Today."