태그 보관물: Android

안드로이드 외부 라이브러리 뷰 스타일 변경하기

안드로이드는 뷰의 크기, 색 등의 각종 스타일과 관련된 설정은 외부 파일(dimens.xml, colors.xml 등)에 저장해서, 한번에 많은 뷰의 스타일을 변경할 수 있도록 한다. 이 방법을 사용해서 테마나 스타일을 쉽게 변경할 수 있게 한다.

만약 앱과 라이브러리에서 동일한 속성 값을 사용한다면, 앱에서 정의한 속성을 사용한다. 그래서, 이 방법을 사용해서 외부 라이브러리 뷰의 스타일을 변경하는 방법을 살펴보겠다. 대부분의 라이브러리는 뷰의 속성을 외부 파일에 정의해서 릴리즈를 하지만, 속성값을 하드코딩한 경우에는 스타일 변경이 쉽지 않다.

라이브러리의 스타일을 변경하는 예제로, AboutLibraries(https://github.com/mikepenz/AboutLibraries)를 사용해 보자. 이 라이브러리가 사용하는 각종 스타일 값들을 살펴보고, 레이아웃에서 정의한 값들을 사용하는 부분과 이 정의 값을 변경해서 UI를 변경하는 예제를 살펴보자.

1. 스타일(styles.xml)

이 파일은 https://github.com/mikepenz/AboutLibraries/blob/develop/library/src/main/res/values/styles.xml 에서 확인 할 수 있다. 이 파일에서 앱이나 라이브러리의 스타일을 확인 할 수 있다. 아래는 스타일 파일에서 기본 스타일로 정의한 부분이다. 다른 앱들과 거의 비슷하다.

   


그러나, “AboutLibraries specific values” 주석아래를 살펴보면, item name=”about_libraries_window_background” 와 같이 커스텀 값이라는 것을 알 수 있다. 커스텀 값은 속성 파일(attrs.xml)에 정의해서 사용 할 수 있다. 속성 파일을 살펴보자.

2. 속성(attr.xml)

이 파일에서는 https://github.com/mikepenz/AboutLibraries/blob/develop/library/src/main/res/values/attrs.xml 에서 확인 할 수 있다. 이 파일은 안드로이드 앱이나 라이브러리에서 커스텀으로 사용하는 요소나 속성을 정의하는 용도이다. 이 내용은 XML 스키마를 정의해 봤다면 쉽게 이해가 갈 것이다. 하지만, 안드로이드에서 읽어들이는 값들이 정의되어 있기에, 이름과 포맷만 기술하게 되어 있긴 하다. 아래는 라이브러리에서 커스텀으로 정의한 속성의 일부이다.

 

 	
 	
 	
 	
 	
 	
 	
 	
 	
 	

위 속성에서 “about_libraries_window_background”는 색이고 참조(reference)라는 것을 알 수 있다. 다음으로 색을 살펴보자.

3. 색(colors.xml)

이 파일은 https://github.com/mikepenz/AboutLibraries/blob/develop/library/src/main/res/values/colors.xml 에서 확인 할 수 있다. 아래는 라이브러리가 사용하려고 정의한 색들 중에 일부이다.

 

#ECECEC
#FAFAFA
#212121
#727272
#212121
#AAA
#DADADA

색의 이름이 속성 파일에 정의한 이름으로 요소는 color로 시작하는 것을 알 수 있다.

4. 크기 정의(dimens.xml)

이 파일은 https://github.com/mikepenz/AboutLibraries/blob/develop/library/src/main/res/values/dimen.xml 에서 확인 할 수 있다. 이 파일은 안드로이드에서 뷰의 마진, 여백, 폰트 크기 등의 값을 정의한다. 이 라이브러리의 크기 값들은 아래와 같다.

 


12dp
72dp
20sp
14sp

16dp
16dp

이제 위 속성을 변경하지 않은 화면은 아래와 같다.

다음으로 속성을 변경하면, 어떤 UI가 변경되는지 살펴보기 위해서 간단하게 레이아웃 파일을 살펴보자.

5. 레이아웃 확인

이제 레이아웃 파일에서 개별 뷰의 스타일이 위에서 사용하는 속성을 사용하는지, 그리고 이 속성을 변경해서 뷰를 수정해 보자.

– 목록 컨테이너
목록 컨테이너는 https://github.com/mikepenz/AboutLibraries/blob/develop/library/src/main/res/layout/fragment_opensource.xml 에 정의되어 있다. 목록을 보여주는 컨테이너로 리사이클러뷰(RecyclerView)를 사용하고, 패딩 값으로 dimens.xml 파일에 정의한 속성 값을 사용하는 것을 알 수 있다. 이 속성 값을 변경해서 카드 레이아웃이 조금 좁거나 넓게 보이게 할 수 있다.

 

– 헤더 부분
목록의 헤더 부분(앱 아이콘, 이름, 버전 정보 등)은 https://github.com/mikepenz/AboutLibraries/blob/develop/library/src/main/res/layout/listheader_opensource.xml 에 정의되어 있다. 아래는 이 파일에서 앱 아이콘, 이름, 버전을 보여주는 일부 뷰이다. 여기에서도 이미지 크기는 dimens.xml 파일에 정의되어 있고, 앱 이름과 버전도 정의한 것을 알 수 있다.

 



– 항목(Item) 부분
목록의 항목은 https://github.com/mikepenz/AboutLibraries/blob/develop/library/src/main/res/layout/listitem_opensource.xml 에 정의되어 있다. 아래는 라이브러리 이름과 개발자 이름을 보여주는 부분이다. 여기도 목록의 헤더와 같이 textSize를 dimen.xml 에서 정의한 값으로 사용한다.

 


6, UI 변경 예제

이제 앱에서 텍스트 크기를 변경해서, 이 라이브러리 뷰가 사용하는 텍스트뷰의 스타일을 변경해 보자. 개발중인 앱의 앱 모듈에서 크기 정의 파일(/app/src/main/res/values/dimens.xml)을 열어서 아래의 값을 추가해 보자.

 
16sp
16sp

위 속성을 추가한 뒤의 결과는 아래와 같다.

다음으로 위에서 정의한 속성 파일의 사용자 정의 색을 변경해 보자. 개발중인 앱의 앱 모듈에서 크기 정의 파일(/app/src/main/res/values/color.xml)을 열어서 아래의 값을 추가해 보자.

 
#0368A1
#FBBB00

위에서 변경한 색이 어떻게 적용되는지 확인하려면, 라이브러리 코드를 보면 쉽게 확인할 수 있다. 예로, 헤더의 앱 이름 색을 변경하는 코드는  https://github.com/mikepenz/AboutLibraries/blob/develop/library/src/main/java/com/mikepenz/aboutlibraries/ui/item/HeaderItem.java 에서 알 수 있다. 이 클래스에서 아래의 코드로 앱 이름 텍스트뷰의 텍스트 색을 변경하는 것을 알 수 있다.

aboutAppName = (TextView) headerView.findViewById(R.id.aboutName);
aboutAppName.setTextColor(UIUtils.getThemeColorFromAttrOrRes(headerView.getContext(), R.attr.about_libraries_title_description, R.color.about_libraries_title_description));

뷰를 가지는 대부분의 안드로이드 라이브러리는 위와 거의 비슷한 구조이다. 그래서 외부 라이브러리를 개발하는 앱의 스타일에 맞춰서 사용하려면, 이 글의 과정으로 쉽게 스타일을 변경할 수 있다.

액션바(ActionBar) 제목 및 부제목 스타일 변경

이제 아주 많은 앱들이 v7의 툴바(Toolbar)를 사용해서 액션바(ActionBar)로 사용할 것이다. 그리고, 액티비티(Activity)에서 보여주는 정보에 따라서 액티비티의 제목(Title)과 부제목(SubTitle)을 사용할 수도 있다.

프로젝트를 만들고, 액션바에 제목과 부제목을 추가해보자.

위 화면에서 보듯이, 글자색이 보색이 아니라서 가독성이 떨어진다. 그리고, 글자의 크기로 인해서 액션바의 제목을 보여주는 영역이 꽉 찬 느낌을 준다.

그래서, 가독성을 좋게하고 글자의 크기나 색을 변경할 수 있는 방법을 살펴보자. 여기에서는 툴바를 사용해서 액션바의 제목과 부제목의 스타일을 변경하는 방법을 살펴보자.

1. 액션바의 제목과 부제목에 해당하는 스타일을 만든다.
/res/values/styles.xml 파일을 열어서 아래의 스타일을 추가한다.

    


 


이 코드는 2개의 스타일을 정의한다. 제목 텍스트 스타일로 ToolbarTitleText에서 18sp의 크기와 md_grey_100의 색을 사용한다. 그리고, 부제목으로 ToolbarSubTitleText에서 볼 수 있듯이 14sp의 크기와 md_grey_200의 색을 사용한다.

2. Toolbar에서 제목 텍스트와 부제목 텍스트 스타일 지정
이제 /res/layout/xxx.xml 파일을 열어서 툴바의 스타일을 아래와 같이 지정한다.

    
    
        
        

이제 위에서 정의한 스타일이 잘 적용되는지 확인해보면 아래와 같은 결과를 확인 할 수 있다.

안드로이드 지원(support) 라이브러리 구글 메이븐 리파지토리

구글이 지원(support) 라이브러리 다운로드를 위해서 자체 메이븐 리파지토리를 구축해서 25.4.0 버전부터는 구글의 메이븐 리파지토리에서 다운로드 받을 수 있다. 주소는 maven.google.com 이다. 그래서 안드로이드 프로젝트 build.xml 파일에 아래와 같이 구글의 리파지토리도 추가한다.

allprojects {
  repositories {
  jcenter()
  maven { url "https://jitpack.io" }
  maven { url "https://maven.google.com" }
  }
}

https://maven.google.com에 접속하면 https://dl.google.com/dl/android/maven2/ 로 리다이렉트 된다. 구글 메이븐 리파지토리는 서버에서 리스팅 기능을 제공하지 않아서 호스팅 하는 전체 라이브러리를 볼 수 가 없다.

그래서 지원 라이브러리 중에 appcompat-v7 에 대해서 약간의 정보를 살펴봤다.

메타 데이터 정보
https://dl.google.com/dl/android/maven2/com/android/support/appcompat-v7/maven-metadata.xml

라이브러리 파일
https://dl.google.com/dl/android/maven2/com/android/support/appcompat-v7/25.4.0/appcompat-v7-25.4.0.aar

그리고, 구글 지원 라이브러리 종류는 아래에서 확인할 수 있고, 위의 패턴으로 개별 라이브러리를 확인할 수 있다.
https://developer.android.com/topic/libraries/support-library/packages.html

안드로이드 페브릭(Fabric) 그래들(Gradle) 플러그인 버전 지정하기

페브릭(Fabric)은 아주 유용한 기능을 모바일 플랫폼에 쉽게 적용할 수 있게 도와주는 서비스이다. Crashlytics도 페브릭에서 제공하는 크래시 리포트 서비스이다. Crashlytics을 안드로이드에서 사용하는 방법은 fabric.io/kits/android/crashlytics/install 에서 확인할 수 있다. 여기에서 아래의 아래의 코드를 추가하라고 한다.

buildscript {
repositories {
maven { url 'https://maven.fabric.io/public' }
}

dependencies {
// These docs use an open ended version so that our plugin
// can be updated quickly in response to Android tooling updates

// We recommend changing it to the latest version from our changelog:
// https://docs.fabric.io/android/changelog.html#fabric-gradle-plugin
classpath 'io.fabric.tools:gradle:1.+'
}
}

위 코드를 보면 알겠지만, 페브릭의 그래들 플러그인 버전이 ‘io.fabric.tools:gradle:1.+’로 선언되어 있다. 주석을 읽어보면 알겠지만, docs.fabric.io/android/changelog.html#fabric-gradle-plugin 에서 최신 버전으로 수정하라고 한다. 이 문서를 보면, 아래와 같이 최신 버전을 확인할 수 있고, 변경 내용도 확인할 수 있다.

2017년 6월 14일에 확인해 본 결과로 1.22.2 버전이 최신버전이다.

위 과정에 더불어, 페브릭 그래들 플러그인에 대한 메타 정보는 아래 URL에서 확인할 수 있다.
fabric-artifacts.s3.amazonaws.com/public/io/fabric/tools/gradle/maven-metadata.xml

위 이미지에서 최신 버전 릴리즈 시점이 2017년 05월 31일 이라는 것도 알 수 있다.

결론으로 app 모듈에서 build.gradle 파일의 맨 처음은 아래와 같은 모습이 될 것이다.

buildscript {
    repositories {
        jcenter()
        maven { url 'https://maven.fabric.io/public' }
    }

    dependencies {
        classpath 'com.android.tools.build:gradle:2.3.3'

        classpath 'io.fabric.tools:gradle:1.22.2'
    }
}

유용한 안드로이드 스튜디오 플러그인 소개

이 글에서는 안드로이드 스튜디오를 사용하면서 안드로이드 앱 개발에 유용한 플러그인을 몇 개 살펴본다. 여기에서 살펴보는 플러그인은 개인적으로 즐겨 사용하는 것으로, 개발시간을 단축하고 안드로이드 스튜디오를 더 편리하게 사용하도록 한다.

1. CodeGlance

이 플러그인은 서브라임 텍스트(Sublime Text)의 우측에 볼 수 있는 코드의 미니 맵을 편집기에 추가하는 플러그인이다. 플러그인 프로젝트에 밝은 테마와 어두운 테마 모두를 지원한다고 나와 있다.
– 플러그인 주소 : https://plugins.jetbrains.com/plugin/7275-codeglance
– 프로젝트 주소 : https://github.com/Vektah/CodeGlance

1.1 설치방법
File > Settings… > IDE Settings > Plugins > Browse repositories 에서 CodeGlan을 검색해서 설치한다.

1.2 사용방법
설치를 완료하고 재시작하면, 편집기 우측에 코드의 미니맵이 나타나는 것을 확인할 수 있다.

2. WIFI ADB ULTIMATE

이 플러그인은 USB로 안드로이드 기기에 연결하지 않고도, 같은 네트워크(WIFI)를 사용하는 안드로이드 기기에 ADB로 연결을 지원하는 도구이다.

플러그인 주소 : https://plugins.jetbrains.com/plugin/9207-wifi-adb-ultimate
프로젝트 주소 : https://github.com/huazhouwang/WIFIADB

2.1 설치방법
File > Settings… > IDE Settings > Plugins > Browse repositories 에서 wifi를 검색해서, 화면에 선택된 플러그인을 설치한다.

2.2 사용방법
안드로이드 스튜디오 우측에 “WIFI ADB ULTIMATE”을 클릭하면 아래의 화면이 나온다. 이 화면에서 안드로이드 기기의 IP를 확인하고 초록색 버튼을 클릭하면 연결된 원격 기기에 기기가 나타나는 것을 확인할 수 있다.

3. Parcelable code generator

이 플러그인은 클래스의 변수를 기준으로 Parcelable 인터페이스 구현 코드를 생성하는 도구이다.

플러그인 주소 : https://plugins.jetbrains.com/plugin/7332-android-parcelable-code-generator
프로젝트 주소 : https://github.com/mcharmas/android-parcelable-intellij-plugin

3.1 설치방법
File > Settings… > IDE Settings > Plugins > Browse repositories 에서 parcel를 검색해서 아래 화면에 선택된 플러그인을 설치한다.

3.2 사용방법
아래의 이미지에서 사용하는 방법을 쉽게 알 수 있다. 편집기에서 마우스 우측 클릭 > Generate… > Parceable을 선택해서 코드를 생성한다.

4. Android Material Design Icon Generator Plugin

이 플러그인은 머터리얼 디자인 아이콘을 앱에서 사용하기 쉽게 도와주는 도구이다.

플러그인 주소 : https://plugins.jetbrains.com/plugin/7647-android-material-design-icon-generator
프로젝트 주소 : https://github.com/konifar/android-material-design-icon-generator-plugin

4.1 설치 방법
File > Settings… > IDE Settings > Plugins > Browse repositories 에서 material을 검색해서 설치한다.

4.2 사용방법
File > New > Material Design Icon을 선택해서 아이콘을 생성할 수 있다.

5. Findbugs

이 플러그인은 즐겨 사용하는 정적 코드 분석 도구로, 안드로이드 스튜디오에서도 쉽게 사용할 수 있다.

플러그인 주소 : https://plugins.jetbrains.com/plugin/3847-findbugs-idea
프로젝트 주소 : http://andrepdo.github.io/findbugs-idea/

5.1 설치 방법
File > Settings… > IDE Settings > Plugins > Browse repositories 에서 findbug를 검색해서 설치한다.

5.2 사용 방법
프로젝트의 모듈로 이동해서 마우스 우측을 선택해서, FindBugs 메뉴를 선택해서 정적 분석을 시작한다.

아래의 화면은 룰에 위반되는 사례를 FindBugs가 분석한 항목들에 대한 화면이다. 이 개별 항목들이 반드시 버그가 아니지만, 그래도 확인해볼 필요가 있겠다.

6. ColorManager

이 플러그인은 안드로이드 스튜디오의 리소스 파일에서 컬러 색을 좀 더 잘 보여주는 도구이다.

플러그인 주소 : https://plugins.jetbrains.com/plugin/8583-android-color-manager
프로젝트 주소 : https://github.com/shiraji/color-manager

6.1 설치방법
File > Settings… > IDE Settings > Plugins > Browse repositories 에서 color mana를 검색해서 설치한다.

6.2 사용방법
안드로이드 프로젝트 리소스 폴더에 있는 colors.xml을 열고, 우측의 탭에서 “Color Manager”를 선택하면 아래의 화면을 볼 수 있다. 이 플러그인이 머터리얼 컬러의 종류와 색을 화면에 다 보여주기 때문에, 색을 확인하기 위해서 구글 머터리얼 사이트에 접속하지 않아도 된다.

7. Android API Level Plugin

이 플러그인은 안드로이드 API 레벨과 버전 이름을 보여주는 도구이다. 여기에서 살펴본 플러그인들 중에 가장 간단하지만 아주 유용하게 사용될 수 있다.

플러그인 주소 : https://plugins.jetbrains.com/plugin/8121-android-api-level
프로젝트 주소 : https://github.com/droibit/androidapilevel-plugin

7.1 설치방법
File > Settings… > IDE Settings > Plugins > Browse repositories 에서 “Android API Level”를 검색해서 설치한다.

7.2 사용방법
툴바에 안드로이드 아이콘이 한개 추가된 것을 알 수 있다. 아래와 같이 이 버튼을 클릭하면 안드로이드 API의 레벨과 버전등을 보여주는 화면을 아래와 같이 보게 된다.

이상 안드로이드 앱을 개발하면서 유용하게 사용하는 플러그인 몇 개를 살펴봤다. 이 플러그인을 사용해서 개발에 도움이 되었으면 좋겠다.