0

I have the following code for the input text

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:background="@drawable/ic_login_screen_input_container">
        <EditText android:id="@+id/input_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:hint="Name"/>
    </android.support.design.widget.TextInputLayout>

After adding the android:background, the input text becomes: enter image description here

As you see, i added the rounded container as a background image, but the input text box still has the rectangular box behind it. My ultimate goal is to create a input text box like this: enter image description here

Then when user start typing in the box, the input text box should becomes: enter image description here

Please let me know how i should achieve this

spiderloop
  • 809
  • 1
  • 9
  • 10

3 Answers3

0

I resolve this problem by enabling Material Design as suggested by @Mohammad (https://stackoverflow.com/a/52401339/9793695), however, i also need to follow instruction in (Updating com.android.support libraries v7:26.+ to v7:28.0.0 throw Multiple dex files define Lcom/google/common/util/concurrent/ListenableFuture) to resolve all the dependencies first. Hope this help!

spiderloop
  • 809
  • 1
  • 9
  • 10
0

Use compileSdkVersion 28

Use targetSdkVersion 28

Dependencies

implementation 'com.android.support:appcompat-v7:28.0.0-alpha3'
implementation 'com.android.support:design:28.0.0-alpha3'

Add this code

<android.support.design.widget.TextInputLayout
        android:id="@+id/userIDTextInputLayout"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/userIDTextInputEditText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Email or Username" />
    </android.support.design.widget.TextInputLayout>
Sanjayrajsinh
  • 15,014
  • 7
  • 73
  • 78
-1

add android:background="@drawable/ic_login_screen_input_container" inside EditText and remove it from TextInputLayout OR add android:background="@null" to your EditText

Mohammad Sayed
  • 244
  • 2
  • 8
  • i tried your suggestion, but doesn't work, it behave the same as i reported above – spiderloop Jan 16 '19 at 03:31
  • I found out this line of code put it in your textinputlayout as a style it will give you the outline box style 'style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"' – Mohammad Sayed Jan 17 '19 at 21:46
  • It is not resolvable, do you include any library? – spiderloop Jan 18 '19 at 04:22
  • I tried that but got a merge dex error: java.lang.RuntimeException: java.lang.RuntimeException: com.android.builder.dexing.DexArchiveMergerException: Unable to merge dex at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method) at sun.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:62) at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45) at java.lang.reflect.Constructor.newInstance(Constructor.java:423) at java.util.concurrent.ForkJoinTask.getThrowableException ... – spiderloop Jan 18 '19 at 22:51