android - studio - textinputlayout color

TextInputLayout: ¿Cómo dar relleno o margen a la pista?

Question

Tengo que usar TextInputLayout de la biblioteca de soporte de diseño en mi proyecto. Quiero dar espacio entre la hint y EditText en TextInputLayout . Establecí el margen y el relleno en TextInputLayout e incluso dentro de EditText pero ambos no funcionan. Por lo tanto, cómo resolver este problema. Aquí adjunto una captura de pantalla y mi codificación.

==============================Style=================================

<style name="TextHint" parent="Base.TextAppearance.AppCompat">
    <item name="android:textSize">18sp</item>
    <item name="android:textColor">@color/green</item>
</style>



=============================XML===================================  
<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    app:hintTextAppearance="@style/TextHint"
    android:layout_marginTop="10dp"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:layout_height="wrap_content">
<EditText
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:id="@+id/edttxtEmailAddress"
    android:singleLine="true"
    android:hint="@string/enter_valid_email"
    android:paddingLeft="20dp"
    android:textSize="20sp"
    android:background="@drawable/rounded_common"/>
</android.support.design.widget.TextInputLayout>

Answer 1

Creo que deberías considerar esto:

La biblioteca de diseño adopta un enfoque interesante para personalizar EditText : no lo cambia directamente. En cambio, TextInputLayout se usa para ajustar EditText y proporcionar las mejoras.

El primero, que muestra una etiqueta flotante cuando el usuario escribe algo en el campo, se realiza de forma automática. TextInputLayout encuentra EditText entre sus elementos EditText y se adjunta como TextWatcher , por lo que puede determinar cuándo se ha modificado el campo y anima el movimiento de la sugerencia desde su lugar habitual en EditText a la posición de etiqueta flotante situada encima.

La segunda mejora, que muestra el mensaje de error, requiere un ligero cambio en el código. En lugar de establecer el error en EditText, el error debe establecerse en TextInputLayout . Esto se debe a que no hay forma automática de que TextInputLayout una notificación cuando el error se establece en EditText . Así es como se vería el diseño:

<android.support.design.widget.TextInputLayout
    android:id="@+id/username_text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <EditText
        android:id="@+id/username_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/username_hint"/>
</android.support.design.widget.TextInputLayout>

Tenga en cuenta que tanto EditText como TextInputLayout necesitan ID de diseño. En el fragmento, necesitaríamos configurar TextInputLayout para permitir la visualización de errores:

TextInputLayout usernameTextInputLayout = (TextInputLayout) view.findViewById(R.id.username_text_input_layout);
usernameTextInputLayout.setErrorEnabled(true);
...
usernameTextInputLayout.setError(R.string.username_required);

Answer 2

He estado buscando la solución a esta pregunta en los últimos días. Después de arrancarme los pelos durante horas, finalmente encontré una solución simple. Lo que he notado es que si tienes un fondo personalizado configurado en EditText, el atributo android: paddingTop simple no funciona para alterar el espaciado b / w el texto de sugerencia y editar el texto (realmente no tengo idea de por qué). Entonces, si ha configurado un fondo personalizado para su EditText, puede usar el atributo android: translationY en EditText .

Así que aquí está tu solución:

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:layout_marginTop="10dp"
    app:hintTextAppearance="@style/TextHint">

    <EditText
        android:id="@+id/edttxtEmailAddress"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/rounded_common"
        android:hint="@string/enter_valid_email"
        android:paddingLeft="20dp"

        android:translationY="10dp" 

        android:singleLine="true"
        android:textSize="20sp" />
</android.support.design.widget.TextInputLayout>

Espero eso ayude. :)

Actualización: Mis más sinceras disculpas por la actualización tardía. He estado muy ocupado últimamente. Si aún no te has dado cuenta déjame decirte que esta respuesta es fea y errónea . En retrospectiva, creo que probablemente estaba ebrio cuando lo escribí. Como lo mencionaron otros, podría cortar la región inferior del fondo editText, pero también hay una solución fea: puede establecer el tamaño de la (parent) textInputLayout más grande (¿qué tan grande? Se supone que debe encontrarlo por prueba y error, yuck!) que el (niño) editText. Espero que todos se den cuenta de que sería una locura así que por favor no lo hagas. Mira la respuesta escrita por @Radu Topor, es por lejos la mejor y más limpia solución a esta pregunta. Gracias.

