Настройка макета ввода текста

Я хочу применить границу к TextInputLayout, как показано на рисунке.

прямо сейчас я реализовал вот так.

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

но я хочу, как показано на изображении (т.е. метка помещается в границу).

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

Код, который я реализовал для EditText, приведен ниже.

<customviews.MyEditText
             android:id="@+id/email"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:background="@drawable/edittext_border_background"
             android:layout_marginEnd="30dp"
             android:layout_marginStart="30dp"
             android:layout_marginTop="45dp"
             android:gravity="start"
             android:hint="@string/hint_username"
             android:imeOptions="actionNext|actionDone"
             android:inputType="textEmailAddress|text"
             android:padding="10dp"
             android:textColor="@color/primary_text"
             android:textColorHint="@color/secondary_text"
             android:textSize="16sp"
            />

и для границы я применил фон editetext_border_background.xml следующим образом

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:padding="20dp">
    <solid android:color="#FFFFFF"/>
    <corners
        android:bottomRightRadius="0dp"
        android:bottomLeftRadius="0dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp"/>
    <stroke 
        android:width="1dip"
        android:color="@color/primary" />

</shape>

когда я попытался применить границу к TextInputLayout, это не дало ожидаемого результата.

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

Может кто-нибудь мне помочь??


android android-textinputlayout android-textinputedittext
person Riddhi Daftary    schedule 08.11.2017    source источник
comment
попробуйте добавить android:top=16dp в свой тег формы в своем чертеже.   -  person mudit_sen    schedule 08.11.2017
comment
Я думаю, вам нужно найти верхнюю позицию y каждого пользовательского EditText и попытаться переместить метку заполнителя в эту позицию, дополнительно предоставив некоторое статическое поле, чтобы показать метку в центре границы.   -  person Haresh Chhelana    schedule 08.11.2017
comment
не могли бы вы попробовать это: stackoverflow.com/a/46564875/1343788   -  person Mehul Kabaria    schedule 08.11.2017
comment
Возможный дубликат редактируемый текст фона прямоугольника со скругленными углами с подсказка в левом верхнем углу границы фона   -  person Ratilal Chopda    schedule 08.11.2017
comment
Это ответ stackoverflow.com/a/46567677/3983054   -  person King of Masses    schedule 08.11.2017
comment
Я нашел свой ответ здесь: stackoverflow.com/a/45012947/8730233   -  person Riddhi Daftary    schedule 09.11.2017

Ответы (3)


arrow_upward
9
arrow_downward

Вы должны использовать стиль Material Design для Outline Box. Простое использование:

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

в TextInputLayout. См. Текстовое поле для Android в Руководстве по дизайну материалов

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

person Francis    schedule 03.09.2018

arrow_upward
0
arrow_downward

С опцией «android:state_focused» вы можете заархивировать свою цель.

Подробности: https://stackoverflow.com/a/23417544/850347

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_enabled="true"
        android:state_focused="true">
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle"
        android:padding="20dp">
        <solid android:color="#FFFFFF"/>
        <corners
        android:bottomRightRadius="0dp"
        android:bottomLeftRadius="0dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp"/>
    <stroke 
        android:width="1dip"
        android:color="#0000FF" />

</shape>
</item>
<item android:state_enabled="true">
          <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle"
        android:padding="20dp">
        <solid android:color="#FFFFFF"/>
        <corners
        android:bottomRightRadius="0dp"
        android:bottomLeftRadius="0dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp"/>
    <stroke 
        android:width="1dip"
        android:color="@color/primary" />

</shape>
</item>

И в java-коде:

editText.setBackgroundResource(R.drawable.yourFile);

person Stanley Ko    schedule 08.11.2017
comment
При этом мы можем изменить только цвет текста редактирования, но QA требует другого поведения, как указано в вопросе. - person King of Masses; 08.11.2017
comment
@KingofMasses это дублирующий вопрос, вы должны закрыть его - person Ratilal Chopda; 08.11.2017

arrow_upward
0
arrow_downward

Измените цвет и границу в соответствии с вашим использованием и в любом из ваших представлений, где вы хотите применить эту границу и ее в свойстве фона, например... android:background="@drawable/border"

Используйте этот код, чтобы сделать файл с возможностью рисования с границей имени в папке с возможностью рисования Android в каталоге ресурсов.

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
   <solid android:color="#ffffff" />
    <stroke
       android:width="1dip"
       android:color="#000000" />
    <corners android:radius="4dip" />
    <padding
        android:bottom="0dip"
        android:left="0dip"
        android:right="0dip"
        android:top="0dip" />
</shape>
person AYUSH ARYA    schedule 08.11.2017