EditText를 둥근 모서리로 만들기

Stack Overflow에 자주 검색, 등록되는 문제들과 제가 개발 중 찾아 본 문제들 중에서 나중에도 찾아 볼 것 같은 문제들을 정리하고 있습니다.

Stack Overflow에서 가장 먼저 확인하게 되는 가장 높은 점수를 받은 Solution과 현 시점에 도움이 될 수 있는 가장 최근에 업데이트(최소 점수 확보)된 Solution을 각각 정리하였습니다.

 

아래 word cloud를 통해 이번 포스팅의 주요 키워드를 미리 확인하세요.

How to create EditText with rounded corners?

EditText를 둥근 모서리로 만드는 방법은 무엇인가요?

 문제 내용 

How to create an EditText that has rounded corners instead of the default rectangular-shaped corners?

기본적으로 사각형 모양의 모서리를 가지는 EditText 대신에 둥근 모서리를 가지는 EditText를 만드는 방법은 무엇인가요?

 

 

 

 높은 점수를 받은 Solution 

There is an easier way than the one written by CommonsWare. Just create a drawable resource that specifies the way the EditText will be drawn:

CommonsWare가 작성한 방법보다 더 쉬운 방법이 있습니다. EditText가 그려질 방법을 지정하는 drawable 리소스를 만들면 됩니다.

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

 

Then, just reference this drawable in your layout:

그런 다음 이 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>

 

You will get something like:

다음과 같은 결과물이 나옵니다:

Edit

편집

 

Based on Mark's comment, I want to add the way you can create different states for your EditText:

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>

 

These are the states:

다음은 상태입니다:

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

 

And... now, the EditText should look like:

그리고... 이제 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>

 

 

 가장 최근 달린 Solution 

With the Material Components Library you can use the MaterialShapeDrawable to draw custom shapes.

Material Components Library를 사용하면 MaterialShapeDrawable을 사용하여 사용자 지정 모양을 그릴 수 있습니다.

 

With a EditText you can do:

EditText를 사용하면 다음과 같은 작업을 수행할 수 있습니다:

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

 

Then create a MaterialShapeDrawable:

그런 다음 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);

It requires the version 1.1.0 of the library.

이는 라이브러리의 버전 1.1.0을 필요로 합니다.

 

 

 

출처 : https://stackoverflow.com/questions/3646415/how-to-create-edittext-with-rounded-corners