Представление Android EditText Плавающая подсказка в дизайне материалов

Предоставляет ли API 21 способ использования следующей функции:

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

Я пытаюсь использовать подсказки EditText.

Спасибо!


person xsorifc28    schedule 20.10.2014    source источник
comment
gist.github.com/chrisbanes/11247418   -  person MilapTank    schedule 20.10.2014
comment
Я тоже столкнулся с этим во время поиска, но мне было интересно, предоставил ли Android собственный метод.   -  person xsorifc28    schedule 20.10.2014
comment
Это заставляет нас думать, что с Android что-то не так. В API для Material Design не хватает нескольких пробелов. Другой пример — плавающая кнопка действия.   -  person motobói    schedule 27.05.2015


Ответы (10)


Вам нужно добавить следующее в файл build.gradle вашего модуля:

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

И используйте com.google.android.material.textfield.TextInputLayout в своем 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>
person damith alahakoon    schedule 10.07.2020

Плавающая подсказка EditText:

Добавьте ниже зависимость в gradle:

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

В макете:

<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>
person arpit    schedule 01.07.2015
comment
Остерегайтесь: TextInputLayout не показывает подсказку EditText до того, как пользователь сосредоточится на ней, существует ошибка в библиотеке поддержки дизайна 22.2.0 - person Ivan Chau; 09.01.2016
comment
В чем разница между использованием EditText и TextInputEditText в этом XML? - person android developer; 09.06.2016
comment
Недавно переименованная зависимость выглядит как implementation 'com.google.android.material:material:1.0.0-rc01'. - person rmtheis; 17.08.2018

Да, по состоянию на 29 мая 2015 г. эта функция теперь предоставляется в поддержке Android Design. Библиотека

Эта библиотека включает поддержку

  • Плавающие этикетки
  • Плавающая кнопка действия
  • Снэк-бар
  • Ящик навигации
  • и более
person Dave Jensen    schedule 02.06.2015
comment
Вы случайно не знаете учебник по плавающим меткам с EditTexts, как упоминалось в OP? - person AdamMc331; 28.08.2015
comment
Вау, спасибо! Я посмотрю на них и дам вам знать, как это происходит! - person AdamMc331; 28.08.2015
comment
Третий был тем, что я искал. Я наткнулся на TextInputLayout, но не смог найти хороший пример (вероятно, искал все неправильные термины). Спасибо! - person AdamMc331; 28.08.2015

Библиотека поддержки Android может быть импортирована в Gradle в зависимостях:

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

Он должен быть включен в GradlePlease! И в качестве примера его использования:

 <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>

Кстати, редактор может не понять, что AutoCompleteTextView разрешен в TextInputLayout.

person aselims    schedule 10.06.2015

Android не предоставил собственный метод. Ни AppCompat.

Попробуйте эту библиотеку: https://github.com/rengwuxian/MaterialEditText

Это может быть то, что вы хотите.

person rengwuxian    schedule 08.11.2014
comment
Я получаю сообщение об ошибке: (1) цвет атрибута уже был определен при синхронизации gradle, вероятно, из-за файла appcompat-v7. Я не могу от этого избавиться. Любые предложения? - person mdzeko; 18.02.2015
comment
MaterialEditText не определил атрибут с именем color, поэтому в другом месте должно быть что-то не так. - person rengwuxian; 17.03.2015

Импортируйте библиотеки поддержки. В файле build.gradle вашего проекта добавьте следующие строки в зависимости проекта:

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

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

Используйте следующий TextInputLayout в своем макете пользовательского интерфейса:

<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>

Затем вызовите setHint для TextInputLayout сразу после вызова setContentView, потому что для анимации плавающей метки вам просто нужно установить подсказку, используя метод setHint.

final TextInputLayout usernameWrapper = (TextInputLayout) findViewById(R.id.usernameWrapper);
usernameWrapper.setHint("Username");
person shridutt kothari    schedule 01.09.2015
comment
По крайней мере, используя 23.1.1, вам не нужно использовать явный вызов setHint(). Он работает с подсказкой, установленной на EditText в макете xml. - person Ionoclast Brigham; 25.02.2016

Предложение @andruboy о https://gist.github.com/chrisbanes/11247418, вероятно, является вашим лучшим держать пари.

https://github.com/thebnich/FloatingHintEditText работает с appcompat-v7 v21.0.0, но поскольку v21.0.0 не поддерживает акцентные цвета с подклассами EditText, подчеркивание FloatingHintEditText по умолчанию будет сплошным черным или белым. Кроме того, отступы не оптимизированы для стиля материала EditText, поэтому вам может потребоваться его настроить.

person TalkLittle    schedule 22.10.2014
comment
Спасибо. Я предполагаю, что Google также не предоставил API для создания текстового предупреждения о редактировании в стиле материала, например, в google.com/design/spec/components/ Извините за дилетантские вопросы, я пытаюсь максимально адаптироваться к материальному дизайну Я могу использовать API/библиотеки Google и попытаться выяснить все, что было предоставлено, по сравнению с любыми внешними библиотеками. Спасибо еще раз! - person xsorifc28; 23.10.2014

Нет, это не так. Я ожидал бы этого в будущем выпуске API, но пока мы застряли с EditText. Другой вариант — эта библиотека:
https://github.com/marvinlabs/android-floatinglabel-widgets

person Patrick    schedule 06.11.2014

Для более простого использования InputTextLayout я создал эту библиотеку, которая сокращает ваш XML-код менее чем наполовину, а также предоставляет вам возможность установить сообщение об ошибке, а также сообщение-подсказку и простой способ сделать ваш проверки. https://github.com/TeleClinic/SmartEditText

Просто добавьте

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

Затем вы можете сделать что-то вроде этого:

<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.*" />
person Karim    schedule 22.12.2017

Используйте TextInputLayout предоставлено библиотекой компонентов материалов:

    <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>

введите здесь описание изображения

person Gabriele Mariotti    schedule 16.08.2020