안드로이드 Custom EditText 만들기

공감 및 댓글은 포스팅 하는데  아주아주 큰 힘이 됩니다!! 포스팅 내용이 찾아주신 분들께  도움이 되길 바라며 더 깔끔하고 좋은 포스팅을  만들어 나가겠습니다^^

안드로이드 개발을 할 때 커스텀 뷰를 만들 수 있다면

여러 곳에서 유용하게 사용할 수 있는데요.

이번에 인스타그램의 UI를 어떻게 만들었을까 궁금해 개인적으로 따라만들어

보던 중에 EditText에 Focus가 되었을 때 밑줄의 색이 바뀌고 unfocus가 되었을 때

회색으로 바뀌는 걸 보고 custom EditText를 만들어봤습니다.

다양한 방법이 있겠지만, 저는 ConstraintLayout + EditText + View를 사용했습니다.

Custom class

public class ChangedColorEditText extends ConstraintLayout {

    AppCompatEditText changedColorEdtText;
    View underlineView;

    public ChangedColorEditText(Context context) {
        super(context);
        init();
    }

    public ChangedColorEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
        getAttrs(attrs);
    }

    public ChangedColorEditText(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
        getAttrs(attrs, defStyleAttr);
    }


    private void init() {
        String inflaterService = Context.LAYOUT_INFLATER_SERVICE;
        LayoutInflater layoutInflater = (LayoutInflater) getContext().getSystemService(inflaterService);
        View view = layoutInflater.inflate(R.layout.edittext_changedcolor, this, false);

        addView(view);

        changedColorEdtText = view.findViewById(R.id.changedColorEdtText);
        underlineView = view.findViewById(R.id.underlineView);

        changedColorEdtText.setOnFocusChangeListener((editText, hasFocus) -> {
            if (hasFocus) {
                underlineView.setBackgroundResource(R.color.colorAccent);
            } else {
                underlineView.setBackgroundResource(R.color.lgtGray);
            }
        });
    }

    private void getAttrs(AttributeSet attrs) {
        TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.ChangedColorEditText);
        setTypeArray(typedArray);
    }
    private void getAttrs(AttributeSet attrs , int defStyleAttr) {
        TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.ChangedColorEditText, defStyleAttr, 0);
        setTypeArray(typedArray);
    }

    private void setTypeArray(TypedArray typeArray) {
        String hintResID = typeArray.getString(R.styleable.ChangedColorEditText_hint);
        changedColorEdtText.setHint(hintResID);

        boolean focusableInTouchMode = typeArray.getBoolean(R.styleable.ChangedColorEditText_focusableInTouchMode, true);
        changedColorEdtText.setFocusableInTouchMode(focusableInTouchMode);
        typeArray.recycle();
    }

    public void setText(String text) {
        changedColorEdtText.setText(text);
    }

    public void setText(int resId) {
        changedColorEdtText.setText(resId);
    }

    public void setHint(String hint) {
        changedColorEdtText.setHint(hint);
    }

    public void setHint(int resID) {
        changedColorEdtText.setHint(resID);
    }


    public String getText() {
        return changedColorEdtText.getText() == null ? "none" :changedColorEdtText.getText().toString();
    }
}

layout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.appcompat.widget.AppCompatEditText
        android:id="@+id/changedColorEdtText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@null"
        android:inputType="text"
        android:maxLines="1"
        android:paddingTop="@dimen/padding_8"
        android:paddingBottom="@dimen/padding_8"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/underlineView"
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="@color/lgtGray"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="ChangedColorEditText">

        <attr name="hint" format="reference|string" />
        <attr name="focusableInTouchMode" format="reference|boolean"/>
    </declare-styleable>

</resources>

아래 짧은 영상은 예제 영상입니다.

궁금하신 점은 댓글달아주세요 ^^ 감사합니다~