角が丸いEditTextを作成する方法は？

280

EditText角が丸い作成方法はありますか？

— ピクセル
ソース

566

CommonsWareによって書かれた方法よりも簡単な方法があります。が描画される方法を指定する描画可能なリソースを作成するだけEditTextです。

<?xml version="1.0" encoding="utf-8"?>
<!--  res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
 <solid android:color="#FFFFFF"/>
    <corners
     android:bottomRightRadius="15dp"
     android:bottomLeftRadius="15dp"
  android:topLeftRadius="15dp"
  android:topRightRadius="15dp"/>
</shape>

次に、このドローアブルをレイアウトで参照するだけです。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<EditText  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:padding="5dip"
    android:background="@drawable/rounded_edittext" />
</LinearLayout>

次のようなものが得られます：

代替テキスト

編集する

マークのコメントに基づいて、さまざまな状態を作成する方法を追加しますEditText。

<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/rounded_edittext_states.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item 
     android:state_pressed="true" 
     android:state_enabled="true"
        android:drawable="@drawable/rounded_focused" />
    <item 
     android:state_focused="true" 
     android:state_enabled="true"
        android:drawable="@drawable/rounded_focused" />
    <item 
     android:state_enabled="true"
        android:drawable="@drawable/rounded_edittext" />
</selector>

これらは状態です：

<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/rounded_edittext_focused.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
 <solid android:color="#FFFFFF"/>
 <stroke android:width="2dp" android:color="#FF0000" />
    <corners
     android:bottomRightRadius="15dp"
     android:bottomLeftRadius="15dp"
  android:topLeftRadius="15dp"
  android:topRightRadius="15dp"/>
</shape>

そして...これで、EditTextは次のようになります。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
<EditText  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    android:background="@drawable/rounded_edittext_states"
    android:padding="5dip"/>
</LinearLayout>

— クリスチャン
ソース

15

ソリューションがすべての州で同じドローアブルを使用することを除いて。レギュラーにEditTextは、デフォルトに加えて、フォーカス、無効、押され、選択された背景が異なります。特に、Google TVのようにタッチスクリーンを搭載していないAndroidデバイスを入手する場合は、焦点を絞ることが重要になる可能性があります。

— CommonsWare

これは素晴らしい！デバイスでは問題なく機能しますが、丸みを帯びた編集ボックスを含めると、「グラフィカルレイアウト」ビューにアクティビティが表示されません。エラーログに「UnsupportedOperationException：null」と表示されます。何か案は？

— Ben Clayton

知っておくと良いのですが...実際には修正方法がわかりません。EclipseのADTバグだと思います。

— クリスティアン

すばらしい答え。私が最新のADTでそれをやろうとすると、何も起こりませんが、UIのデザイン画面が少し影になります。しかし、優れた答え。上司から私を救った:)

— Jay Mayu

2

半径が4つのコーナーすべてで同じである場合は、4本のandroid:radius線を定義する代わりに使用します

— Viswanath Lekshmanan '31 / 12/31

129

これは、1つのXMLファイルでの同じソリューション（追加のボーナスコードを含む）です。

<?xml version="1.0" encoding="utf-8"?>
<!--  res/drawable/edittext_rounded_corners.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true" android:state_focused="true">
    <shape>
        <solid android:color="#FF8000"/>
        <stroke
            android:width="2.3dp"
            android:color="#FF8000" />
         <corners
            android:radius="15dp" />
    </shape>
</item>

<item android:state_pressed="true" android:state_focused="false">
    <shape>
        <solid android:color="#FF8000"/>
        <stroke
            android:width="2.3dp"
            android:color="#FF8000" />      
        <corners
            android:radius="15dp" />       
    </shape>
</item>

<item android:state_pressed="false" android:state_focused="true">
    <shape>
        <solid android:color="#FFFFFF"/>
        <stroke
            android:width="2.3dp"
            android:color="#FF8000" />  
        <corners
            android:radius="15dp" />                          
    </shape>
</item>

<item android:state_pressed="false" android:state_focused="false">
    <shape>
        <gradient 
            android:startColor="#F2F2F2"
            android:centerColor="#FFFFFF"
            android:endColor="#FFFFFF"
            android:angle="270"
        />
        <stroke
            android:width="0.7dp"                
            android:color="#BDBDBD" /> 
        <corners
            android:radius="15dp" />            
    </shape>
</item>

<item android:state_enabled="true">
    <shape>
        <padding 
                android:left="4dp"
                android:top="4dp"
                android:right="4dp"
                android:bottom="4dp"
            />
    </shape>
</item>

</selector>

次に、background属性をedittext_rounded_corners.xmlファイルに設定します。

