Bagaimana cara membuat EditText dengan sudut membulat?

Jawaban:

566

Ada cara yang lebih mudah daripada yang ditulis oleh CommonsWare. Cukup buat sumber daya yang EditTextdapat digambar yang menentukan cara yang akan diambil:

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

Lalu, cukup referensi gambar ini di tata letak Anda:

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

Anda akan mendapatkan sesuatu seperti:

teks alternatif

Edit

Berdasarkan komentar Mark, saya ingin menambahkan cara Anda dapat membuat status yang berbeda untuk 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>

Ini adalah negara bagian:

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

Dan ... sekarang, EditTextseharusnya terlihat seperti:

<?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>
Cristian
sumber
15
Kecuali bahwa solusi Anda menggunakan drawable yang sama untuk semua negara. Biasa EditTextmemiliki latar belakang yang berbeda untuk fokus, dinonaktifkan, ditekan, dan dipilih, selain standar. Berfokus, khususnya, mungkin penting untuk maju jika kita mendapatkan beberapa perangkat Android yang tidak memiliki layar sentuh, seperti Google TV.
CommonsWare
Ini bagus! Ini berfungsi dengan baik pada perangkat tetapi mencegah tampilan 'Layout Grafis' dari menampilkan aktivitas saya ketika saya menyertakan kotak edit bulat. Log kesalahan memberi saya 'UnsupportedOperationException: null'. Ada ide?
Ben Clayton
Senang mengetahui ... sebenarnya saya tidak tahu cara memperbaikinya. Saya kira ini adalah bug ADT Eclipse.
Cristian
jawaban yang bagus Ketika saya mencoba untuk melakukannya dengan ADT terbaru, tidak ada yang terjadi kecuali layar desain UI menjadi agak teduh .. meskipun sedikit. Tetapi jawaban yang sangat baik. Selamatkan saya dari bos saya :)
Jay Mayu
2
jika jari-jari Anda sama untuk android:radius
keempat
129

Ini adalah solusi yang sama (dengan beberapa kode bonus tambahan) hanya dalam satu 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>

Anda kemudian hanya mengatur atribut latar belakang ke file edittext_rounded_corners.xml:

<EditText  android:id="@+id/editText_name"
      android:background="@drawable/edittext_rounded_corners"/>
Norfeldt
sumber
mendapatkan kesalahan karena "0.5dp" pada atribut "width" bukan format yang valid.
Maveň ツ
Saya mencoba menggunakan solusi di atas tetapi sayangnya, sementara saya baru saja mengatur topRightRadiusdan topLeftRadiuskeempat sudut akhirnya bulat. Tolong bantu. :(
ikartik90
30

Coba yang ini,

1.Buat file rounded_edittext.xml di Drawable Anda

    <?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. Terapkan latar belakang untuk EditText Anda dalam file 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. Anda akan mendapatkan output seperti ini

masukkan deskripsi gambar di sini

sachin pangare
sumber
1
Sachin gambar output Anda menunjukkan sudut persegi tidak bulat seperti yang diminta oleh penanya. Ini mungkin cara yang baik untuk membuat kotak memiliki garis besar.
JesseBoyd
2
@JesseBoyd, Kekhawatiran Anda benar tetapi rounded_edittext dalam file xml ini hanya mengubah nilai semua Radius sesuai kebutuhan Anda.
sachin pangare
17

Terima kasih atas jawaban Norfeldt. Saya telah membuat sedikit perubahan pada gradiennya untuk efek bayangan batin yang lebih baik.

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

Tampak hebat dalam tata letak latar belakang yang ringan ..

masukkan deskripsi gambar di sini

Sayka
sumber
7

Menurut cara berpikir saya, itu sudah memiliki sudut-sudut bulat.

Jika Anda ingin mereka lebih bulat, Anda perlu:

  1. Mengkloning semua gambar PNG sembilan-tambalan yang membentuk EditTextlatar belakang (ditemukan di SDK Anda)
  2. Ubah masing-masing untuk memiliki sudut yang lebih bulat
  3. Mengkloning StateListDrawablesumber daya XML yang menggabungkan EditTextlatar belakang tersebut menjadi satu Drawable, dan memodifikasinya untuk menunjuk ke file PNG sembilan-patch Anda yang lebih bulat
  4. Gunakan yang baru StateListDrawablesebagai latar belakang untuk EditTextwidget Anda
CommonsWare
sumber
3

Jika Anda ingin hanya sudut yang melengkung tidak seluruhnya, maka gunakan kode di bawah ini.

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

Itu hanya akan melengkung empat sudut EditText.

Kirtikumar A.
sumber
2

Hanya untuk menambah jawaban lain, saya menemukan bahwa solusi paling sederhana untuk mencapai sudut-sudut membulat adalah dengan mengatur yang berikut sebagai latar belakang untuk Edittext Anda.

<?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>
Droid
sumber
2

Dengan Perpustakaan Komponen Bahan Anda dapat menggunakan MaterialShapeDrawableuntuk menggambar bentuk kustom .

Dengan yang EditTextdapat Anda lakukan:

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

Kemudian buat 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);

masukkan deskripsi gambar di sini

Itu membutuhkan versi 1.1.0 dari perpustakaan.

Gabriele Mariotti
sumber