Jak stworzyć EditText z zaokrąglonymi rogami? [Zamknięte]

Odpowiedzi:

578

Jest łatwiejszy sposób niż ten napisany przez CommonsWare. Po prostu utwórz zasób do rysowania, który określa sposób EditTextrysowania:

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

Następnie po prostu odwołaj się do tego rysunku w swoim układzie:

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

Otrzymasz coś takiego:

tekst alternatywny

Edytować

Na podstawie komentarza Marka chcę dodać sposób, w jaki możesz tworzyć różne stany dla 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>

Oto stany:

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

A teraz EditTextpowinno wyglądać następująco:

<?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
źródło
15
Tyle tylko, że twoje rozwiązanie wykorzystuje te same elementy do rysowania dla wszystkich stanów. Regularne EditTextma inne tła dla skupionego, wyłączonego, wciśniętego i zaznaczonego, poza domyślnym. W szczególności skupienie się może być ważne w przyszłości, jeśli otrzymamy urządzenia z Androidem bez ekranów dotykowych, takie jak Google TV.
CommonsWare,
To jest świetne! Działa dobrze na urządzeniu, ale zapobiega wyświetlaniu mojej aktywności w widoku „Układ graficzny”, gdy dołączam zaokrąglone pole edycji. Dziennik błędów podaje „UnsupportedOperationException: null”. Jakieś pomysły?
Ben Clayton,
Dobrze wiedzieć ... właściwie nie wiem, jak to naprawić. Myślę, że to błąd ADT Eclipse.
Cristian,
doskonała odpowiedź. Kiedy próbuję to zrobić z najnowszym ADT, nic się nie dzieje, ale ekran projektu interfejsu użytkownika staje się trochę zacieniony ... choć trochę dziwny. Ale świetna odpowiedź. Uratował mnie od mojego szefa :)
Jay Mayu
2
jeśli twój promień jest taki sam dla wszystkich 4 rogów, użyj android:radiuszamiast definiować 4 linie
Viswanath Lekshmanan
130

Oto to samo rozwiązanie (z dodatkowym kodem bonusowym) w jednym pliku 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>

Następnie wystarczy ustawić atrybut tła na plik edittext_rounded_corners.xml:

<EditText  android:id="@+id/editText_name"
      android:background="@drawable/edittext_rounded_corners"/>
Norfeldt
źródło
wyświetlanie błędu jako „0,5 dp” w atrybucie „szerokość” nie jest prawidłowym formatem.
Maveň ツ
Próbowałem zastosować powyższe rozwiązanie, ale niestety po prostu ustawiłem topRightRadiusi topLeftRadiuswszystkie cztery rogi są zaokrąglone. Proszę pomóż. :(
ikartik90
30

Spróbuj tego,

  1. Utwórz rounded_edittext.xmlplik w swoim 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. Zastosuj tło do EditTextpliku w formacie 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. Otrzymasz takie wyniki

wprowadź opis obrazu tutaj

sachin pangare
źródło
1
Sachin obraz wyjściowy pokazuje narożniki kwadratowe, które nie są zaokrąglone zgodnie z żądaniem pytającego. To może być dobry sposób, aby pudełko miało zarys.
JesseBoyd
2
@JesseBoyd, Twoje obawy są słuszne, ale rounded_edittext w tym pliku xml po prostu zmień wartości wszystkich Radius zgodnie z wymaganiami.
sachin pangare
18

Dzięki za odpowiedź Norfeldta. Lekko zmieniłem jego gradient, aby uzyskać lepszy efekt wewnętrznego cienia.

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

Wygląda świetnie na jasnym tle.

wprowadź opis obrazu tutaj

Sayka
źródło
7

Według mnie ma już zaokrąglone rogi.

Jeśli chcesz, aby były bardziej zaokrąglone, musisz:

  1. Sklonuj wszystkie obrazy PNG z dziewięcioma poprawkami, które tworzą EditTexttło (znalezione w Twoim SDK)
  2. Zmodyfikuj każdy, aby mieć bardziej zaokrąglone rogi
  3. Sklonuj StateListDrawablezasób XML, który łączy te EditTexttła w jedno Drawablei zmodyfikuj go, aby wskazywał na bardziej zaokrąglone pliki PNG z dziewięcioma łatami
  4. Użyj tego nowego StateListDrawablejako tła dla swojego EditTextwidżetu
CommonsWare
źródło
4

Biblioteka komponentów materiałów MaterialShapeDrawableumożliwia rysowanie niestandardowych kształtów .

Za pomocą EditTextmożesz:

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

Następnie utwórz 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);

wprowadź opis obrazu tutaj

Wymaga wersji 1.1.0 biblioteki.

Gabriele Mariotti
źródło
3

Jeśli chcesz, aby tylko róg był zakrzywiony, a nie cały koniec, użyj poniższego kodu.

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

Zakrzywi tylko cztery kąty EditText.

Kirtikumar A.
źródło
2

Aby dodać do innych odpowiedzi, stwierdziłem, że najprostszym rozwiązaniem, aby uzyskać zaokrąglone rogi, było ustawienie następującego tła jako tła dla twojego 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>
Droid
źródło