Android 如何创建带有圆角的 EditText？

How to create EditText with rounded corners?

提问by pixel

Is there any way to create EditTextthat has rounded corners?

有没有办法创建EditText具有圆角的？

回答by Cristian

There is an easier way than the one written by CommonsWare. Just create a drawable resource that specifies the way the EditTextwill be drawn:

有一种比 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>

Then, just reference this drawable in your layout:

然后，只需在您的布局中引用此可绘制对象：

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

You will get something like:

你会得到类似的东西：

Edit

编辑

Based on Mark's comment, I want to add the way you can create different states for your EditText:

根据 Mark 的评论，我想添加为您创建不同状态的方式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>

These are the states:

这些是状态：

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

And... now, the EditTextshould look like:

而且......现在，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>

回答by Norfeldt

Here is the same solution (with some extra bonus code) in just one XML file:

这是仅在一个 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>

You then just set the background attribute to edittext_rounded_corners.xml file:

然后您只需将背景属性设置为 edittext_rounded_corners.xml 文件：

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

回答by sachin pangare

Try this one,

试试这个，

1.Create rounded_edittext.xml file in your Drawable

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.Apply background for your EditText in xml file

2.在xml文件中为你的EditText应用背景

                <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.You will get output like this

3.你会得到这样的输出

回答by Sayka

Thanks for Norfeldt's answer. I have made a slight change int its gradient for a better inner shadow effect.

感谢诺费尔特的回答。为了更好的内阴影效果，我对其渐变做了一些细微的改变。

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

Looks great in a light backgrounded layout..

在浅色背景布局中看起来很棒..

回答by CommonsWare

By my way of thinking, it already has rounded corners.

按照我的想法，它已经有了圆角。

In case you want them more rounded, you will need to:

如果您希望它们更圆润，则需要：

1. Clone all of the nine-patch PNG images that make up an EditTextbackground (found in your SDK)
2. Modify each to have more rounded corners
3. Clone the XML StateListDrawableresource that combines those EditTextbackgrounds into a single Drawable, and modify it to point to your more-rounded nine-patch PNG files
4. Use that new StateListDrawableas the background for your EditTextwidget

1. 克隆构成EditText背景的所有九个补丁 PNG 图像（在您的 SDK 中找到）
2. 修改每个都有更多的圆角
3. 克隆的XMLStateListDrawable资源，结合这些EditText背景成一个单一的Drawable，而其修改为指向您更全面的九宫PNG文件
4. 使用新StateListDrawable作为EditText小部件的背景

回答by Kirtikumar A.

If you want only corner should curve not whole end, then use below code.

如果你只想要角落应该弯曲而不是整个末端，那么使用下面的代码。

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

It will only curve the four angle of EditText.

它只会弯曲 的四个角度EditText。

回答by Gabriele Mariotti

With the Material Components Library you can use the MaterialShapeDrawableto draw custom shapes.

随着材料零件库，你可以使用MaterialShapeDrawable来绘制自定义形状。

With a EditTextyou can do:

有了EditText你可以做：

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

Then create a MaterialShapeDrawable:

然后创建一个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);

It requires the version 1.1.0of the library.

它需要库的1.1.0版。

回答by A Droid

Just to add to the other answers, I found that the simplest solution to achieve the rounded corners was to set the following as a background to your Edittext.

只是为了添加其他答案，我发现实现圆角的最简单解决方案是将以下内容设置为 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>