Floating label with two editText

Question

I want to achieve Something like this. A floating label with two edit texts. I Used TextInputLayout and some other libraries too, but all accept only single child as EditText. Any help is appreciated.

Both Edit Text must be focusable and the hint goes up from second one.

Answer 1

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

"Both Edit Text must be focusable and the hint goes up from second one."

\res\layout\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>

With 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's some styles and themes I have played with to get the desired result.
How to Change the floating hint font size and colour etc... 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'll need to add a dependency for the android design library in your primary build.gradle:

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 designs provided by the library in your XML by 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 seem to find a way to get 2 children of TextInputLayout... It's just not how it's meant to work... But you can simply add another one which will work just as well. In your case, all you need to do is make your primary layout Relative and then set the Country Code TILayout's position relative to the Phone Number TILayout's.

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>

Hope I helped :D