Обрисованный отредактированный текст из материала

Как реализовать 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>

DEMO

Ответ 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>