Как создать 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>

Затем просто назовите этот drawable в вашем макете:

<?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имеет разные фоны для фокусировки, отключен, нажат и выбран, кроме по умолчанию. В частности, фокусировка может быть важна в будущем, если мы получим некоторые устройства Android без сенсорных экранов, такие как Google TV.
CommonsWare

Это круто! Он отлично работает на устройстве, но не позволяет представлению «Графический макет» отображать мои действия, когда я включаю округлое поле редактирования. Журнал ошибок дает мне «UnsupportedOperationException: null». Любые идеи?
Бен Клейтон,

Приятно знать ... на самом деле я не знаю, как это исправить. Я думаю, что это ошибка ADT Eclipse.
Кристиан,

отличный ответ. Когда я пытаюсь сделать это с последним ADT, ничего не происходит, но экран дизайна пользовательского интерфейса становится немного затененным ... хотя и немного раздражающим. Но отличный ответ. Спас меня от моего босса :)
Jay Mayu

2
если ваш радиус одинаков для всех 4 углов, используйте android:radiusвместо определения 4 линий
Вишванат Лекшманан

129

Вот то же решение (с дополнительным бонусным кодом) только в одном 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_ounded_corners.xml:

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

ошибка "0.5dp" в атрибуте "width" не является допустимым форматом.
Maveň ツ

Я попытался использовать вышеупомянутое решение, но, к сожалению, пока я только установил, topRightRadiusи topLeftRadiusвсе четыре угла заканчивались закруглением. Пожалуйста помоги. :(
ikartik90

30

Попробуй это,

1. Создайте файл rounded_edittext.xml в своем Drawable

    <?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 в 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
Sachin ваше выходное изображение показывает квадратные углы, не закругленные, как этого требует спрашивающий. Это может быть хорошим способом получить в рамке наброски.
ДжессиБойд

2
@JesseBoyd, вы правы, но округленный_edittext в этом XML-файле просто измените значения всех радиусов в соответствии с вашими требованиями.
Сачин Пангаре

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

По моему мнению, у него уже есть закругленные углы.

Если вы хотите, чтобы они были более округленными, вам необходимо:

  1. Клонировать все PNG-изображения из девяти патчей, составляющие EditTextфон (находится в вашем SDK)
  2. Изменить каждый, чтобы иметь больше закругленных углов
  3. Клонируйте XML- StateListDrawableресурс, который объединяет эти EditTextфоны в один Drawable, и измените его так, чтобы он указывал на ваши более разнообразные файлы PNG из 9 патчей.
  4. Используйте это новое StateListDrawableв качестве фона для вашего EditTextвиджета

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>

Это только изогнет четыре угла EditText.


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

В библиотеке компонентов материалов вы можете использовать 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 библиотеки.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.