Как создать textinputlayout с нижней тенью

Как создать тень TextInputLayout, которую я создал, но подсказка отображается внизу, а затем я редактирую текст редактирования, затем оба являются текстовым центром, а также прикрепляют код входа в тень. Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы. Пожалуйста, смотрите это изображение Заранее спасибо

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical">

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_marginStart="@dimen/_10sdp"
    android:layout_marginEnd="@dimen/_10sdp"
    android:background="@drawable/shadow_login"
    android:padding="@dimen/_10sdp"
    android:layout_height="wrap_content">


    <androidx.appcompat.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="test"
        android:background="@null" />
</com.google.android.material.textfield.TextInputLayout>

My code output is

Мой код shadow_login ниже

<?xml version="1.0" encoding="utf-8"?>

<item>
    <shape>
        <padding
            android:bottom="1dp"
            android:left="0.5dp"
            android:right="0.5dp"
            android:top="0.5dp" />
        <solid android:color="#00CCCCCC" />
        <corners android:radius="@dimen/_30sdp" />
    </shape>
</item>
<item>
    <shape>
        <padding
            android:bottom="1dp"
            android:left="0.5dp"
            android:right="0.5dp"
            android:top="0.5dp" />

        <solid android:color="#10CCCCCC" />
        <corners android:radius="@dimen/_30sdp" />
    </shape>
</item>
<item>
    <shape>
        <padding
            android:bottom="1dp"
            android:left="0.5dp"
            android:right="0.5dp"
            android:top="0.5dp" />

        <solid android:color="#20CCCCCC" />

        <corners android:radius="@dimen/_30sdp" />
    </shape>
</item>
<item>
    <shape>
        <padding
            android:bottom="1dp"
            android:left="0.5dp"
            android:right="0.5dp"
            android:top="0.5dp" />

        <solid android:color="#30CCCCCC" />

        <corners android:radius="@dimen/_30sdp" />
    </shape>
</item>
<item>
    <shape>
        <padding
            android:bottom="1dp"
            android:left="0.5dp"
            android:right="0.5dp"
            android:top="0.5dp" />

        <solid android:color="#50CCCCCC" />

        <corners android:radius="@dimen/_30sdp" />
    </shape>
</item>


<item>
    <shape>
        <solid android:color="@android:color/white" />
        <corners android:radius="@dimen/_30sdp" />


    </shape>
</item>

Jaydeep 16.10.2019 источник

comment

код вашего textInputLayout ? - SebastienRieu 16.10.2019

comment

Хорошо, добавлю. - Jaydeep 16.10.2019

comment

Это не решает ваш вопрос, но используйте com.google.android.material.textfield.TextInputEditText вместо AppCompatEditText - Gabriele Mariotti 16.10.2019

comment

@GabrieleMariotti Но у меня есть подсказка, когда пользователь нажимает на edittext - Jaydeep 16.10.2019

comment

@Jaydeep TextInputEditText расширяет AppCompatEditText. И установите android:hint в TextInputLayout вместо EditText - Gabriele Mariotti 16.10.2019

comment

@GabrieleMariotti Я использовал это решение, но оно не работает. - Jaydeep 16.10.2019

comment

@Jaydeep Просто прочитайте 1-й комментарий: он не решает вашу проблему ... - Gabriele Mariotti 16.10.2019

comment

@GabrieleMariotti Да, сэр, когда пользователь нажимает на текст редактирования, метка становится анимационной снизу вверх. - Jaydeep 16.10.2019

Ответы (2)

arrow_upward
0
arrow_downward

используйте поля вместо отступов и добавьте высоту в textinputlayout и удалите background="@null" из edittext

попробуй это

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    >

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="@drawable/shadow_login">

        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_marginStart="@dimen/_10sdp"
            android:layout_marginEnd="@dimen/_10sdp"
            android:layout_margin="@dimen/_10sdp"
            android:elevation="8dp"
            android:layout_height="wrap_content">


            <androidx.appcompat.widget.AppCompatEditText
               android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/shadow_login"
                android:hint="test" />
        </com.google.android.material.textfield.TextInputLayout>

    </LinearLayout>

</LinearLayout>

и форма фона должна быть только:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#20CCCCCC" />

    <corners android:radius="@dimen/_30sdp" />


</shape>

SebastienRieu 16.10.2019

comment

извините, были ошибки, я отредактировал ответ - SebastienRieu; 16.10.2019

comment

ваш рисуемый фон кажется слишком сложным, попробуйте мой (обновленный ответ) - SebastienRieu; 16.10.2019

comment

Я попробовал вашу форму фона, но проблема в том, что либо пользователь не вводит никаких данных, либо отображается подсказка внизу - Jaydeep; 16.10.2019

arrow_upward
0
arrow_downward

Используйте что-то другое.
Не используйте фон в TextInputLayout, но оберните компонент в макет с таким фоном (простой LinearLayout, но рассмотрите, например, также CardView)

Что-то типа:

<LinearLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:background="@drawable/shadow_login">

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="CVV"
        android:paddingTop="4dp"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        android:paddingBottom="2dp"
        app:boxStrokeWidth="0dp"
        app:boxStrokeColor="#FFFFFF"
        app:boxBackgroundColor="#FFFFFF"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        >

        <com.google.android.material.textfield.TextInputEditText
            ../>

    </com.google.android.material.textfield.TextInputLayout>

Если тень не является обязательным требованием, просто используйте стандартный OutlinedBox со скругленными углами (с вашими любимыми цветами и размерами).

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="CVV"
    app:shapeAppearanceOverlay="@style/Rounded_ShapeAppearanceOverlay.MaterialComponents.TextInputLayout"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    >

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

</com.google.android.material.textfield.TextInputLayout>

с формой, определяемой:

  <style name="Rounded_ShapeAppearanceOverlay.MaterialComponents.TextInputLayout" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
  </style>

Gabriele Mariotti 16.10.2019

comment

Но в этом решении подсказка и текст не находятся в центре фона. - Jaydeep; 16.10.2019

comment

Если вы имеете в виду вертикальное выравнивание, во втором случае нет, в первом случае да, вы можете использовать гравитацию по своему усмотрению. - Gabriele Mariotti; 16.10.2019

Как создать textinputlayout с нижней тенью

Ответы (2)

Вопросы по теме