Как реализовать Outlined text
поля, представленные на странице "Дизайн материала"
Обрисованный отредактированный текст из материала
Ответ 1
Прочитайте Outline Box
.
Контурные текстовые поля имеют поглаженную границу и менее подчеркнуты. Чтобы использовать текстовое поле контура, примените следующий стиль к TextInputLayout:
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
зависимости
implementation 'com.android.support:design:28.0.0-alpha1'
XML
<android.support.design.widget.TextInputLayout
android:id="@+id/name_text_input"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.design.widget.TextInputEditText
android:id="@+id/name_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/label_name" />
</android.support.design.widget.TextInputLayout>
Ответ 2
ОБНОВИТЬ
Также хорошо работает с
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support:design:28.0.0'
Используя implementation 'com.android.support:design:28.0.0-alpha1'
я получаю ошибку ниже
Не удается разрешить символ '@style/Widget.MaterialComponents.TextInputLayout.OutlineBox'
Решение
Внесите следующие изменения в свой Build.Gradle
Используйте compileSdkVersion 28
Используйте targetSdkVersion 28
Используйте ниже зависимости
implementation 'com.android.support:appcompat-v7:28.0.0-alpha3'
implementation 'com.android.support:design:28.0.0-alpha3'
Образец кода
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.dangarmahesh.demoapp.MainActivity">
<ImageView
android:layout_width="250dp"
android:layout_gravity="center"
android:src="@mipmap/ic_launcher"
android:layout_height="250dp" />
<android.support.design.widget.TextInputLayout
android:id="@+id/userIDTextInputLayout"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_margin="10dp"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:id="@+id/userIDTextInputEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="User ID" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/passwordTextInputLayout"
android:layout_margin="10dp"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:id="@+id/passwordTextInputEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password" />
</android.support.design.widget.TextInputLayout>
<Button
android:layout_width="match_parent"
android:layout_margin="10dp"
android:text="LOGIN"
android:textStyle="bold"
android:background="@color/colorPrimary"
android:textColor="@android:color/white"
android:layout_height="wrap_content" />
</LinearLayout>
Outout
Ответ 3
Вам нужно добавить эту зависимость на свой "уровень модуля" build.gradle com.google.android.material
, чтобы использовать последнюю версию material UI components
.
Используйте этот стиль в своем com.google.android.material.textfield.TextInputLayout
тогда,
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
Оформить заказ из здесь
Если вы используете библиотеку
com.android.support:design
, то вы следует изменить стиль вашего приложения наTheme.MaterialComponents...Bridge
(Например, изменить стиль сTheme.AppCompat.Light
наTheme.MaterialComponents.Light.Bridge
)first,
Далее, вы должны использовать этот стиль в вашем
android.support.design.widget.TextInputLayout
:style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
Ответ 4
При миграции в библиотеки androidx вы должны использовать новые Материальные компоненты для библиотеки Android.
Используйте компонент TextInputLayout
:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/hint_text">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
И применить этот стиль:
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
Требования:
Вы должны добавить эти зависимости в свой файл
build.gradle
implementation 'com.google.android.material:material:<version>'
применить тему Материальных компонентов
<style name="Theme.MyApp" parent="Theme.MaterialComponents">
Ответ 5
Если вы используете appcompact библиотеку, то вы можете воспользоваться этим android.support.design.widget.TextInputLayout
Если вы используете сборку ANDROIDX, я пришел к выводу, у кого последний код в соответствии с Android Jetpack.
Для использования этого вам нужно иметь эти зависимости в своем приложении grad
dependencies {
implementation 'com.google.android.material:material:1.0.0'
}
тогда таким образом вы можете добавить в свой XML для элемента пользовательского интерфейса
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/messageTextInputLayout"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/passwordTextInputEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter Text here" />
</com.google.android.material.textfield.TextInputLayout>