앱 아이콘 만들기 (뷰)

Jetpack Compose 구현

이 페이지에는 뷰 기반 레이아웃에 고유한 앱 아이콘을 만들고 사용하는 방법에 관한 정보가 포함되어 있습니다. 앱 아이콘을 만드는 방법에 관한 포괄적인 정보는 권장되는 UI 프레임워크를 다루는 앱 아이콘 만들기를 참고하세요.

작업 모음 또는 탭 아이콘 만들기

Image Asset Studio를 사용하여 뷰 기반 레이아웃의 작업 모음 및 탭 아이콘을 만듭니다.

작업 모음 아이콘은 작업 모음에 배치되어 개별 작업 항목을 나타내는 그래픽 요소입니다. 자세한 내용은 작업 추가 및 처리 작업, 앱 바 - Material Design {:.external}, 작업 모음 디자인을 참고하세요.

탭 아이콘은 다중 탭 인터페이스에 있는 개별 탭을 표시하는 데 사용되는 그래픽 요소입니다. 각 탭 아이콘은 선택 해제된 상태와 선택된 상태의 두 가지 상태가 있습니다. 자세한 내용은 탭으로 스와이프 보기 만들기탭 - Material Design을 참고하세요.

Image Asset Studio는 res/drawable-<density>/ 디렉터리의 적절한 위치에 아이콘을 배치합니다.

이전의 Android 버전을 지원하더라도 작업 모음 및 탭 아이콘을 위한 Material Design 스타일을 사용하는 것이 좋습니다. 이전 플랫폼 버전에 Material Design UI를 제공하려면 appcompat 및 다른 지원 라이브러리를 사용하여 Material Design UI를 제공합니다.

Image Asset Studio의 대안으로, Vector Asset Studio를 사용하여 작업 모음 및 탭 아이콘을 생성할 수 있습니다. 벡터 드로어블은 간단한 아이콘에 알맞고 앱의 크기를 줄일 수 있습니다.

Image Asset Studio를 열고 다음 단계에 따라 작업 모음 또는 탭 아이콘을 추가할 수 있습니다.

  1. Icon Type 필드에서 Action Bar and Tab Icons 를 선택합니다.
  2. Asset Type 을 선택한 후 아래 필드에서 애셋을 지정합니다 .

    • Clip Art 필드에서 버튼을 클릭합니다.

      Select Icon 대화상자에서 material icon을 선택한 후 OK를 클릭합니다.

    • Path 필드에서 이미지의 경로와 파일 이름을 지정합니다. ...을 클릭하여 대화상자를 사용합니다.

    • Text 필드에서 텍스트 문자열을 입력하고 글꼴을 선택합니다.

    오른쪽의 Source Asset 영역과 마법사 하단 미리보기 영역에 아이콘이 나타납니다.

  3. (선택사항) 다음과 같이 이름과 디스플레이 옵션을 변경합니다.

    • 이름 - 기본 이름을 사용하지 않으려면 새 이름을 입력합니다. 입력한 리소스 이름이 프로젝트에 이미 존재하는 경우 마법사 하단에 오류로 표시되고 덮어쓰게 됩니다. 이름에는 소문자, 밑줄, 숫자만 포함될 수 있습니다.

    • Trim - 소스 애셋에서 아이콘 그래픽과 테두리 사이의 여백을 조정하려면 Yes를 선택합니다. 이 작업을 실행하면 투명한 공간이 삭제되지만 가로세로 비율은 유지됩니다. 소스 애셋을 변경하지 않고 그대로 두려면 No 를 선택합니다.

    • 안쪽 여백 - 4개의 면에서 모두 소스 애셋 안쪽 여백을 조정하려면 슬라이더를 움직여 조정합니다. -10% 에서 50% 사이의 값을 선택합니다. **Trim** 도 함께 선택하면 자르기 작업이 먼저 이루어집니다.

    • 테마 - HOLO_LIGHT 또는 HOLO_DARK를 선택합니다. 또는 Select Color 대화상자에서 색을 지정하려면 CUSTOM 을 선택한 후 Custom color 필드를 클릭합니다.

    Image Asset Studio에서는 투명한 정사각형 모양 내부에 아이콘이 만들어지므로 가장자리에 안쪽 여백이 약간 있습니다. 이 여백은 표준 그림자 아이콘 효과에 적합한 공간으로 활용할 수 있습니다.

  4. 다음 을 클릭합니다.

  5. (선택사항) 다음과 같이 리소스 디렉터리를 변경합니다.

    • Res Directory - 이미지 애셋을 추가할 리소스 소스 세트를 선택합니다. src/main/res, src/debug/res, src/release/res 또는 사용자 정의 소스 세트 중에서 선택할 수 있습니다. 기본 소스 세트는 디버그와 릴리스를 포함한 모든 빌드 변형에 적용됩니다. 디버그 및 릴리스 소스 세트는 기본 소스 세트를 재정의하고 빌드 버전 하나에 적용됩니다. 디버그 소스 세트는 디버깅 전용입니다. 새 소스 세트를 정의하려면 File > Project Structure > app > Build Types 를 선택합니다. 예를 들어 베타 소스 세트를 정의하고 오른쪽 하단에 'BETA' 텍스트가 포함된 아이콘 버전을 만들 수 있습니다. 자세한 내용은 빌드 변형 구성을 참고하세요.

    Output Directories 영역에는 Project 창의 Project Files view에 나타나는 이미지와 폴더가 표시됩니다.

  6. Finish 를 클릭합니다.

    Image Asset Studio에서는 다양한 밀도별로 drawable 폴더에 이미지가 추가됩니다.

코드의 이미지 리소스 참조하기

일반적으로 코드에서 이미지 리소스를 일반적인 방식으로 참조할 수 있으며 앱이 실행되면 기기에 따라 상응하는 이미지가 자동으로 표시됩니다.

  • 대부분의 경우 XML 코드에서 이미지 리소스를 @drawable로 또는 Drawable 자바 코드에서 참조할 수 있습니다.

    예를 들어, 다음 레이아웃 XML 코드는 드로어블을 ImageView에 표시합니다.

    <ImageView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:src="@drawable/myimage" />
    

    다음 자바 코드는 이미지를 Drawable 가져옵니다.

    Kotlin

    val drawable = resources.getDrawable(R.drawable.myimage, theme)

    자바

    Resources res = getResources();
    Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());

    getResources() 메서드는 Context 클래스에 있는데, 이는 활동, 프래그먼트, 레이아웃, 보기 등의 UI 객체에 적용됩니다.

  • 앱에서 지원 라이브러리를 사용하는 경우 app:srcCompat 명령문으로 XML 코드에 있는 이미지 리소스를 참조할 수 있습니다. 예를 들면 다음과 같습니다.

    <ImageView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:srcCompat="@drawable/myimage" />
    

메인 스레드에서만 이미지 리소스에 액세스할 수 있습니다.

프로젝트의 res/ 디렉터리에 이미지 리소스가 있으면 리소스 ID를 사용하여 자바 코드나 XML 레이아웃에서 이 리소스를 참조할 수 있습니다. 다음은 ImageView를 사용하여 drawable/myimage.png 리소스를 설정하는 자바 코드입니다.

Kotlin

findViewById<ImageView>(R.id.myimageview).apply {
    setImageResource(R.drawable.myimage)
}

자바

ImageView imageView = (ImageView) findViewById(R.id.myimageview);
imageView.setImageResource(R.drawable.myimage);

자세한 내용은 앱 리소스에 액세스를 참고하세요.