web-dev-qa-db-ja.com

境界線付きのカスタム編集テキスト

編集テキストに境界線を付けてラベルを付けようとしています。私はこのように境界線を作りました：

 <?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <stroke
        Android:width="1dp"
        Android:color="#A0A0A0" />
</shape>

しかし、私は希望する結果を達成することができません。

私は以下のようなものが欲しいです：

enter image description here

助けてください。

androidandroid-edittexttextviewlabelmaterial-design
4
Talib

これを試して：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:gravity="center">
<RelativeLayout
    Android:layout_width="match_parent"
    Android:layout_height="60dp"
    Android:layout_marginLeft="20dp"
    Android:layout_marginRight="20dp">
    <EditText
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_marginTop="15dp"
        Android:background="@drawable/boarder"
        Android:paddingLeft="5dp"
        Android:text="input" />
    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginLeft="10dp"
        Android:layout_marginTop="7dp"
        Android:background="#ffffff"
        Android:text="Label" />
</RelativeLayout>

boarder.xml：

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

<stroke
    Android:width="2dp"
    Android:color="#03A6F0" />

<corners Android:radius="12dp" />

here

4
Quang Doan

必要な新しいマテリアルデザインテキストフィールドを作成するためのガイドラインについては、このリンクを確認してください。

https://material.io/design/components/text-fields.html#usage

-使い方について：

マテリアルテキストフィールドを作成するには、TextInputLayoutをXMLレイアウトに追加し、TextInputEditTextを直接の子として追加します。

<com.google.Android.material.textfield.TextInputLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content">

  <com.google.Android.material.textfield.TextInputEditText
      Android:layout_width="match_parent"
      Android:layout_height="wrap_content"
      Android:hint="@string/hint_text"/>

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

注：入力テキストコンポーネントにEditTextを使用することもできます。ただし、TextInputEditTextを使用すると、TextInputLayoutは、入力テキストの視覚的側面をより細かく制御できます。これにより、TextInputLayoutは、「抽出モード」（横向きモードなど）のときにテキストフィールドにヒントを表示できます。

-スタイリング用：

記入済みボックス（デフォルト）

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

アウトラインボックス

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

詳細については、次のリンクを確認してください。

https://material.io/develop/Android/components/text-input-layout/

これがお役に立てば幸いです。

10
JannahPro

少し遅れていますが、 this と this をご覧ください。

AndroidX Material EditText

2
Rahul Mishra

あなたはあなたのxmlで以下のコードを試すことができます

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:background="#CDCDCE"
                Android:orientation="vertical"
                Android:padding="10dp">


    <EditText
        Android:id="@+id/si_btnSignIn"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_gravity="center"
        Android:layout_marginBottom="10dp"
        Android:layout_marginTop="10dp"
        Android:background="@drawable/button_round_corner"
        Android:padding="20dp"
        Android:text="Inp"
        Android:textColor="@color/white"/>


    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_marginLeft="10dp"
        Android:background="#CDCDCE"
        Android:gravity="center"
        Android:paddingLeft="5dp"
        Android:paddingRight="5dp"
        Android:text="Label"
        Android:textColor="#741c7a"/>

</RelativeLayout>

以下は描画可能なコードbutton_round_cornerです

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

<stroke
    Android:color="#741c7a"
    Android:width="1dp"/>

<corners Android:radius="5dp"/>

</shape>
1
Android Team

マテリアルデザインの編集テキストについては、以下のリンクの最良の例を試すことができます

https://codelabs.developers.google.com/codelabs/mdc-111-Java/#

0
mitesh makwana