[안드로이드] textview 외곽선 넣기

배경이 있는곳에 하얀 색을 갖고있는 글을 입력했는데 잘 인식되지 않는다는 의견이 있어서

글자에 외곽선을 넣을일이 생겼습니다.

 

기존에 사용하던 글자는 아래와 같습니다.

바탕도 전체적으로 밝은편인데 글자색까지 하얀색으로 하니 뒤로 갈수록 눈에 잘 안띄는것 같기는 하네요.

 

이제 글자에 테두리를 만들어 넣어보도록 하겠습니다.

절차는 3가지 정도입니다.

커스텀 클래스를 하나 만들고 attrs.xml을 만들고 레이아웃을 설정해주면 끝입니다.

 

아래는 관련된 코드입니다.

 

outline_textview.xml 을 하나 만들어줍니다.

< outline_textview.xml >

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="OutlineTextView">
        <attr format="boolean" name="textStroke"/>
        <attr format="float" name="textStrokeWidth"/>
        <attr format="color" name="textStrokeColor"/>
    </declare-styleable>
</resources>

이렇게 사용할 외곽선 코드를 입력해주고 적용할 곳에 입력해주도록 합니다.

 

< OutlineTextView.java >

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

public class OutlineTextView extends AppCompatTextView {     private boolean stroke = false;      private float strokeWidth = 0.0f;     private int strokeColor;       public OutlineTextView(Context context) {         super(context);     }       public OutlineTextView(Context context, AttributeSet attrs) {         super(context, attrs);           initView(context, attrs);     }       public OutlineTextView(Context context, AttributeSet attrs, int defStyleAttr) {         super(context, attrs, defStyleAttr);           initView(context, attrs);     }       private void initView(Context context, AttributeSet attrs) {         TypedArray type = context.obtainStyledAttributes(attrs, R.styleable.OutlineTextView);           stroke = type.getBoolean(R.styleable.OutlineTextView_textStroke, false); // 외곽선 유무         strokeWidth = type.getFloat(R.styleable.OutlineTextView_textStrokeWidth, 0.0f); // 외곽선 두께         strokeColor = type.getColor(R.styleable.OutlineTextView_textStrokeColor, 0xffffffff); // 외곽선      }       @Override     protected void onDraw(Canvas canvas) {         if (stroke) {             ColorStateList states = getTextColors();             getPaint().setStyle(Style.STROKE);             getPaint().setStrokeWidth(strokeWidth);             setTextColor(strokeColor);             super.onDraw(canvas);               getPaint().setStyle(Style.FILL);             setTextColor(states);         }           super.onDraw(canvas);     } } Colored by Color Scripter

cs

 

레이아웃에 적용시켜줍니다.

< activity_cap_none.xml >

<androidx.constraintlayout.widget.ConstraintLayout 
    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:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <com.cis.handsanitizer.utils.OutlineTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="뚜껑을 보충해주세요."
        android:textColor="@color/whiteColor"
        android:textSize="80sp"
        app:textStroke="true"      // 외곽선 유무 지정
        app:textStrokeWidth="6.0" // 외곽선 두께 지정
        app:textStrokeColor="@color/blackColor" // 외곽선 색상 지정 />
 
</androidx.constraintlayout.widget.ConstraintLayout>

 

이렇게 지정하신 후 실행하면 아래와 같이 글자에 외곽선이 지정된 모습을 확인하실 수 있을겁니다.

몇 개의 파일을 생성해야 하긴 하지만 그렇게 길진 않으니까 어렵지 않게 적용하실 수 있을것 같습니다.