[Android] Material Design 개략적으로 알아보기~

Implementing Material Design in Your Android App

http://android-developers.blogspot.kr/2014/10/implementing-material-design-in-your.html

Material Design 은 Android 5.0 ( Lollipop, LOS ) 부터 등장한 안드로이드의 디자인이다.

전반적인 Animation 에 대한 가이드는 아래 링크를 참조하면 좋다.

https://material.io/guidelines/motion/material-motion.html

Tangible Surfaces

* Shadow

아래와 같이 xml 에서 elevation 을 주면, z axis 로 이동한 효과를 내며, system 에서 dynamic 하게 shadow 를 만들어준다.

<ImageView 

...

android:elevation="8dp" />

코드상으로도 getElevation, setElevation 을 통해 값을 get/set 할 수 있다.

Shadow 는 해당 view 의 background 의 outline 을 기준으로 그려진다.
예를 들어 view 의 background 를 alpha 가 있는 원형 버튼으로 하면 원형 shadow 가 생성된다.

Shadow 를 직접 조금 더 control 하고 싶다면, ViewOutlineProvider 를 이용하여 getOutline() 으로 얻어지는 Outline 을 customize 하면 된다.



* Cards

CardView 는 FrameLayout 을 상속한 녀석으로 기본 elevation 과 corner radius 가 설정되어 있다.
cardElevation 과 cardCornerRadius attribute 를 이용해 이 값들을 조정할 수 있다.

<android.support.v7.widget.CardView

android:layout_width="match_parent"

android:layout_height="wrap_content">

<!-- Card Contents -->

</android.support.v7.widget.CardView>

Print-like Design

* Typography

android:fontFamily="sans-serif-medium" 이 추가되었다.

TextAppearance style 로는 typographic scale 이 추천된다.
ex) android:textAppearance="@android:style/TextAppearance.Material.Title"



* Color

color palette 는 앱의 theme 을 정하는 데 도움을 준다.

출처 : http://4.bp.blogspot.com

colorPrimary : 앱의 primary branding color
colorAccent : primary branding color 를 도와주는 색상 EditText, Switch 등에 사용된다. ( focus 색상으로 인식하면 도움이 될듯 )
colorPrimaryDark : primary branding color 를 도와주는 어두운 색상으로 status bar 등에 사용된다.
그 외 : colorControlNormal, colorControlActivated, colorControlHighlight, colorButtonNormal, colorSwitchThumbNormal, colorEdgeEffect, statusBarColor, navigationBarColor


AppCompat 이 이 설정들을 도와준다.



* Dynamic Color

palette support library 는 image 로부터 main color subset 을 추출해준다.

Palette.generateAsync( bitmap, new Palette.PaletteAsyncListener(){

@Override

public void onGenerated(Palette palette){

Palette.Swatch swatch = palette.getVibrantSwatch();

if ( swatch != null ){

// do sth with... swatch.getRgb();

// do sth with... swatch.getTitleTextColor();

}

}

});

Authentic Motion

* Activity + Fragment Transitions

transtionName 을 설정하여 쉽게 transition 효과를 줄 수 있다.

<!-- xml of starting fragment -->

<ImageView

...

android:transitionName="@string/transition_album_cover"/>

<!-- xml of ending fragment -->

<ImageView

...

android:transitionName="@string/transition_album_cover"/>

// code

Intent intent = new Intent();

String transitionName = getString( R.string.transition_album_cover );

ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation( activity, animationStartingImageView, transitionName );

ActivityCompat.startActivity(activity, intent, options.toBundle() );

* Ripples

Material 은 surface reaction 으로 ink 가 퍼지는 효과를 준다.
이것은 Theme.Material 을 style 로 지정하면 button 에 자동으로 나타난다.

ripple element 를 지정해주어 custom ripple 을 만들 수 있다. ( drawable 로 지정 )

<ripple

xmlns:android="http://schemas.android.apk/res/android"

android:color="@clor/accent_dark">

<item>

<shape android:shape="oval">

<solid android:color="?android:colorAccent" />

</shape>

</item>

</ripple>

Custom view 는 View#drawableHotspotChanged callback 이 불렸을 때 ripple 을 시작하면 된다.



* StateListAnimator

Material 은 raising up event 에도 feedback 을 줄 수 있다. ( 마치 자석처럼 )
이것은 translationZ attribute 를 animating 함으로 할 수 있다.

Z = elevation + translationZ.

새로운 stateListAnimator 는 touch 에 따라 translationZ 를 animate 할 수 있게 도와준다.

<!-- layout/your_layout.xml -->

<ImageButton 

…

android:stateListAnimator="@anim/raise" />

<!-- anim/raise.xml -->

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_enabled="true" android:state_pressed="true">

<objectAnimator

android:duration="@android:integer/config_shortAnimTime"

android:propertyName="translationZ"

android:valueTo="@dimen/touch_raise"

android:valueType="floatType" />

</item>

<item>

<objectAnimator

android:duration="@android:integer/config_shortAnimTime"

android:propertyName="translationZ"

android:valueTo="0dp"

android:valueType="floatType" />

</item>

</selector>

* Reveal

새로운 내용을 보여줄 때 확장하는 원형을 사용하는 것.
유저의 touch point 가 새로운 transition 의 시작점이 된다.

Animator reveal = ViewAnimationUtils.createCircularReveal(

viewToReveal, // The new View to reveal

centerX, // x co-ordinate to start the mask from

centerY, // y co-ordinate to start the mask from

startRadius, // radius of the starting mask

endRadius); // radius of the final mask

reveal.start();

* Interpolators

Entering screen 에는 linear_out_slow_in 이,
Exit 에는 fast-out-linear-in interpolator 가 좋다.

Adaptive Design

* Toolbar

ActionBar 와 비슷하지만 static 하지 않고 일반 view 처럼 사용 가능하다.

5.0, actionbar, activity, activitycompat, activityoptionscompat, adaptive design, ALPHA, Android, animation, appcompat, attribute, authentic motion, background, branding color, Card, cardcornerradius, cardelevation, Cards, cardview, COLOR, coloraccent, colorbuttonnormal, colorcontrolactivated, colorcontrolhighlight, colorcontrolnormal, coloredgeeffect, colorprimary, colorprimarydark, colorswitchthumbnormal, control, corner radius, createcircularreveal, custom ripple, customize, drawablehotspotchanged, Dynamic, dynamic color, Elevation, fast out linear in, feedback, focus, fragment, frameLayout, generateasync, getelevation, getoutline, getrgb, gettitletextcolor, getvibranyswatch, IMAGE, Implementing Material Design in Your Android App, ink, intent, interpolators, linear out slow in, lollipop, Los, main color subset, makescenetransitionanimation, material, Material Design, navigationbarcolor, objectanimator, ongenerated, outline, Palette, pallete support library, palletteasynclistener, print-like design, rasing up event, Reveal, Ripple, ripples, sans-serif-medium, selector, setelevation, Shadow, start, statelistanimator, statusbarcolor, surface reaction, Swatch, System, tangible surfaces, textappearance style, Theme, theme.material, Title, Toolbar, Touch Point, transition, transitionname, translationz, typographic scale, typography, View, viewanimationutils, viewoutlineprovider, xml, z axis, [Android] Material Design, [Android] Material Design 개략적으로 알아보기~, 디자인 가이드, 메터리얼 디자인, 버전, 안드로이드, 자석