[안드로이드] 백터이미지(svg) 적용하기

littlecsh·2024년 1월 8일

앱개발

목록 보기
6/16
post-thumbnail

앱개발에 있어 이미지는 필수이다.

이미지를 넣는 방법에는 몇가지가 있다.

png

그중 하나는 png 이미지파일이다.
png파일은 이미지의 투명도를 표현할 수 있어 앱 개발시 자주사용하는 형식이다.

하지만 png에는 단점도 존재한다.
가로세로 고정된 픽셀값으로 이뤄진 비트맵방식의 이미지파일이기 때문에 기종의 크기가 다양한 안드로이드 세계에선 이 고정된 크기로 커버하기 어렵다는 것이다.

이를 해결하기 위해 여러가지 크기의 이미지를 만드는 방법이 있다.
보통 0.75배, 1배, 1.5배, 2배, 3배, 4배 사이즈의 이미지를 모두 담아 기종크기에따라 적절한 이미지를 불러온다.
하지만 늘어난 파일은 관리가 힘들고, 파일이 늘어난 만큼 용량또한 커지기때문에 SVG파일을 많이 사용하고 있다.

svg

svg은 Scalable Vector Graphics의 약자로 2차원 벡터그래픽이라고도 부른다.
앞서말한 비트맵방식은 화소 한개에 색의 정보를 담는 방식을 말한다.
하지만 벡터는 그림자체가 가진 정보를 바탕으로 점과 점사이를 수학적으로 계산해 렌더링한 방식이다.
때문에 크기를 키워도 비트맵방식의 이미지처럼 깨지는 일명 계단현상이 나타나지 않고 원본의 깨끗한 이미지를 표현할 수 있다.

svg파일 불러오기

png파일은 이미지를 복사해서 drawable폴더에 그대로 복사했다면 svg파일을 불러올때는 아래의 방법을 이용해야 한다.

  1. res폴더 우클릭 -> New -> Vector Asset

A. 안드로이드에서 제공하는 이미지를 사용할때
B. svg파일로 다운받았거나 svg파일로 이미지를 만들었을때
로 구분지어 설명하겠다.

2-A. 왼쪽의 Clip art를 선택후 이름을 정하고 Clip art에서 원하는 이미지 선택 -> Next
2-B. 오른쪽 Local file을 선택후 이름을 정하고 svg파일이 저장된 경로를 선택 -> Next
(클립아트에서 이미지를 정할시 컬러값을 원하는 컬러로 변경하는 옵션을 제공하고 있다.)

  1. 이후는 특별히 건드릴건 없다.
    res/drawable폴더 안에 선택한 이미지가 들어가 있는지 확인후 Finish를 누르면 svg파일을 불러올 수 있다.

파일을 불러왔다면 형식이 xml로 되어있는 것을 확인할 수 있을 것이다.
svg파일을 가져왔어도 xml일 것이다.
당연하다. 앞의 방법으로 이미지를 불러오면서 svg파일을 xml형식으로 변환된 것이다.

나는 svg파일이 변환되어 불러와진다는 사실을 모른채 svg파일을 안드로이드스튜디오에서 사용하는 방법을 주구장창 찾다가 뒤늦게 확장자가 xml인것을 확인했다.

xml파일을 사용하는 방식은 png를 불러올때와 같이 사용하면 된다.

아래 예시 코드를 참고하기 바란다.

<ImageView
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:src="@drawable/sample1"
/>

뷰를 사용할때는 최소 2개의 제약을 걸어야 오류가 나지 않는다.
위 코드가 제약을 걸지 않은 것처럼 보이지만
가로와 세로를 부모의 사이즈와 같게 맞춰두었기 때문에 제약을 걸어둔 상태와 같다.

profile
앱개발 튜토리얼

0개의 댓글