[안드로이드] 선택자(Selector) 포커스(Focused) 에디트텍스트(EditText) 쉽게 외곽선, 색상 주는 방법 drawable.xml

이번 시간에는 에디트텍스트(EditText)에

포커스(Focus)되면 외곽선, 색상주는

방법에 대하여 알아보겠습니다.

---

목차

1. 실행 화면

2. 모양 drawable파일 만들기

3. 선택자 포커스 drawable 파일 만들기  

4. 메인 화면 구성 activity_main.xml

---

1. 실행 화면

2. 모양 drawable파일 만들기

res -> drawable 클릭 -> 마우스 오른쪽 -> new -> Drawable Resource File

file name: blue_style

 - 설명 - 

 - solid: 내부 색상은 파랑

 - size: 사이즈는 가로 100dp, 세로 50dp

 - radius: 모서리 라운드는 5dp

 - stroke:width: 외곽선 두께는 2dp

- stroke:color: 외곽선 색상은 빨강

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >

    <solid
        android:color="@color/blue_200"/>

    <size
        android:width="100dp"
        android:height="50dp"/>

    <corners
        android:radius="5dp"/>

    <stroke
        android:width="2dp"
        android:color="@color/red_200"/>
</shape>

 

res -> drawable 클릭 -> 마우스 오른쪽 -> new -> Drawable Resource File

file name: pink_style

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >

    <solid
        android:color="@color/pink_200"/>

    <size
        android:width="100dp"
        android:height="50dp"/>

    <corners
        android:radius="5dp"/>

    <stroke
        android:width="2dp"
        android:color="@color/blue_200"/>
</shape>

- 색상 - 

res -> values -> colors.xml

<color name="pink_200">#F48FB1</color>
<color name="blue_200">#90CAF9</color>
<color name="red_200">#EF9A9A</color>

 

3. 선택자 포커스 drawable 파일 만들기  

res -> drawable 클릭 -> 마우스 오른쪽 -> new -> Drawable Resource File

file name: selector_focused

 - 설명 - 

 sate_focused="true" 포커스 상태면 blue_style 적용

 포커스가 아니면 pink_style 적용

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_focused="true"
        android:drawable="@drawable/blue_style"/>

    <item
        android:drawable="@drawable/pink_style"/>
</selector>

 

4. 메인 화면 구성 activity_main.xml

 - 설명 - 

 1. 2개의 에디트텍스트로 구성

 2. 포커스 drawable 파일 적용되어 있어

 포커스 상태면 파란색으로 포커스가 아니면 

 분홍색으로 변경되어집니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.AppCompatEditText
        android:id="@+id/focus_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/selector_focused"
        android:hint="입력"
        android:textSize="15sp" />

    <androidx.appcompat.widget.AppCompatEditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:background="@drawable/selector_focused"
        android:hint="입력"
        android:textSize="15sp" />

</LinearLayout>

2022.02.19 - [안드로이드] - [안드로이드] 선택자(Selector) 누르기(Pressed) vs 선택하기(Selected) 버튼 쉽게 변경하는 방법 drawable.xml

[안드로이드] 선택자(Selector) 누르기(Pressed) vs 선택하기(Selected) 버튼 쉽게 변경하는 방법 drawable.xm

2022.02.18 - [안드로이드] - [안드로이드] 사각형(Rectangle), 원형(Oval), 선(Line) 모양 쉽게 만드는 방법 - Drawable.xml

[안드로이드] 사각형(Rectangle), 원형(Oval), 선(Line) 모양 쉽게 만드는 방법 - Drawable.xml

2022.02.17 - [안드로이드] - [안드로이드] 뷰(View) 거리두는 방법 Margin 사용법

[안드로이드] 뷰(View) 거리두는 방법 Margin 사용법