[Google Fonts] 구글 폰트, 구글 아이콘 무료로 다운로드 받기 - 아이콘

지난편에 이어 이번편에서는 아이콘을 다운로드하고 안드로이드 스튜디오에 적용하여 보겠습니다!

 

Google Fonts

구글 폰트 사이트에 접속하겠습니다.

접속 후 오른쪽 상단의 icons를 클릭하여 줍니다!

구글 폰트

그러면 여기서 필요한 아이콘을 검색하시거나 스크롤하여 찾으시면 됩니다. 

저는 여기서 Group 아이콘을 검색하고 다운로드 해보겠습니다.

다운로드 하기 전에 빨간 박스를 보시면 Customization이라고 있습니다. 아이콘의 모양 크기 등을 변화시킬 수 있습니다.

Fill : 아이콘의 내부를 채우거나 비웁니다. (0 : 비움, 1 : 채움)

Weight : 아이콘의 라인 굵기를 변화시킵니다.

Grade : 아이콘의 라인을 아주 약간 변화시킵니다. 

Optical size : 아이콘의 크기를 변화시킵니다.

 

저는 Group 아이콘을 Fill - 1, weight - 400, Optical size : 40px로 설정하여 다운로드하겠습니다.

 

먼저 Group을 검색합니다.

구글 폰트

그리고 Customization을 수정합니다.

구글 폰트

이렇게 아이콘의 모양이 변화한 것을 볼 수 있습니다.

이제 Group아이콘을 클릭합니다.

구글 폰트

그러면  오른쪽 사이드바로 이렇게 나타나게 됩니다. 여기서 Android를 선택한 후 Download를 클릭합니다.

구글 폰트

Download를 클릭하면 xml파일이 다운로드 됩니다. xml파일은 Vector이미지를 안드로이드에 맞게 xml로 변환한것으로 바로 사용이 가능합니다.

이제 이 다운로드 받은 파일을 프로젝트에 집어 넣겠습니다.

프로젝트를 열고 res -> drawable 폴더에 드래그 앤 드롭을 해줍니다.

Refactor를 클릭합니다.

빨간줄이 뜰텐데 폰트와 마찬가지로 영소문자, _(언더바)를 사용해야 합니다.

마우스 오른쪽 -> Refactor -> Rename을 선택해줍니다.

저는 group-40px을 group_40px로 변경하겠습니다.

파일이름을 수정하고 Refactor를 클릭해줍니다.

그러면 빨간줄이 사라지고 해당 아이콘을 사용할 수 있습니다.

간단하게 Button을 생성하고 background로 지정 해 주겠습니다.

res -> layout -> activity_main.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.AppCompatButton
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="20dp"
        android:background="@drawable/group_40px"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Button을 생성해 주고

android:background에 아까 삽입했던 @drawable/group_40px를 설정해 주고나면

아이콘이 이렇게 설정됩니다.

 

background에 지정해주면 layout의 크기에 맞게 늘어나거나 줄어들기 때문에 View의 크기를 지정해주거나

ImageView등을 사용하여 background가 아닌 src로 지정해주면 아이콘의 크기와 비율이 유지된채로 적용되게 됩니다.

Vector이미지의 경우에는 backgroundTint를 설정하여 제가 원하는 색상으로 변화시킬 수 있습니다. 지금 저 아이콘을 파란색으로 만들어보겠습니다.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.AppCompatButton
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="20dp"
        android:background="@drawable/group_40px"
        android:backgroundTint="#0000FF"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

android:backgroundTint를 #0000FF로 지정해주면 이렇게 파란색으로 변하게 됩니다.

 

src로 설정하면 Tint를 적용할 수 없기 때문에 참고하시길 바랍니다.

또한 보시면 View를 일반 Button이 아닌 AppCompatButton을 사용하였는데 일반 Button의 경우에는 Custom이 제대로 적용되지 않기 때문에 웬만하면 버튼의 경우에는 AppCompatButton을 사용하시길 바랍니다. 

 

구글폰트에서 아이콘을 다운로드하고 간단하게 사용해보았습니다.

 

안드로이드에 관련한 궁금한 사항을 댓글이나 방명록에 작성해 주시면 답변드리겠습니다~!