<EditText  android:id="@+id/editText_name"
      android:background="@drawable/edittext_rounded_corners"/>

— ノーフェルト
ソース

属性「幅」の「0.5dp」は有効な形式ではないため、エラーが発生します。

— Mavenのツ

上記の解決策を試してみましたが、残念ながら設定topRightRadiusしただけでtopLeftRadius四隅が丸くなってしまいました。助けてください。:(

— ikartik90 2014

30

これを試して、

1.Drawableにrounded_edittext.xmlファイルを作成します

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" android:padding="15dp">
        <solid android:color="#FFFFFF"/>
        <corners
            android:bottomRightRadius="0dp"
            android:bottomLeftRadius="0dp"
            android:topLeftRadius="0dp"
            android:topRightRadius="0dp"/>
        <stroke android:width="1dip" android:color="#f06060" />
    </shape>

2. EditText in xmlファイルの背景を適用します

                <EditText
                android:id="@+id/edit_expiry_date"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dip"
                android:background="@drawable/rounded_edittext"
                android:hint="@string/shop_name"
                android:inputType="text"/>

3.次のような出力が得られます

— サチンパンガレ
ソース

1

質問者の要求に応じて、出力画像をサチンにすると、角が丸められていない正方形の角が表示されます。これは、ボックスに輪郭を付けるのに適した方法です。

— JesseBoyd 2017年

2

@JesseBoyd、あなたの懸念は正しいですが、このxmlファイルのrounded_edittextは、要件に従ってすべてのRadiusの値を変更するだけです。

— サチンパンガーレ2017年

17

ノーフェルトの答えてくれてありがとう。内側のシャドウ効果を高めるために、グラデーションを少し変更しました。

<item android:state_pressed="false" android:state_focused="false">
    <shape>
        <gradient
            android:centerY="0.2"
            android:startColor="#D3D3D3"
            android:centerColor="#65FFFFFF"
            android:endColor="#00FFFFFF"
            android:angle="270"
            />
        <stroke
            android:width="0.7dp"
            android:color="#BDBDBD" />
        <corners
            android:radius="15dp" />
    </shape>
</item>

明るい背景のレイアウトに最適です。

— サイカ
ソース

7

私の考えでは、すでに角を丸めています。

より丸めたい場合は、次のことを行う必要があります。

EditText背景を構成する9パッチのPNG画像をすべて複製します（SDKにあります）
角が丸くなるようにそれぞれを修正します
StateListDrawableこれらのEditText背景を単一のに結合するXML リソースを複製Drawableし、より丸みのある9パッチPNGファイルを指すように変更します
ウィジェットのStateListDrawable背景として新しいものを使用しEditTextます

— CommonsWare
ソース

3

コーナーだけを端ではなくカーブさせたい場合は、以下のコードを使用してください。

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

    <corners android:radius="10dp" />

    <padding
        android:bottom="3dp"
        android:left="0dp"
        android:right="0dp"
        android:top="3dp" />

    <gradient
        android:angle="90"
        android:endColor="@color/White"
        android:startColor="@color/White" />

    <stroke
        android:width="1dp"
        android:color="@color/Gray" />

</shape>

の4つの角度のみを湾曲させEditTextます。

— キルティクマールA.
ソース

2

他の答えを追加するために、角を丸くするための最も簡単な解決策は、以下をEdittextの背景として設定することであることがわかりました。

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

    <solid android:color="@android:color/white"/>
    <corners android:radius="8dp"/>

</shape>

— ドロイド
ソース

2

Material Components Libraryを使用すると、MaterialShapeDrawableを使用してカスタム形状を描画できます。

EditTextあなたが行うことができます。

    <EditText
        android:id="@+id/edittext"
        ../>

次に作成しますMaterialShapeDrawable：

float radius = getResources().getDimension(R.dimen.default_corner_radius);

EditText editText = findViewById(R.id.edittext);
//Apply the rounded corners 
ShapeAppearanceModel shapeAppearanceModel = new ShapeAppearanceModel()
                .toBuilder()
                .setAllCorners(CornerFamily.ROUNDED,radius)
                .build();

MaterialShapeDrawable shapeDrawable = 
            new MaterialShapeDrawable(shapeAppearanceModel);
//Apply a background color
shapeDrawable.setFillColor(ContextCompat.getColorStateList(this,R.color.white));
//Apply a stroke
shapeDrawable.setStroke(2.0f, ContextCompat.getColor(this,R.color.colorAccent));

ViewCompat.setBackground(editText,shapeDrawable);

ライブラリのバージョン1.1.0が必要です。

— ガブリエレ・マリオッティ
ソース