Floating label with two editText

Question

I want to achieve something similar. Floating label with two edit texts. I used TextInputLayout and some other libraries, but all accept only one child as EditText . Any help is appreciated.

Both editing texts should be focused, and the tooltip rises from the second.

Answer 1

This should do what you want (both EditText focusable, hint in one place [but change in focus]):

"Both the Edit text must be customizable, and the tooltip rises from the second."

\ Res \ location \ edittext_main.xml:

 <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/linlay0" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingTop="60dp" android:orientation="horizontal"> <android.support.design.widget.TextInputLayout android:id="@+id/TextInputLayout1" android:layout_width="wrap_content" android:layout_height="wrap_content" > <EditText android:id="@+id/EditText1" android:hint="code" android:text="0044" android:inputType="phone" android:singleLine="true" android:layout_width="130dp" android:layout_height="wrap_content"/> </android.support.design.widget.TextInputLayout> <!-- separator --> <ImageView android:id="@+id/ImageViewSep" android:layout_width="20dp" android:layout_height="20dp" android:adjustViewBounds="true" android:contentDescription="separator" android:translationX="-60dp" android:translationY="20dp" android:src="@drawable/line" /> <EditText android:id="@+id/EditText2" android:hint="phone number" android:text="1234567890" android:inputType="phone" android:singleLine="true" android:layout_width="130dp" android:translationX="-60dp" android:translationY="7dp" android:layout_height="wrap_content"/> </LinearLayout> 

Using this code in your activity:

  private static final String TAG = EditActivity.class.getSimpleName(); private Context m_context; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); m_context = getApplicationContext(); setContentView(R.layout.edittext_main); final TextInputLayout tiv1 = (TextInputLayout) findViewById(R.id.TextInputLayout1); final EditText edit_Text1 = (EditText) findViewById(R.id.EditText1); final EditText edit_Text2 = (EditText) findViewById(R.id.EditText2); edit_Text1.setOnFocusChangeListener(new OnFocusChangeListener() { @Override public void onFocusChange(View v, boolean hasFocus) { if(hasFocus){ // Toast.makeText(m_context, "edit_Text1 got the focus", Toast.LENGTH_LONG).show(); tiv1.setHint("code"); }else { // Toast.makeText(m_context, "edit_Text1 lost the focus", Toast.LENGTH_LONG).show(); } } }); edit_Text2.setOnFocusChangeListener(new OnFocusChangeListener() { @Override public void onFocusChange(View v, boolean hasFocus) { if(hasFocus){ // Toast.makeText(m_context, "edit_Text2 got the focus", Toast.LENGTH_LONG).show(); tiv1.setHint(edit_Text2.getHint()); }else { // Toast.makeText(m_context, "edit_Text2 lost the focus", Toast.LENGTH_LONG).show(); } } }); }//onCreate 

Here are some images generated by the code:

Here are some styles and themes that I played with to get the desired result.
How to change font size and font color of a floating tooltip ... res \ values ​​\ styles:

  <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light"> <!-- Customize your theme here. --> <item name="colorPrimary">#ff0000</item> <item name="colorPrimaryDark">#ff0000</item> <item name="colorAccent">#ff0000</item> </style> <style name="Widget.Design.TextInputLayout" parent="AppTheme"> <item name="hintTextAppearance">@style/AppTheme.TextFloatLabelAppearance</item> <item name="errorTextAppearance">@style/AppTheme.TextErrorAppearance</item> <item name="counterTextAppearance">@style/TextAppearance.Design.Counter</item> <item name="counterOverflowTextAppearance">@style/TextAppearance.Design.Counter.Overflow</item> </style> <style name="AppTheme.TextFloatLabelAppearance" parent="TextAppearance.Design.Hint"> <!-- Floating label appearance here --> <item name="android:textColor">#ff0000</item> <item name="android:textSize">10sp</item> </style> <style name="AppTheme.TextErrorAppearance" parent="TextAppearance.Design.Error"> <!-- Error message appearance here --> <item name="android:textColor">#ff0000</item> <item name="android:textSize">20sp</item> </style> <style name="TextHint" parent="Base.TextAppearance.AppCompat"> <item name="android:textSize">18sp</item> <item name="android:textColor">#00FF00</item> </style> 

Answer 2

I found a semi-solution for this online.

First, you need to add the dependency for the Android design library in your main build.gradle file:

 dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:22.2.0' compile 'com.android.support:design:22.2.0' } 

Then you can use the projects provided by the library in your XML using:

 <android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/PhoneNumberTILayout" android:layout_marginTop="@strings/my_margin_top"> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Phone Number" /> </android.support.design.widget.TextInputLayout> 

Now I can’t find a way to get 2 children TextInputLayout ... It's just not how it should work ... But you can just add another one that will work just as well. In your case, all you have to do is make your main Relative layout and then set the TILayout position of the country code relative to the TILayout phone number.

This is what I have for the relativelayout part:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.android.testapp.MainActivity" > <android.support.design.widget.TextInputLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="20dp" android:id="@+id/TILayout" android:layout_alignParentTop="true" android:layout_alignParentStart="true" android:layout_marginStart="11dp" android:layout_marginTop="20dp"> <EditText android:layout_width="wrap_content" android:layout_height="match_parent" android:hint="Code" android:textSize="26sp" android:ems="3" android:id="@+id/PhoneCode" /> <android.support.design.widget.TextInputLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/PhoneNumberTILayout" android:layout_marginTop="-64dp" android:layout_marginLeft="100dp"> <EditText android:layout_width="wrap_content" android:layout_height="match_parent" android:hint="Phone Number" android:textSize="26sp" android:ems="6" android:id="@+id/PhoneNumber" /> </android.support.design.widget.TextInputLayout> </android.support.design.widget.TextInputLayout> </RelativeLayout> 

I hope I helped: D