Kotlin Android Fundamentals: Material Design, dimens, and colors

Material Design

머터리얼 디자인의 경우 구글에서 만든 클로스 플랫폼 디자인 시스템이다. 머터리얼 디자인은 구체적인 명세서를 앱 유저의 인터페이스에 제공한다. 어떻게 텍스트는 보여즌지 어떻게 스크린의 레이아웃이 존재하는지 등등... 

 

material.io/

Material Design

위의 사이트에서 머터리얼 디자인의 정보를 확인할 수 있다. 

 

머터리얼 디자인을 사용하기 위해서는 build.gradle(Module: app) 에 아래와 같은 implementation을 작성해야한다. 

implementation 'com.google.android.material:material:1.2.0'

 

매터리얼 디자을 최대한 사용하려면 테마속성을 사용해야한다. 테마 속성은 앱의 기본 색상과 같은 다양한 유형의 스타일 정보를 가리키는 변수입니다. 설정된 값을 사용하여 일관된 디자인이 적용되므로 브랜딩과 디자인을 유지할 수 있다. 

 

style에 material Design에서 미리 정해놓은 것을 사용할 수 있다. 

<TextView
       android:id="@+id/title"
       style="?attr/textAppearanceHeadline5"

?attr은 지정자를 사용하는 속성 값은 현재 테마에 지정된 값을 사용하라는 의미이다.  

 

TextAppearance의 경우에는 Theme밑에 위치하고있다. TextAppearance의 경우에는 어떤 뷰이든 텍스트 스타일링을 적용할 수 있다. 

 

또한 머터리얼 디자인안에 머터리얼 디자인을 넣어서 사용할 수 있다. 

 

ThemeOverlay

구체적인 뷰 특히 툴바와 같은 것들을 위해 테마를 오버라이딩하기도 한다. 앱의 소구분 변화하길 원할 때 유용했다. 뷰안에 특성들을 설정할 때 ?attr/valuename과 같이 사용한다. 

<androidx.appcompat.widget.Toolbar
    android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar"

 

Use dimensions

치수를 사용하면 앱에 재사용 가능한 치수를 지정할 수 있다. dp를 사용하여 margin, heights, padding 등을 지정하고 sp를 사용하여 글꼴 크기를 지정합니다. 

 

디멘션 만들어보기

<androidx.constraintlayout.widget.Guideline
       android:id="@+id/end_grid"
       app:layout_constraintGuide_end="@dimen/spacing_normal"

여기서 dimen은 resources파일에 만들어주면 됩니당. 

<?xml version="1.0" encoding="utf-8"?>

<resources>
    <dimen name="activity_vertical_margin">16dp</dimen>
</resources>

 

Color

색 자원들과 material 테마를 사용함으로써 앱에 일관성있는 색들을 적용할 수 있습니다. 색의 효율적인 사용은 앱의 사용성을 향상시킬 수 있다. 

 

필요한 색의 조합은 이 사이트에서 만들 수 있습니다. 

 https://material.io/tools/color/

Color Tool - Material Design

colorOnPrimary: 주된 색상의 위에 그려질 때 텍스트 및 아이콘에 접근성 가이드라인에 접근할 때의 통과하는 색입니다.

colorOnSecondary: 보조 색상 위에 그릴 때 텍스트 및 아이콘에 대한 접근성 가이드라인에 접근할 때 통과하는 색입니다.