머티리얼 디자인 적용 방법이랄것도 없지만 매우 간단합니다.

우선

1. Compile Sdk Vrersion을 롤리팝 이상으로 맞춰줍니다.

2. Build Tools Version을 20이상으로 맞춰 줍니다.

3. com.android.suppot:appcompat-v7을 최신버전으로 해놓습니다.

 

 

4. 그리고 Style.xml에 다음과 같이 적어줍니다.

 <resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
    </style>

</resources>

 

이 간단한 과정으로 머티리얼 디자인이 적용이 되었습니다.

정말 이게 끝입니다.

하지만 테스트 하실때 디바이스의 소프트웨어 버전이 롤리팝 이상 버전이어야지 머티리얼디자인이
적용되신걸 볼 수 있습니다.

롤리팝 이전버전에서 머티리얼 디자인을 적용하기위해서는 라이브러리가 필요합니다.

그부분에 관해서는 다음 포스팅이나 기회가 될때 포스팅 하도록 하겠습니다.

감사합니다.

 

728x90
반응형

2014년 롤리팝이 나오면서 같이 나온 머티리얼 디자인에대해서 

머티리얼 디자인은 구글용 웹사이트나 앱에 적용할 통일화된 디자인으로 레이아웃, 스타일, 애니메이션, 등 웹 디자인에 필요한 모든 요소에 대해 정의를 하고 이에 따를 것을 요구하고 있습니다. 

우선영어로 써있는것을 번역하였는데 맞는 건지는 모르겠습니다,


머티리얼은 3D world이다.


머티리얼 환경은 모든 개체가 x, y 및 z 치수가 3 차원 공간을 의미한다.Z 축은 수직 양의 Z 축 뷰어를 향해 연장하여, 디스플레이의 평면에 정렬된다. 모든 재료의 시트는 Z 축을 따라 하나의 위치를 점유하고 표준 1DP 두께를 갖는다.

빛과 그림자.

머티리얼환경에서 가상 라이트는 네모난 종이를 비춥니 다. 주위의 빛이 모든 각도에서 부드러운 그림자를 만들면서 키 라이트는 방향성의 그림자를 만듭니다.

머티리얼환경에서의 그림자는이 두 광원에 의해 주조됩니다. 응용 프로그램 개발에서 그림자는 광원이 z 축을 따라 다양한 위치에 자재의 시트에 의해 차단되었을 때 발생합니다. 웹상에서 그림자는 y 축을 조작하여 표시하고 있습니다. 다음 예제에서는 6dp 높이의 카드를 보여줍니다.


물리적 특성.

1. 머티리얼은 X 및 Y 치수 (DP 측정) 및 균일한 두께 (1DP)을 변화하고있다.


2. 머티리얼은 그림자를 캐스팅 합니다.

그림자는 머티리얼 요소 사이의 상대적인 높이 (Z-위치)에서 자연적으로 발생.
그림자는 머티리얼 요소 사이의 상대적인 높이를 묘사.


http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsSmZ5VlNBRHBXNXM/inline%20whatismaterial-materialprop-physicalprop-PaperShadow_01_xhdpi_008.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.)

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


3. 머티리얼 콘텐츠는 어떤 모양이든 색상이든 표시된다.
   하지만 두꼐는 표현하지 않는다.

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsUGtDSTgtekFORGs/whatismaterial-materialprop-physicalprop-InkDisplay_xhdpi_006.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.)

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


4. 머티리얼의 컨텐츠는 머티리얼안에서는 독립적인 동작을 할수있지만
   머티리얼 범위 내로 국한된다.

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsT2ZXakpkaGp4bzQ/whatismaterial-materialprop-physicalprop-InkBehavior_xhdpi_006.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.) 

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties



5. 머티리얼은 입체(고체?)이다.

do
입력이벤트는 오직 foreground 머티리얼에만 영향을 미칩니다. 


http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


6. 여러개의 머티리얼 요소는 공간에서 동시에 동일한 점을 점유 할 수 없습니다.

대신에 머티리얼 요소를 분리하기 위한 하나의 방법은 고도를 사용하여 동시에 동일한점의 점유를 방지합니다.


http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties



7. 머티리얼은 다른 물질을 통과 할 수 없습니다.

고도를 변경하는 경우, 예를 들어, 하나의 마티리얼의 시트는 또 다른 머티리얼 시트를 통과 할 수 없습니다.

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsc2VZVUJ5bFNscFU/whatismaterial_properties_physical_07_xhdpi_009.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.) 

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


머티리얼 변형.

1. 머티리얼은 모양을 변경할 수 있습니다.

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsMndnRld3dl9nVU0/whatismaterial-materialprop-transformingmaterial-PaperShape_xhdpi_005.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.) 

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


2. 머티리얼은 평면을 따라서 증대되거나 축소됩니다.

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsLVpqQ0pBOXY3WDQ/whatismaterial-materialprop-transformingmaterial-PaperShapeLinear_xhdpi_005.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.) 

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


3. 머티리얼은 굴절하거나 접히지않는다.


4. 머티리얼의 여러개의 시트는 또다른 하나의 머티리얼의 시트와 합칠 수 있습니다.
5. 머티리얼의 시트가 분할할때 머티리얼의 시트는 다시 합쳐질수 있습니다.


※머티리얼의 이동(운동)

1. 머티리얼은 자발적을 생성 또는 그밖에 환경으로 소멸 될 수 잇다.

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsTUF0YzJrX0xfWmc/whatismaterial-materialprop-movementmaterial-PaperPointExpand_xhdpi_005.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.) 

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


2. 머티리얼은 축 방향으로 이동할 수 있습니다.

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsYXIyWl9fZURydTA/whatismaterial-materialprop-movementmaterial-PaperMove_xhdpi_008.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.) 

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


3. Z 축 방향 운동은 전형적으로 머티리얼과 사용자의 상호 작용의 결과이다.

http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsQW1HYnpicTVySG8/whatismaterial-materialprop-movementmaterial-Material_Response_xhdpi_003.mp4

위에 URL은 안될수도 있습니다.
밑에 URL에서 해당그림의 동영상 참고

(무조건 봐야지 위에 써놓은 글이 이해갑니다.) 

http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-physical-properties


원래는 동영상이 있어야지 저 글귀들이 이해가 아주 잘가는데 설마 있겠나싶지만 저작권이 혹시 있을지도 몰라서...
아무튼 직접 해당 페이지에 들어가셔서 보시면 잘이해되실겁니다.

이글의 원본은
http://www.google.com/design/spec/what-is-material/material-properties.html#material-properties-movement-of-material
이곳에 있습니다.


728x90
반응형

+ Recent posts