Як створити 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>

Ви отримаєте щось на кшталт:

alt текст

Редагувати

На основі коментаря Марка я хочу додати спосіб створення різних станів для свого 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 лінії
Viswanath Lekshmanan

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>

Потім просто встановіть атрибут фону для файлу edittext_rounded_corners.xml:

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

помилка отримання "0,5dp" в атрибуті "width" не є коректним форматом.
Maveň ツ

Я спробував використовувати вищезазначене рішення, але, на жаль, поки я лише встановив, topRightRadiusі topLeftRadiusвсі чотири кути закінчуються округлими. Будь ласка, допоможіть. :(
ikartik90

30

Спробуйте це,

1.Створіть файл okrued_edittext.xml у файлі Dravable

    <?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. Застосуйте фон для свого редагування у тексті 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

2
@JesseBoyd, Ваше занепокоєння правильне, але закруглений_edittext у цьому XML-файлі просто змініть значення всіх радіусів відповідно до вашої вимоги.
sachin pangare

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. Клоніруйте StateListDrawableресурс XML, який поєднує ці EditTextфони в єдиний Drawable, і змініть його, щоб вказати на ваші більш округлі дев'ять патч-файли PNG
  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

Просто для додання інших відповідей я виявив, що найпростішим рішенням для досягнення закруглених кутів було встановити наступне як тло для вашого редагування тексту.

<?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для малювання спеціальних фігур .

З a 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.