Answer 3

Hice una clase especial con el propósito de agregar una vista vacía sobre EditText, así agregar relleno a la sugerencia. Puede usarlo como simple TextInputLayout.

public class PaddingTextInputLayout extends TextInputLayout {

public View paddingView;

public PaddingTextInputLayout(Context context) {
    super(context);
}

public PaddingTextInputLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public PaddingTextInputLayout(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

@Override
public void addView(View child, int index, ViewGroup.LayoutParams params) {
    super.addView(child, index, params);
    refreshPaddingView();
}

public void addPaddingView(){
    paddingView = new View(getContext());
    int height = (int) getContext().getResources()
            .getDimension(R.dimen.edittext_text_input_layout_padding);
    ViewGroup.LayoutParams paddingParams = new ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            height);
    super.addView(paddingView, 0, paddingParams);
}

public void refreshPaddingView(){
    if (paddingView != null) {
        removeView(paddingView);
        paddingView = null;
    }
    addPaddingView();
}
}

Esta implementación es muy simple y estúpida, puedes mejorarla mucho.

Answer 4

La respuesta de @RaduTopor es buena, pero creo que también necesitamos agregar android: bottom o también des-centra el texto de pista que se muestra dentro de EditText cuando no está enfocado

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:top="@dimen/floating_hint_margin" android:bottom="@dimen/floating_hint_margin">
    <your original background; can be <bitmap> or <shape> or whatever./>
  </item>
</layer-list>

Antes (respuesta de RaduTopor):

Después:

Answer 5

La solución propuesta por ganesh2shiv funciona en su mayor parte, aunque he encontrado que también des-centra el texto de sugerencia que se muestra dentro de EditText cuando no está enfocado.

Un mejor truco es establecer el paddingTop deseado en EditText, pero también incorporar el relleno adicional dentro del fondo de EditText. Una forma bastante sensata de hacerlo es envolver su fondo original en una <layer-list> y establecer el atributo <item android:top="..."> para que coincida con el paddingTop de su EditText.

<android.support.design.widget.TextInputLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content">

  <EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/floating_hint_margin"
    android:background="@drawable/bg_edit_text" />
</android.support.design.widget.TextInputLayout>

Y el archivo bg_edit_text.xml :

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:top="@dimen/floating_hint_margin">
    <your original background; can be <bitmap> or <shape> or whatever./>
  </item>
</layer-list>

Answer 6

Para desactivar el efecto de corte en la línea inferior, he usado los márgenes, translationY y clipChildren = "false"

<android.support.design.widget.TextInputLayout
        android:id="@+id/textinput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:clipChildren="false">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/et_profile_contact_name"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="3dp"
            android:background="@drawable/image_back"
            android:hint="Contact name"
            android:padding="5dp"
            android:translationY="3dp" />
    </android.support.design.widget.TextInputLayout>

Answer 7

Probé los cambios de relleno, pero no funciona bien.

Una solución simple es cambiar la altura del TIL:

android:layout_height="wrap_content"

para (por ejemplo)

android:layout_height="50dp"

podría no dar el mismo resultado en todos los tamaños de pantalla.

Y añadir

android:gravity="bottom" 

para empujar tu texto hacia abajo

Answer 8

Solo agregue a su fondo personalizado EditText

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
        <shape android:shape="rectangle">
            <padding
                android:top="4dp"/> // your padding value
        </shape>
    </item>
// customize your background items if you need
</layer-list>
<android.support.design.widget.TextInputLayout
 ...>
    <android.support.design.widget.TextInputEditText
        ...
        android:background="@style/your_custom_background"/>

luego, aplícalo a tu EditText y aumenta la altura de tu EditText con tu valor de relleno si usas la altura de la corrección