web-dev-qa-db-fra.com

Texte modifié à partir de la conception du matériau

Comment implémenter un Outlined text _ champs présentés dans la page Conception de matériaux Activated Edit Text

Lien

androidandroid-layoutandroid-edittextmaterial-designandroid-textinputlayout
22
andreikashin

Lire Outline Box .

Les champs de texte avec contour ont une bordure en trait et sont moins accentués. Pour utiliser un champ de texte de contour, appliquez le style suivant à votre TextInputLayout:

_ style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
_

dépendances 

_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

45
IntelliJ Amiya

UPDATE

Fonctionne également bien avec

_implementation 'com.Android.support:appcompat-v7:28.0.0'
implementation 'com.Android.support:design:28.0.0'
_

Utilisation de implementation 'com.Android.support:design:28.0.0-alpha1' je reçois une erreur en dessous de

Impossible de résoudre le symbole '@ style/Widget.MaterialComponents.TextInputLayout.OutlineBox'

enter image description here

Solution

Effectuez les modifications ci-dessous dans votre Build.Gradle

Utilisez compileSdkVersion 28

Utilisez targetSdkVersion 28

Utiliser les dépendances ci-dessous

_implementation 'com.Android.support:appcompat-v7:28.0.0-alpha3'
implementation 'com.Android.support:design:28.0.0-alpha3'
_

Exemple de code

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

OUT

enter image description here

11
Nilesh Rathod

Vous devez ajouter cette dépendance à votre "niveau de module" build.gradlecom.google.Android.material pour utiliser la dernière version material UI components.

Utilisez ce style dans votre com.google.Android.material.textfield.TextInputLayout alors,

_style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
_

Commander de ici

Si vous utilisez la bibliothèque com.Android.support:design, vous devez changer le style de votre application en _Theme.MaterialComponents...Bridge_ (par exemple, changer de style de _Theme.AppCompat.Light_ à _Theme.MaterialComponents.Light.Bridge_)

première,

Ensuite, vous devez utiliser ce style dans votre Android.support.design.widget.TextInputLayout:

_style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
_
6
Jeel Vankhede

Si vous utilisez la bibliothèque appcompact, vous pouvez utiliser cette Android.support.design.widget.TextInputLayout

si vous utilisez ANDROIDX build, je conclus donc que le code le plus récent est conforme à Android jetpack.

Pour utiliser cela, vous devez avoir ces dépendances dans la palette de votre application.

dependencies {
    implementation 'com.google.Android.material:material:1.0.0'
}

alors de cette façon vous pouvez ajouter à votre xml pour l'élément d'interface utilisateur

<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>
2
Amjad Khan

Avec la migration vers les bibliothèques Android , vous devez utiliser la nouvelle - Composants matériels pour Android bibliothèque .

Utilisez le composant 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>

Et appliquez ce style:

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

enter image description here

Conditions requises:

  • vous devez ajouter ces dépendances dans votre fichier build.gradle

    implementation 'com.google.Android.material:material:<version>'

  • appliquer un thème Composants matériels

    <style name="Theme.MyApp" parent="Theme.MaterialComponents">

2
Gabriele Mariotti