개시하다

나는 책갈피의 종류를 교환해서 빠르게 전환할 수 있는 프로그램을 만들어 보았다.
최대한 머티리얼 디자인 에센스를 적용했기 때문에 주의할 점을 소개해드릴게요.나는 현재의 응용 프로그램에도 가져올 수 있는 내용이 있다고 생각한다. 참고할 수 있다면 매우 좋겠다.
(추기)'계층'에 대한 개념, 설치 원가가 높은 제품은 실장 대상이 아니다.
(다시 쓰기) 탭 표시줄과 맨 윗부분 표시줄 아래로 스크롤해서 그림자를 표시합니다.
앱은 이런 느낌이에요.당신의 지적과 요구가 있다면 저에게 메시지를 남겨 주시면 매우 기쁠 것입니다.
https://play.google.com/store/apps/details?id=com.appspot.parisienneapps.hatebureader

레이아웃, 구성 요소

업로드

배치

ActionBar 시대의 48dp에서 56dp로 변경됩니다.크롬과 Google + 의 앱을 가져왔습니다. 아직 익숙하지 않아서 그런지 큰 인상을 주었습니다.내용의 표시 영역이 작아졌기 때문에 이번 응용 프로그램은 이전의 48dp이다.
햄버거 (메뉴) 아이콘은 왼쪽에서 16dp이고, 제목은 72dp 설정을 확보합니다.오른쪽 아이콘은 오른쪽 끝에서 16dp를 확인합니다.
현재 앱으로 재현하면 시간이 좀 걸리고 잘못하면 아쉬운 내비게이션 막대가 될 수 있어 무리하게 가져올 필요는 없다.

측면 탐색

배치

위쪽 이미지의 가로 세로 비율은 16:9입니다.목록 항목의 높이는 48dp입니다.목록에 격자가 없기 때문에, 목록 상하에 8dp의 공간을 남겨 배치를 균형 있게 합니다.또한 사이드 내비게이션이 위쪽 표시줄에 표시됩니다.
나는 사이드 네비게이션의 디자인이 종종 게으름을 피우기 쉽다고 생각하지만, 방침에 따라 배치하면 그에 상응하여 나타날 수 있다고 생각한다.Google IO 애플리케이션의 측면 탐색은 좋은 느낌입니다.

탭

프로그램 라이브러리

이번 탭은 페이지 슬라이딩 탭이라는 프로그램 라이브러리를 사용했습니다.
https://github.com/astuetz/PagerSlidingTabStrip
Android Developers의 샘플에도 슬라이딩 Tabs Basic, 슬라이딩 Tabs Colors가 있는데 이것도 참고할 수 있을 것 같습니다.
http://developer.android.com/samples/ui.html

배치

문자 사이즈는 14sp이고 View의 높이는 48dp이며 인디애나의 높이는 2dp이다.또한 두루마리라면 왼쪽에서 72dp의 커미션을 받지만 여기는 가져오지 않았습니다.

배색

배경은 기본적으로 업로드 표시줄과 정렬해야 한다.비활성 레이블의 문자 투명도는 60%입니다.업로드 게이지와 라벨의 색깔에 적응하지 못하기 때문에 이번 라벨의 색깔은 흰색입니다.

종이공예

Steps are created when two sheets of paper with different z-order positions overlap and thus typically move independently of each other.
상기 내용에 대해 스크롤 페이지에서 invisible의 음영용view로 설정할 때visible의 대응을 추가합니다.뒤에 있는 버튼에도 음영이 들어가 이미지를 사용했고 섀도우가 위아래로 비대칭적이며 회전하는 애니메이션이 약간 변형되었다.

리스트

이미지 참조 소스
http://www.google.com/design/spec/components/cards.html#cards-usage

배치

배치는 내부 내용에 근거하여 상세하게 규정한 것이다.자세한 내용은 위 링크를 확인하십시오.
공간이 전혀 없는 앱을 자주 볼 수 있지만 잘 확보하면 더 예쁘고 보기 쉬우므로 강한 의도가 없다면 가이드라인에 따라 공간을 확보하는 것이 좋다.
목록과 카드 보기의 구분에 대한 설명은 다음과 같습니다. 참고만 하십시오.
Do
A quickly scannable list, instead of cards, is an appropriate way to represent homogeneous content that doesn't have many actions.
Don't
The use of cards here distracts the user from being able to quickly scan. These list items are also not dismissable, so having them on separate cards is confusing.

대화 상자

배치

지도 방침에 따라 포석을 만들 뿐 시간이 많이 걸리지 않기 때문에 현행 앱도 도입할 수 있을 것 같다.확대/축소 가능 영역이 있는 경우 버튼 영역에 격자선이 필요합니다.

텍스트 입력 영역

EditText에 대한 밑줄은 백그라운드를 지정하여 설계를 수정할 수 있습니다.

누름단추

배치

원형 버튼의 크기는 위 이미지와 같습니다.

애니메이션

버튼을 누르면 버튼이 돌아가 메뉴 버튼이 아래에서 튀어나온 애니메이션을 넣는다.
Animation을 XML로 정의하고 AnimationUtils#loadAnimation으로 애니메이션을 로드하고 View#startAnimation으로 애니메이션을 시작합니다.애니메이션을 별로 해 본 적은 없지만 생각보다 간단하게 만들었다.
이쪽 기사를 참고하게 해 주세요.
http://qiita.com/kazy1991@github/items/0ef55e1d750a49a9192f

진도

프로그램 라이브러리

Material Design 페이지에 설명된 것과 동일한 것은 도서관입니다.사용 방법도 간단해 1분이면 가져올 수 있다.
https://github.com/castorflex/SmoothProgressBar
dependencies 추가
build.gradle

dependencies {
    'com.github.castorflex.smoothprogressbar:library-circular:+'
}

이것 괜찮아요?
fragment_main.xml

<ProgressBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center" />

그냥 이렇게 하는 거야.
fragment_main.xml

<fr.castorflex.android.circularprogressbar.CircularProgressBar
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="44dp"
    android:layout_height="44dp"
    android:layout_gravity="center"
    android:indeterminate="true"
    app:cpb_color="#cccccc"
    app:cpb_rotation_speed="1.0"
    app:cpb_sweep_speed="1.0"
    app:cpb_stroke_width="4dp"
    app:cpb_min_sweep_angle="10"
    app:cpb_max_sweep_angle="300" />

스타일

색상

Material Design을 사용한 첫 페이지도 사용된 Cyan.기업 색상이 아직 결정되지 않았다면 이 팔레트에서 색상을 고르면 지금의 색상이 될 것 같아요.

그래프

문자의 크기와 대비도에 관하여 상당히 상세하게 소개하였다.하지만 한자와 자모의 크기와 라인 하이트(Line Height)가 다르다고 생각해 이 부분에서는 유연하게 대응하는 게 좋다.
참고로 Google IO 애플리케이션은 다음과 같이 흰색 및 검은색 문자의 투명도를 지정합니다.
https://github.com/google/iosched/blob/master/android/src/main/res/values/colors.xml
color.xml

<color name="body_text_1">#de000000</color>
<color name="body_text_2">#8a000000</color>
<color name="body_text_3">#60000000</color>
<color name="body_text_disabled">#44000000</color>

<color name="body_text_1_inverse">#deffffff</color>
<color name="body_text_2_inverse">#8affffff</color>

아이콘

이전 기사에서 사용법을 소개했으니 참고하면 좋겠네요.
http://qiita.com/suzukihr/items/2011d5f24b8d48d54585