在TextInputLayout中浮動提示中的不透明背景

Question

我必須使用浮動提示標籤進行textinputlayout，需要有白色背景。有些什麼類似this--

設計預期：

但這一切我已經能夠到目前爲止，要做到這一點：

用實際設計TextInputLayout：

目前TextInputLayout中的提示標籤具有透明背景。 任何人都可以請幫助我，並告訴如何使這成爲可能？

這裏是我的代碼（texinput佈局）：

<android.support.design.widget.TextInputLayout 
    android:id="@+id/til_login_info" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="@drawable/text_input_layout_background" 
    app:hintTextAppearance="@style/TextStyle.Small.Hint"> 

    <EditText 
     android:id="@+id/login_info" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@color/transparent" 
     android:gravity="center_vertical" 
     android:hint="Email/Mobile" 
     android:inputType="text" 
     android:textSize="14sp" /> 
</android.support.design.widget.TextInputLayout> 

，我使用

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item 
     android:gravity="bottom" 
     android:top="5dp"> 
     <shape android:shape="rectangle"> 
      <stroke 

       android:width="1px" 
       android:color="@color/Grey300" /> 
      <corners android:radius="100dp" /> 
      <solid android:color="@color/transparent" /> 
     </shape> 
    </item> 
</layer-list> 

提前感謝的背景！

Answer 1

這裏是一個解決辦法：

設計如下您layout結構：

activity_test.xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:padding="16dp" 
    android:background="@android:color/white"> 

    <!-- Mobile number --> 
    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <View 
      android:layout_width="match_parent" 
      android:layout_height="52dp" 
      android:layout_marginTop="10dp" 
      android:background="@drawable/bg_rounded_input_field" /> 

     <TextView 
      android:id="@+id/text_dummy_hint_mobile_number" 
      android:layout_width="wrap_content" 
      android:layout_height="2dp" 
      android:layout_marginTop="10dp" 
      android:layout_marginLeft="28dp" 
      android:paddingLeft="4dp" 
      android:paddingRight="4dp" 
      android:text="Mobile Number" 
      android:textSize="16sp" 
      android:background="@android:color/white" 
      android:visibility="invisible"/> 

     <android.support.design.widget.TextInputLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="28dp" 
      android:layout_marginRight="28dp" 
      android:hint="Mobile Number" 
      android:textColorHint="@android:color/black" 
      app:hintTextAppearance="@style/HintTextStyle"> 

      <EditText 
       android:id="@+id/edit_mobile_number" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:inputType="text" 
       android:maxLines="1" 
       android:backgroundTint="@android:color/transparent"/> 
     </android.support.design.widget.TextInputLayout> 
    </RelativeLayout> 

    <!-- Promo code --> 
    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="8dp"> 

     <View 
      android:layout_width="match_parent" 
      android:layout_height="52dp" 
      android:layout_marginTop="10dp" 
      android:background="@drawable/bg_rounded_input_field" /> 

     <TextView 
      android:id="@+id/text_dummy_hint_promo_code" 
      android:layout_width="wrap_content" 
      android:layout_height="2dp" 
      android:layout_marginTop="10dp" 
      android:layout_marginLeft="28dp" 
      android:paddingLeft="4dp" 
      android:paddingRight="4dp" 
      android:text="Promo Code" 
      android:textSize="16sp" 
      android:background="@android:color/white" 
      android:visibility="invisible"/> 

     <android.support.design.widget.TextInputLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="28dp" 
      android:layout_marginRight="28dp" 
      android:hint="Promo Code" 
      android:textColorHint="@android:color/black" 
      app:hintTextAppearance="@style/HintTextStyle"> 

      <EditText 
       android:id="@+id/edit_promo_code" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:inputType="text" 
       android:maxLines="1" 
       android:backgroundTint="@android:color/transparent"/> 
     </android.support.design.widget.TextInputLayout> 
    </RelativeLayout> 
</LinearLayout> 

2.使用以下可繪製的bg_rounded_input_field.xml作爲圓角。

RES /抽拉/ bg_rounded_input_field.xml

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle" > 

    <stroke 
     android:color="@android:color/black" 
     android:width="2dp"> 
    </stroke> 

    <corners 
     android:radius="1000dp"> 
    </corners> 

</shape> 

3.使用下面HintTextStyle到TextInputLayout通過添加屬性app:hintTextAppearance="@style/HintTextStyle"。

RES /價值/ styles.xml

<style name="HintTextStyle" parent="TextAppearance.Design.Hint"> 
    <item name="android:textSize">16sp</item> 
</style> 

4.最後，在Activity只是show/hide的text_dummy_hint_mobile_number和text_dummy_hint_promo_code 期間focus變化。

僅供參考，我已經使用Handler與延遲100 millis到 顯示虛擬提示TextView與TextInputLayout提示文本 animation同步。

TestActivity.java

import android.os.Handler; 
import android.support.v7.app.AppCompatActivity; 
import android.os.Bundle; 
import android.view.View; 
import android.widget.EditText; 
import android.widget.TextView; 

public class TestActivity extends AppCompatActivity { 

    TextView textDummyHintMobileNumber; 
    TextView textDummyHintPromoCode; 
    EditText editMobileNumber; 
    EditText editPromoCode; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_test); 

     textDummyHintMobileNumber = (TextView) findViewById(R.id.text_dummy_hint_mobile_number); 
     textDummyHintPromoCode = (TextView) findViewById(R.id.text_dummy_hint_promo_code); 
     editMobileNumber = (EditText) findViewById(R.id.edit_mobile_number); 
     editPromoCode = (EditText) findViewById(R.id.edit_promo_code); 

     // Mobile number 
     editMobileNumber.setOnFocusChangeListener(new View.OnFocusChangeListener() { 
      @Override 
      public void onFocusChange(View v, boolean hasFocus) { 

       if (hasFocus) { 
        new Handler().postDelayed(new Runnable() { 

         @Override 
         public void run() { 
          // Show white background behind floating label 
          textDummyHintMobileNumber.setVisibility(View.VISIBLE); 
         } 
        }, 100); 
       } else { 
        // Required to show/hide white background behind floating label during focus change 
        if (editMobileNumber.getText().length() > 0) 
         textDummyHintMobileNumber.setVisibility(View.VISIBLE); 
        else 
         textDummyHintMobileNumber.setVisibility(View.INVISIBLE); 
       } 
      } 
     }); 

     // Promo code 
     editPromoCode.setOnFocusChangeListener(new View.OnFocusChangeListener() { 
      @Override 
      public void onFocusChange(View v, boolean hasFocus) { 

       if (hasFocus) { 
        new Handler().postDelayed(new Runnable() { 

         @Override 
         public void run() { 
          // Show white background behind floating label 
          textDummyHintPromoCode.setVisibility(View.VISIBLE); 
         } 
        }, 100); 
       } else { 
        // Required to show/hide white background behind floating label during focus change 
        if (editPromoCode.getText().length() > 0) 
         textDummyHintPromoCode.setVisibility(View.VISIBLE); 
        else 
         textDummyHintPromoCode.setVisibility(View.INVISIBLE); 
       } 
      } 
     }); 
    } 
} 

OUTPUT：

希望這將有助於〜