모서리가 둥근 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>

당신은 다음과 같은 것을 얻을 것입니다 :

대체 텍스트

편집하다

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>

15
솔루션이 모든 상태에 대해 동일한 드로어 블을 사용하는 것을 제외하고. 정기은 EditText기본 이외의 집중 장애인을 누르면, 선택된 다른 배경을 가지고 있습니다. 특히 Google TV와 같이 터치 스크린이없는 일부 Android 기기를 사용하는 경우 집중하는 것이 중요 할 수 있습니다.
CommonsWare

대단해! 장치에서 잘 작동하지만 둥근 편집 상자를 포함 할 때 '그래픽 레이아웃'보기에 내 활동이 표시되지 않습니다. 오류 로그에 'UnsupportedOperationException : null'이 표시됩니다. 어떤 아이디어?
벤 클레이튼

알아두면 좋겠다 ... 실제로 어떻게 고칠 지 모르겠다. 이클립스의 ADT 버그 인 것 같습니다.
크리스티안

훌륭한 답변. 최신 ADT로 시도하면 아무 일도 일어나지 않지만 UI 디자인 화면은 약간 어둡습니다. 그러나 탁월한 답변. 내 상사에게서 나를 구했다 :)
Jay Mayu

2
네 모서리 모두에 대해 반경이 동일한 경우 android:radius4 개의 선을 정의하는 대신 사용하십시오
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>

그런 다음 background 속성을 edittext_rounded_corners.xml 파일로 설정하십시오.

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

"width"속성에서 "0.5dp"로 오류가 발생하는 것은 올바른 형식이 아닙니다.
Maveň ツ

위의 솔루션을 사용해 보았지만 불행히도 방금 설정 topRightRadius하고 topLeftRadius네 모서리가 모두 둥글게되었습니다. 도와주세요. :(
ikartik90

30

이거 한번 해봐,

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

2. 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"/>

3.You는 이렇게 출력을 얻을 것이다

여기에 이미지 설명을 입력하십시오


1
Sachin의 출력 이미지는 질문자가 요청 한대로 둥근 모서리가 아닌 사각형 모서리를 보여줍니다. 이것은 상자에 개요를 표시하는 좋은 방법 일 수 있습니다.
JesseBoyd

2
@JesseBoyd, 귀하의 우려는 옳지 만이 xml 파일의 rounded_edittext는 요구 사항에 따라 모든 Radius의 값을 변경합니다.
sachin pangare 2016 년

17

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>

배경이 밝은 레이아웃에서 멋지게 보입니다 ..

여기에 이미지 설명을 입력하십시오


7

내 생각으로는 이미 모서리가 둥글다.

더 둥글게하려면 다음을 수행해야합니다.

  1. EditText배경 을 구성하는 9 개 패치 PNG 이미지를 모두 복제합니다 (SDK에 있음).
  2. 더 둥근 모서리를 갖도록 각각 수정
  3. StateListDrawable이러한 EditText배경을 하나로 결합하는 XML 리소스를 복제하고 Drawable더 둥근 9 패치 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

다른 답변에 추가하기 위해 둥근 모서리를 얻는 가장 간단한 해결책은 다음을 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를 사용하여 사용자 정의 모양그릴 수 있습니다 .

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 이 필요합니다 .

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.