Android EditText view Floating Hint in Material Design


96

A API 21 fornece um método para usar o seguinte recurso:

http://www.google.com/design/spec/components/text-fields.html#text-fields-floating-labels

Estou tentando flutuar as dicas do EditText.

Obrigado!



Também encontrei isso durante minha pesquisa, mas queria saber se o Android fornece um método nativo.
xsorifc28 de

1
Isso nos faz pensar que algo está errado com o Android. Existem várias lacunas ausentes na API para design de materiais. Outro exemplo é o botão Float Action.
motobói

Respostas:


3

Você precisa adicionar o seguinte ao arquivo do módulo build.gradle:

implementation 'com.google.android.material:material:1.0.0'

E use com.google.android.material.textfield.TextInputLayout em seu XML:

       <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/text_input_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/my_hint">

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="UserName"/>
   </com.google.android.material.textfield.TextInputLayout>

108

Dica flutuante EditText:

Adicione a dependência abaixo no gradle:

compile 'com.android.support:design:22.2.0'

No layout:

<android.support.design.widget.TextInputLayout
    android:id="@+id/text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="UserName"/>
    </android.support.design.widget.TextInputLayout>

3
Cuidado: TextInputLayout não mostra a dica EditText antes que o foco do usuário nele exista um bug na biblioteca de suporte de design22.2.0
Ivan Chau

1
Qual é a diferença entre usar EditText e TextInputEditText neste XML?
desenvolvedor Android de

2
A dependência recém-renomeada parece ser implementation 'com.google.android.material:material:1.0.0-rc01'.
rmtheis

60

Sim, a partir de 29 de maio de 2015, essa funcionalidade agora é fornecida na Android Design Support Library

Esta biblioteca inclui suporte para

  • Rótulos flutuantes
  • Botão de ação flutuante
  • Lanchonete
  • Gaveta de navegação
  • e mais

3
Você conhece um tutorial para rótulos flutuantes com EditTexts como OP mencionado?
AdamMc331


1
Nossa, obrigado! Vou dar uma olhada neles e dizer a você como foi!
AdamMc331

2
O terceiro era o que eu procurava. Me deparei com TextInputLayout, mas não consegui encontrar um bom exemplo (provavelmente pesquisando todos os termos errados). Obrigado!
AdamMc331

18

A biblioteca de suporte do Android pode ser importada dentro do gradle nas dependências:

    compile 'com.android.support:design:22.2.0'

Deve ser incluído no GradlePlease! E como exemplo de uso:

 <android.support.design.widget.TextInputLayout
    android:id="@+id/to_text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <AutoCompleteTextView
        android:id="@+id/autoCompleteTextViewTo"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="To"
        android:layout_marginTop="45dp"
        />
</android.support.design.widget.TextInputLayout>

A propósito, o editor pode não entender que AutoCompleteTextView é permitido em TextInputLayout.


11

O Android não forneceu um método nativo. Nem o AppCompat.

Experimente esta biblioteca: https://github.com/rengwuxian/MaterialEditText

Isso pode ser o que você deseja.


1
Recebo o erro: (1) "Atributo" cor "já foi definido" na sincronização do gradle, provavelmente por causa do appcompat-v7. Eu não consigo me livrar disso. Alguma sugestão?
mdzeko

MaterialEditText não definiu um atributo chamado "color", então deve haver algo errado em outro lugar.
rengwuxian de

9

Importe as bibliotecas de suporte, no arquivo build.gradle do seu projeto, adicione as seguintes linhas nas dependências do projeto:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])

    compile 'com.android.support:design:22.2.0'
    compile 'com.android.support:appcompat-v7:22.2.0'
}

Use o seguinte TextInputLayout em seu layout de IU:

<android.support.design.widget.TextInputLayout
    android:id="@+id/usernameWrapper"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:hint="Username"/>

</android.support.design.widget.TextInputLayout>

Então, chame setHint em TextInputLayout logo após a chamada setContentView porque, para animar o rótulo flutuante, você só precisa definir uma dica, usando o método setHint.

final TextInputLayout usernameWrapper = (TextInputLayout) findViewById(R.id.usernameWrapper);
usernameWrapper.setHint("Username");

1
Usando 23.1.1 pelo menos, você não precisa usar uma chamada explícita para setHint(). Funciona com a dica definida no EditTextxml do layout.
Ionoclast Brigham

3

A sugestão de @andruboy de https://gist.github.com/chrisbanes/11247418 é provavelmente sua melhor aposta.

https://github.com/thebnich/FloatingHintEditText funciona com appcompat-v7 v21.0.0, mas como a v21.0.0 não oferece suporte a cores de destaque com subclasses de EditText, o sublinhado de FloatingHintEditTextserá o preto ou branco sólido padrão. Além disso, o preenchimento não é otimizado para o estilo de Material EditText, portanto, pode ser necessário ajustá-lo.


Obrigado. Suponho que o Google também não forneceu uma api para a criação de avisos de edição de texto no estilo material, como em google.com/design/spec/components/ ... Desculpe pelas perguntas amadoras, estou tentando me adaptar ao máximo ao material design assim como posso usar API / bibliotecas do Google e tentar descobrir tudo o que foi fornecido em comparação com qualquer biblioteca externa. Obrigado novamente!
xsorifc28


0

Para uma maneira mais fácil de usar o InputTextLayout, criei esta biblioteca que reduz seu código XML para menos da metade e também oferece a capacidade de definir uma mensagem de erro, bem como uma mensagem de dica e uma maneira fácil de fazer seu validações. https://github.com/TeleClinic/SmartEditText

Basta adicionar

compile 'com.github.TeleClinic:SmartEditText:0.1.0'

Então você pode fazer algo assim:

<com.teleclinic.kabdo.smartmaterialedittext.CustomViews.SmartEditText
    android:id="@+id/emailSmartEditText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:setLabel="Email"
    app:setMandatoryErrorMsg="Mandatory field"
    app:setRegexErrorMsg="Wrong email format"
    app:setRegexType="EMAIL_VALIDATION" />

<com.teleclinic.kabdo.smartmaterialedittext.CustomViews.SmartEditText
    android:id="@+id/passwordSmartEditText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:setLabel="Password"
    app:setMandatoryErrorMsg="Mandatory field"
    app:setPasswordField="true"
    app:setRegexErrorMsg="Weak password"
    app:setRegexType="MEDIUM_PASSWORD_VALIDATION" />

<com.teleclinic.kabdo.smartmaterialedittext.CustomViews.SmartEditText
    android:id="@+id/ageSmartEditText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:setLabel="Age"
    app:setMandatory="false"
    app:setRegexErrorMsg="Is that really your age :D?"
    app:setRegexString=".*\\d.*" />

0

Tente assim

insira a descrição da imagem aqui

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

para mais referências clique aqui


0

Use o TextInputLayoutfornecido pela Biblioteca de Componentes de Materiais :

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Label">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </com.google.android.material.textfield.TextInputLayout>

insira a descrição da imagem aqui

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.