New Components in Design Support Library v28

Material Design을 도와주기 위해 제공 되었던 Android Disign Support Libray가 v28이 공개 되었습니다.

현재는 alpha3 버전으로 사용할 수 있습니다.

v28 에서 어떤 컴포넌트가 추가 되었고 어떻게 사용 되는지 알아 보겠습니다.

현 시점 최신 버전인 alpha3 버전으로 작성합니다. 업데이트 되면서 api들이 바뀌는 부분이 보이고 있습니다. 

준비 과정

1. App 레벨의 build.gradle 에 정의

implementation 'com.android.support:design:28.0.0-alpha3'

2. Material Style 정의 

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">

이제 준비 되었으니 각각의 컴퍼넌트를 추가하면서 살펴 보겠습니다.

Material Button

•  Icon 이미지를 텍스트와 함께 넣고 위치조절이 가능 합니다.
•  Ripple, Tint 컬러 설정 가능합니다.
•  Stroke, Corner 를 지원 하면서 xml로 shape 만들어 쓰던걸 편하게 쓸수 있게 되었습니다.

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="BUTTON"

    app:icon="@drawable/ic_android_black_24dp"
    app:iconTint="@color/colorAccent"
    app:iconPadding="20dp"
    app:additionalPaddingStartForIcon="20dp"
    app:additionalPaddingEndForIcon="20dp"

    app:backgroundTint="@color/colorPrimaryDark"
    app:backgroundTintMode="src_in"

    app:rippleColor="#FF0000"

    app:strokeColor="@color/colorAccent"
    app:strokeWidth="2dp"

    app:cornerRadius="10dp"
    />

Material CardView

• Stroke 로 아웃라인과 넓이를 지정할 수 있습니다.

<android.support.design.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:strokeColor="#FF0000"
    app:strokeWidth="2dp"
    android:layout_margin="30dp">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="MaterialCardView11111" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="MaterialCardView22222"
            android:layout_marginTop="5dp" />
    </LinearLayout>
</android.support.design.card.MaterialCardView>

Chip

•  새롭게 Chip이라는 컴퍼넌트가 등장 했습니다. 
•  Text를 가지면 버튼과 비슷하게 동작합니다.
•  android:checkable="true" 지정하면 클릭 시 체크 박스가 나타났다 사라졌다 합니다.
• alpha1 에서는 app:chipText 로 텍스트 지정했는데 alpha3 에서는 사용할 수 없어서 android:text 로 지정하니 정상적으로 텍스트 출력 되었습니다.

<android.support.design.chip.Chip
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello"/>

Chip Group

• Chip을 묶어서 보여 줍니다.
• Chip의 크기에 따라 자동으로 레이아웃이 지정됩니다.
• app:singleSelection을  지정하면 그룹내에 하나의 Chip만 체크박스 표시되고, 이전 체크된 Chip은 자동으로 해제 해 줍니다.
• app:checkdChip 으로 Chip 체크를 초기화 할 수 있습니다.

<android.support.design.chip.ChipGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:chipSpacingHorizontal="10dp"
    app:chipSpacingVertical="5dp"
    app:checkedChip="@id/chip_android"
    app:singleSelection="true"
    android:layout_marginTop="30dp">

    <android.support.design.chip.Chip
        android:id="@+id/chip_android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android"
        android:checkable="true"        />

    <android.support.design.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Java"
        android:checkable="true"
        />
    <android.support.design.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Kotlin"
        android:checkable="true" />
    <android.support.design.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="IOS"
        android:checkable="true" />
</android.support.design.chip.ChipGroup>

Bottom App Bar

• 구글에서 분석한 UX 에선 상단 앱바에 문제가 있었는지...하단 앱바가 등장 했습니다.
• CoordinatorLayout과 함께 사용해야 합니다.
• AppBar와 FloatingActionButton 이 자연스럽게 위치 할 수 있습니다.
• fabAlignmentMode 로 FloatingActionButton을 중앙과 끝에 위치를 지정할 수 있습니다.

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:fabSize="normal"
        app:layout_anchor="@id/bottom_app_bar"/>

    <android.support.design.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabAttached="true"
        app:fabAlignmentMode="end"
        app:backgroundTint="@color/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</android.support.design.widget.CoordinatorLayout>

새롭게 추가된 컴퍼넌트를 봤습니다. 아직 Alpha 버전인 만큼 정식버전에서는 어떻게 변경 될지는 모르겠지만 

개발자가 레이아웃을 이뿌고 편하게 만들 수 있도록 발전 하는 모습이 보이네요

Design Support Library 를 사용해서 이쁜 앱을 만들어 봅시다!!!

참조 사이트 

Material Design 사이트 https://material.io/develop/

테스트 샘플코드 https://github.com/ykyahwa/SampleProject/tree/master/SupportDesignV28

Java Codelab https://codelabs.developers.google.com/codelabs/mdc-101-java/#0

Kotlin Codelab https://codelabs.developers.google.com/codelabs/mdc-101-kotlin/#0