如何创建带有圆角的 EditText？答案

【问题标题】：How to create EditText with rounded corners?如何创建带有圆角的 EditText？
【发布时间】：2011-04-08 11:12:04
【问题描述】：

如何创建具有圆角而不是默认矩形角的EditText？

【问题讨论】：

标签： android view android-edittext rounded-corners android-shapedrawable

【解决方案1】：

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

你会得到类似的东西：

编辑

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

这些是状态：

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

【讨论】：

除非您的解决方案对所有状态使用相同的可绘制对象。除了默认设置外，常规的EditText 具有不同的聚焦、禁用、按下和选择背景。如果我们得到一些缺少触摸屏的 Android 设备（例如 Google TV），那么专注在未来可能很重要。
这太棒了！它在设备上运行良好，但当我包含圆形编辑框时，它会阻止“图形布局”视图显示我的活动。错误日志给了我一个'UnsupportedOperationException：null'。有什么想法吗？
很高兴知道...实际上我不知道如何解决它。我猜这是 Eclipse 的 ADT 错误。
优秀的答案。当我尝试使用最新的 ADT 时，什么都没有发生，但 UI 设计屏幕变得有点阴影.. 虽然有点 annyoing。但是很好的答案。从我的老板那里救了我:)
如果所有 4 个角的半径都相同，请使用 android:radius 而不是定义 4 条线

【解决方案2】：

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

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

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

【讨论】：

在属性“width”中获取错误为“0.5dp”不是有效格式。
我尝试使用上述解决方案，但不幸的是，虽然我只是设置了 topRightRadius 和 topLeftRadius，但所有四个角最终都变成了圆角。请帮忙。 :(

【解决方案3】：

试试这个，

在你的 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>

在 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" />

你会得到这样的输出

【讨论】：

Sachin 您的输出图像显示方角不是提问者要求的圆角。这可能是让盒子有轮廓的好方法。
@JesseBoyd，您的担心是对的，但是此 xml 文件中的 rounded_edittext 只是根据您的要求更改所有 Radius 的值。

【解决方案4】：

感谢 Norfeldt 的回答。我稍微改变了它的渐变以获得更好的内阴影效果。

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

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

【讨论】：

【解决方案5】：

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

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

克隆构成 EditText 背景的所有九个补丁 PNG 图像（在您的 SDK 中找到）
修改每个以具有更多圆角
克隆 XML StateListDrawable 资源，将这些 EditText 背景组合成一个 Drawable，并将其修改为指向更全面的九补丁 PNG 文件
使用新的StateListDrawable 作为EditText 小部件的背景

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

通过材质组件库，您可以使用MaterialShapeDrawable 到draw custom shapes。

使用 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。

【讨论】：

【解决方案8】：

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

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

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

【讨论】：