TextInputLayout: Comment donner un rembourrage ou une marge à un indice?
Je dois utiliser TextInputLayout de bibliothèque de support de conception dans mon projet. Je veux donner un espace entre hint et EditText dans TextInputLayout. J'ai mis la marge et le remplissage dans TextInputLayout et même dans EditText mais les deux ne sont pas un travail. Alors, comment résoudre ce problème. Ici, je joins une capture d’écran et mon codage.
==============================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>
La solution proposée par ganesh2shiv fonctionne pour la plupart, bien que j’ai trouvé qu’elle décentre également le texte d’indication affiché dans l’EditText quand il n’est pas centré.
Une meilleure astuce consiste à définir la paddingTop souhaitée sur le texte d'édition, mais également à intégrer le remplissage supplémentaire dans l'arrière-plan du texte d'édition. Pour ce faire, une méthode assez sage consiste à envelopper votre arrière-plan d'origine dans un <layer-list> et à définir l'attribut <item Android:top="..."> pour qu'il corresponde à la paddingTop de votre 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>
Et le fichier extractible 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>
Je cherche moi-même la solution à cette question depuis quelques jours. Après avoir déchiré mes cheveux pendant des heures, j'ai finalement trouvé une solution de contournement simple. Ce que j’ai remarqué, c’est que si vous avez un arrière-plan personnalisé défini sur EditText, l’attribut simple: paddingTop ne fonctionne pas pour modifier l’espacement entre le texte d’affichage et le texte modifié (je ne sais vraiment pas pourquoi). Ainsi, si vous avez défini un arrière-plan personnalisé pour votre EditText, vous pouvez utiliser l'attribut Android: translationY dans EditText.
Alors, voici votre solution:
<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>
J'espère que ça aide. :)
Mise à jour: Mes plus sincères excuses pour la mise à jour tardive. J'ai été très occupé ces derniers temps. Si vous ne vous en êtes pas encore rendu compte, laissez-moi vous dire que cette réponse est carrément mauvaise et mauvaise. Rétrospectivement, je pense que j'étais probablement saoul quand je l'ai écrit. Comme mentionné par d’autres, il pourrait couper la partie inférieure de l’arrière-plan de editText, mais il existe également un correctif déplaisant: vous pouvez définir la hauteur de la propriété (parent) textInputLayout nettement plus grande (quelle taille? Vous êtes supposé la trouver après erreur, beurk!) que le (enfant) editText. J'espère que vous réalisez tous que ce serait fou, alors ne le faites pas. Découvrez la réponse écrite par @Radu Topor, c'est de loin la solution la meilleure et la plus propre à cette question. Merci.
J'ai essayé les modifications de remplissage, mais cela ne fonctionne pas bien.
Un contournement simple consiste à modifier la hauteur du TIL:
Android:layout_height="wrap_content"
à (par exemple)
Android:layout_height="50dp"
il se peut que le résultat ne soit pas identique pour toutes les tailles d'écran.
Et ajouter
Android:gravity="bottom"
poussez votre texte.
La réponse de @RaduTopor est bonne, mais je pense que nous avons également besoin d’ajouter Android: bottom ou bien elle décentre également le texte d’indice affiché dans l’EditText quand il n’est pas ciblé.
<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>
Avant (réponse RaduTopor):
Après:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
<item Android:top="10dp"
Android:bottom="5dp">
<shape>
<!-- Background Color -->
<solid Android:color="#f1f1f1"/>
<!-- Round Corners -->
<corners Android:radius="5dp"/>
</shape>
</item>
</layer-list>
<style name="text_input_edit_text_without_border_style">
<item name="Android:layout_width">match_parent</item>
<item name="Android:layout_height">55dp</item>
<item name="Android:paddingTop">10dp</item>
<item name="Android:paddingBottom">5dp</item>
<item name="Android:gravity">left|center_vertical</item>
<item name="Android:paddingLeft">8dp</item>
<item name="Android:paddingRight">8dp</item>
<item name="Android:maxLines">1</item>
<item name="Android:singleLine">true</item>
<item name="Android:imeOptions">actionNext</item>
<item name="Android:textSize">@dimen/text_size_large</item>
<item name="Android:background">@drawable/bg_without_border_with_padding_top</item>
</style>
<style name="text_input_layout_style">
<item name="Android:layout_width">match_parent</item>
<item name="Android:layout_height">wrap_content</item>
<item name="Android:layout_marginBottom">@dimen/margin_medium</item>
</style>
J'ai créé une classe spéciale dans le but d'ajouter une vue vide au-dessus de EditText, ajoutant ainsi un remplissage à l'indicateur. Vous pouvez l'utiliser comme un 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();
}
}
Cette implémentation est très simple et stupide, vous pouvez l’améliorer beaucoup.
Pour désactiver l'effet de coupure de ligne de fond, j'ai utilisé les marges, translationY et 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>
Il suffit d'ajouter à votre arrière-plan personnalisé 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"/>
puis appliquez-le à votre EditText et augmentez la hauteur de votre EditText avec votre valeur de remplissage si vous utilisez fix height
C'est ce que j'ai fait dans mon projet pour obtenir assez d'espace entre edittext et hint
<Android.support.design.widget.TextInputLayout
Android:id="@+id/til_full_name"
Android:layout_width="match_parent"
Android:layout_height="60dp"
Android:layout_marginStart="40dp"
Android:layout_marginEnd="40dp"
Android:layout_marginTop="30dp"
Android:gravity="bottom"
Android:textColorHint="#fff"
app:layout_constraintTop_toBottomOf="@+id/welcome_til_email">
<Android.support.v7.widget.AppCompatEditText
Android:id="@+id/et_name"
Android:layout_width="match_parent"
Android:layout_height="40dp"
Android:background="#9a050505"
Android:hint="You email"
Android:inputType="textCapWords"
Android:paddingLeft="10dp"
Android:paddingRight="10dp"
Android:singleLine="true"
Android:textAppearance="?android:textAppearanceSmall"
Android:textColor="#fff"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</Android.support.design.widget.TextInputLayout>
C'est une réponse tardive, mais j'espère que cela aidera, et je pense que c'est une solution un peu meilleure. Plutôt que de donner le contexte à votre editText, Donnez ce contexte à votre TextInputLayout. Et définissez la disposition edittext sur transparente.
<Android.support.design.widget.TextInputLayout
Android:id="@+id/tinput_phone"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_marginTop="10dp"
Android:layout_marginBottom="05dp"
Android:background="@drawable/send_email_screen_element_bg"
Android:padding="05dp"
Android:theme="@style/grey_control_style">
<Android.support.v7.widget.AppCompatEditText
Android:id="@+id/edt_phone"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:background="@Android:color/transparent"
Android:ems="10"
Android:hint="@string/phone_hint_str"
Android:inputType="text"
Android:paddingStart="10dp"
Android:paddingTop="10dp"
Android:paddingBottom="10dp"
Android:singleLine="true"
Android:textColor="@color/black"
Android:textSize="14sp" />
</Android.support.design.widget.TextInputLayout>
Si l'exigence est d'ajouter un espace entre le curseur et l'indice, vous pouvez essayer
editTextComment.setHint(" "+getString(R.string.add_a_comment));