MaterialDesignの使用および開発ガイド

66345 ワード
Android開発
序文
Material Design、中国語名:材料設計言語は、Googleが発表した新しい設計言語で、グーグルは、携帯電話、タブレット、デスクトップ、その他のプラットフォームにより一貫性があり、より広範な「外観と感覚」を提供することを目的としていると述べた.
参考:Material Design中国語ネットhttp://design.1sters.com/
Google開発者プラットフォームhttps://developer.android.google.cn/design/index.html
使用開始
1.インベントリファイル
注意themeの設定
".application.MyApplication"
        android:allowBackup="true"
        android:icon="@drawable/logo"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/Theme.AppCompat.Light.NoActionBar">

2.Gradle構成
(1)appcompat 
compile 'com.android.support:appcompat-v7:25.1.0'

(2)design 
compile 'com.android.support:support-v4:25.1.0'

3.ネーミングスペース
Material Designコントロールを使用するレイアウトファイルの名前空間を指定します.
xmlns:app="http://schemas.android.com/apk/res-auto"

フロートボタンFloatButton
.support.design.widget.FloatingActionButton
   android:id="@+id/fab"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentRight="true"
   android:layout_marginRight="15dp"
   android:layout_marginTop="180dp"
   android:elevation="1dp"
   android:onClick="playVideo"
   android:src="@mipmap/bofang_float"
   app:backgroundTint="@color/lable_blue"
   app:borderWidth="0dp"
   app:rippleColor="@color/mediumseagreen"/>

1.説明android:elevation="1dp"シャドウapp:backgroundTint="@color/lable_blue"背景色app:rippleColor="@color/mediumseagreen"クリック時の色app:borderWidth="0dp"エッジ幅設定
2.アンドロイド5.xに存在するいくつかの問題は5.xのデバイス上で実行すると、いくつかの問題が発見されます(テストシステム5.0):(1)シャドウがないapp:borderWidth="0dp"を設定したことを覚えています(2)上記の設定を押すと、シャドウが現れますが、矩形の境界(marginが設定されていない場合、わかります)がmarginの値を設定する必要があります.5.0より前に、既定では外側の距離があります(ただし、marginではありませんが、効果は同じです).解決策:属性app:borderWidth="0dp"を5に追加する.x合理的なmarginを設定する
3.その他のapp:fabSizeスタイルは、通常と小さい2種類のnormal、miniの2つの選択android:srcボタンの中間のピクチャapp:elevationアイドル状態でのシャドウ深さデフォルトは6 dp app:pressedTranslationZ押下状態でのシャドウ深さデフォルトは12 dp app:backgroundTintボタン色-その他のクリックイベントなどButtonと変わらない.
紙切れChips
MaterialDesign使用及开发指南_第1张图片
この意味はPopupMenuコントロールを指すことが多い
1.valuesでのmenuファイルの作成
PopupMenuコントロールを使用してメニューにitemプロパティを指定するには
2.Menu属性解析
showAsActionプロパティには、ifRoom、never、always、withText、collapseActionViewの5つの値があり、混在可能(|記号で区切られた)ifRoomはItemに表示されますが、すでに4つ以上のItemがある場合はオーバーフローリストに表示されません.もちろん個数は4個に限らず、画面の幅によって決まる.neverは表示されません.オーバーフローリストにのみ表示され、タイトルのみ表示されるので、itemを定義するときは、タイトルをすべて持参したほうがいいです.alwaysオーバーフローの有無にかかわらず、常に表示されます.withTextは、Actionbarがテキストタイトルを表示することを示す.Actionbarはできるだけこのタイトルを表示しますが、アイコンが有効でActionbar空間に制限されている場合、テキストタイトルが不完全に表示される可能性があります.collapseActionViewは、ユーザがこのボタンを選択すると、この操作ウィンドウが展開されるボタンに折り畳まれるべきであることを宣言する.そうでなければ、この操作ウィンドウはデフォルトで表示され、適用されない場合でも、操作バーの有効なスペースを占めます.一般的にifRoomと一緒に使うと効果があります.
サンプルコード
"http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools" >
   <item
       android:id="@+id/action_comment"
       android:orderInCategory="100"
       android:title="  "
       app:showAsAction="never"/>
   <item
       android:id="@+id/action_contact"
       android:orderInCategory="100"
       android:title="  "
       app:showAsAction="never"/>
   <item
       android:id="@+id/action_collect"
       android:orderInCategory="100"
       android:title="  "
       app:showAsAction="never"/>
   <item
       android:id="@+id/action_orderlesson"
       android:orderInCategory="100"
       android:title="  "
        app:showAsAction="never"/>

3.クリックイベント
/**
 *     chips
*@param view
 */
private void showPopupMenu(View view) {
    //View  PopupMenu     View   
   PopupMenu popupMenu = new PopupMenu(this, view);

   //menu  
                popupMenu.getMenuInflater().inflate(R.menu.detailtch_popmenu,popupMenu.getMenu());

     //    menuItem  
    if (xxx){
        //getItem()   = menu item -1
        popupMenu.getMenu().getItem(2).setTitle("    ");
    }

    //menuiItem    
   popupMenu.setOnMenuItemClickListener(newPopupMenu.OnMenuItemClickListener() {
       @Override
       public boolean onMenuItemClick(MenuItem item) {
           if (item.getItemId() == R.id.action_comment) {
                    //     
           }
           if (item.getItemId() == R.id.action_contact) {
                    //     
           }
           if (item.getItemId() == R.id.action_collect) {
                   //     
           }
           if (item.getItemId() == R.id.action_orderlesson) {
                   //     
           }
           return false;
       }
    });

    //PopupMenu    
   popupMenu.setOnDismissListener(new PopupMenu.OnDismissListener() {
       @Override
       public void onDismiss(PopupMenu menu) {

       }
});

//        ,     
try {
             ...
} catch (…) {
             …
}

         //PopupMenu  
    popupMenu.show();
}

4.PopMeun表示Icon
反射原理を使用して、メニューアイコンを強制的に表示
try {
   Field field = popupMenu.getClass().getDeclaredField("mPopup");
   field.setAccessible(true);
   MenuPopupHelper mHelper = (MenuPopupHelper) field.get(popupMenu);
   mHelper.setForceShowIcon(true);
} catch (IllegalAccessException |NoSuchFieldException e) {
   e.printStackTrace();
}

ツールバーツールバーツールバー
1.レイアウトファイル
略、直接レイアウトにtoolbar空間を宣言すればよい.
2.メニュー項目レイアウト
Menu_toolbar.xml 

<menu
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto">

   <item
       android:id="@+id/action_search"
       android:icon="@mipmap/ic_search_white_24dp"
       android:title="  "
        app:showAsAction="ifRoom" />

   <item
       android:id="@+id/action_setting"
       android:icon="@mipmap/ic_more_vert_white_24dp"
       android:title="  "
       app:showAsAction="ifRoom" />
menu>

3.クリックイベント
/**
 *    toolbar
 */
private void initToolBar() {
         finalToolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
         //       ,   
         toolbar.setNavigationIcon(R.mipmap.ic_menu_white_24dp);      
         toolbar.setTitle("    ");
         toolbar.setTitleTextColor(Color.WHITE);

         //     
         toolbar.inflateMenu(R.menu.menu_toolbar);

         //  menu    item 
         MenuItemitem = toolbar.getMenu().getItem(0);

         //       ,    
         toolbar.setNavigationOnClickListener(newView.OnClickListener() {
                   @Override
                   publicvoid onClick(View v) {
                            drawer.openDrawer(Gravity.LEFT);
                   }
         });

         //  item  
         toolbar.setOnMenuItemClickListener(newToolbar.OnMenuItemClickListener() {
                   @Override
                   publicboolean onMenuItemClick(MenuItem item) {
                            intmenuItemId = item.getItemId();
                            if(menuItemId == R.id.action_search) {
                                     //     
                            }

                            if(menuItemId == R.id.action_setting) {
                                    //     
                                     showPopupMenu(toolbar);                       
                            }
                            return true;
                   }
         });
}

引き出しDrawer
DrawerLayout+NavigationView+ToolBarの配合はより効果的である.
1.レイアウトの作成
DrawerLayoutでNavigationViewをネストし、NavigationViewレイアウトはヘッダとメニュー項目からなる
(1)全体レイアウト

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:toolbar="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   
   <android.support.v4.widget.DrawerLayout
       android:id="@+id/drawer"
       android:layout_width="match_parent"
       android:layout_height="match_parent">

       
       <RelativeLayout
           android:layout_width="match_parent"
           android:layout_height="match_parent">
           <FrameLayout
               android:id="@+id/fl_toolbar_container"
                android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:background="@color/blue_indicater">

               <android.support.v7.widget.Toolbar
                   android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:background="@color/blue_indicater"
                   android:elevation="0dp">android.support.v7.widget.Toolbar>
           FrameLayout>

           
           <FrameLayout
               android:id="@+id/fl_forFragment"
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:layout_above="@id/inc_bottom_main"
               android:layout_below="@id/fl_toolbar_container">FrameLayout>
       RelativeLayout>

       
       <include
           android:id="@+id/include_drawer"
            layout="@layout/drawer_user"
           android:layout_width="296dp"
           android:layout_height="match_parent"
           android:layout_gravity="start">include>

   android.support.v4.widget.DrawerLayout>
RelativeLayout>

(2)横滑りページレイアウト
draw_user.xml 

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="wrap_content"
   android:layout_height="match_parent"
   android:background="@color/pink"
   android:orientation="vertical">

   <android.support.design.widget.NavigationView
       android:id="@+id/navigation_view"
       android:layout_width="296dp"
       android:layout_height="match_parent"
       android:layout_gravity="start"
       app:headerLayout="@layout/navigation_drawer_header"
       app:menu="@menu/menu_navigation_drawer" />
LinearLayout>

属性説明app:headerLayout="@layout/navigation_drawer_header"ヘッダレイアウトapp:menu="@menu/menu_navigation_drawer"/>メニュー項目設定
(3)NavigationViewヘッダレイアウト
navigation_drawer_header.xml 

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="184dp"
   android:background="@mipmap/header"
   android:padding="@dimen/margin_all">

   <!—avatar-->
   < ImageViewxmlns:app="http://schemas.android.com/apk/res-auto"
       android:id="@+id/imgv_avatar_nav"
       android:layout_width="72dp"
       android:layout_height="72dp"
       android:layout_marginBottom="@dimen/divider_small"
       android:layout_marginTop="32dp"
        android:src="@drawable/avatar"
       />

   
   <TextView
        android:id="@+id/txv_username_nav"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentLeft="true"
       android:layout_below="@id/imgv_avatar_nav"
       android:layout_marginLeft="4dp"
       android:text="  "/>
RelativeLayout>

(4)NavigationViewメニュー項目設定
グループラベルでグループを設定できます.グループとグループの間に分割線menu_があります.navigation_drawer.xml 

<menu xmlns:android="http://schemas.android.com/apk/res/android">
   <group
       android:id="@+id/first_group"
       android:checkableBehavior="none">
       <item
           android:id="@+id/item_comment"
           android:icon="@mipmap/ic_chat_black_24dp"
           android:title="    " />

       <item
           android:id="@+id/item_collect"
           android:icon="@mipmap/ic_grade_black_24dp"
           android:title="    " />
   group>

   <group
       android:id="@+id/second_group"
       android:checkableBehavior="none">
       <item
           android:id="@+id/item_setting"
           android:icon="@mipmap/ic_settings_black_24dp"
           android:title="    " />
   group>

   <group
       android:id="@+id/third_group"
       android:checkableBehavior="none">
       <item
           android:id="@+id/item_function"
           android:title="    " />

      <item
           android:id="@+id/item_creater"
           android:title="    " />
   group>

menu>

2.NavigationViewクリックイベント
//NavigationView        
DrawerLayout drawer;
ImageView imgv_avatar_nav;
TextView txv_username_nav;

/**
 *      
 */
private void initDrawer() {
         drawer= (DrawerLayout) findViewById(R.id.drawer);

         //       
         NavigationViewnavigationView = (NavigationView) findViewById(R.id.include_drawer)
                            .findViewById(R.id.navigation_view);

         //    NavigationView     
         ViewheaderView = navigationView.getHeaderView(0);
         imgv_avatar_nav= (ImageView) headerView.findViewById(R.id.imgv_avatar_nav);
         txv_username_nav= (TextView) headerView.findViewById(R.id.txv_username_nav);

         if(usertype == 1) {//  
                   //       
                   //MenuItemmenuItem = navigationView.getMenu().findItem(R.id.item_teachlesson);
                   //menuItem.setVisible(false);
         }

         if(usertype == 2) {//  
                   //       
                   MenuItemmenuItem = navigationView.getMenu().findItem(R.id.item_collect);
                   menuItem.setVisible(false);

                   //       
                   //MenuItemmenuItem1 = navigationView.getMenu().findItem(R.id.item_orderlesson);
                   //menuItem1.setVisible(false);
         }

         //  NavigationView      
         imgv_avatar_nav.setOnClickListener(newView.OnClickListener() {
                   @Override
                   publicvoid onClick(View v) {
                            //Utils.showToast("    ");
                            //      
                            Intentintent = new Intent(getApplicationContext(), EditorActivity.class);
                            //     
                            startActivityForResult(intent,Constans_lekao.REQUEST_CHANGE_AVATAR);
                            drawer.closeDrawers();
                   }
         });

         //  NavigationView       
         navigationView.setNavigationItemSelectedListener(newNavigationView.OnNavigationItemSelectedListener() {
                   @Override
                   publicboolean onNavigationItemSelected(MenuItem item) {
                            //     item     
                            if(item.getItemId() == R.id.item_comment) {
                                     //     
                            }

                            if(item.getItemId() == R.id.item_collect) {
                                     //     
                            }

                            if(item.getItemId() == R.id.item_setting) {
                                     //     
                            }                         
                            …
                            return true;
                   }
         });
}

カードカードカード
1.依存の追加compile 'com.android.support:cardview-v7:25.1.0'
2.レイアウトファイル
RelativeLayoutなどと同様に使用し、必要なものをCardViewに置き換えればよい

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <android.support.v7.widget.CardView
       android:id="@+id/cardView"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_margin="10dp">

       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="100dp">

           <ImageView
               android:layout_width="150dp"
               android:layout_height="match_parent"
                android:layout_margin="5dp"
               android:scaleType="centerCrop"
               android:src="@drawable/sng" />

           <LinearLayout
               android:layout_width="match_parent"
               android:layout_height="match_parent"
                android:orientation="vertical">

                <TextView
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:padding="5dp"
                    android:text="    "
                    android:textSize="18sp"
                   android:textStyle="bold" />

                <TextView
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:padding="5dp"
                    android:text="    ，         " />
           LinearLayout>
       LinearLayout>
   android.support.v7.widget.CardView>
LinearLayout>

3.java 
private CardView cardView;
   @Override
    protected void onCreate(BundlesavedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       cardView = (CardView)findViewById(R.id.cardView);
       cardView.setRadius(8);//           
       cardView.setCardElevation(8);//        
       cardView.setContentPadding(5,5,5,5);//          
}

サードパーティ製ライブラリ
検索ボックスMaterialSearchView
1.依存の追加
dependencies {
   compile 'com.miguelcatalan:materialsearchview:1.4.0'
}

2.MaterialSearchViewをToolbarが存在するレイアウトに追加し、レイアウトの最後の

   <FrameLayout
       android:id="@+id/toolbar_container"
       android:layout_width="match_parent"
       android:layout_height="wrap_content">

       <android.support.v7.widget.Toolbar
           android:id="@+id/toolbar"
           android:layout_width="match_parent"
           android:layout_height="?attr/actionBarSize"
           android:background="@color/theme_primary" />

       <com.miguelcatalan.materialsearchview.MaterialSearchView
           android:id="@+id/search_view"
           android:layout_width="match_parent"
           android:layout_height="wrap_content" />
FrameLayout>

3.メニュー項目の追加
"@+id/action_search"
       android:icon="@drawable/ic_action_action_search"
       android:orderInCategory="100"
       android:title="@string/abc_search_hint"
       app:showAsAction="always" />

4.java 
//toolbar      
MaterialSearchView searchView;

//  menu     item
public void initToolbar(){
         …
MenuItem item =toolbar.getMenu().getItem(0);
searchView.setMenuItem(item);
searchView.setCursorDrawable(R.drawable.shape_searchview_cursor);
…
}

public void initEvent(){
//searchview    
searchView.setOnQueryTextListener(newMaterialSearchView.OnQueryTextListener() {
                  @Override
                  public boolean onQueryTextSubmit(Stringquery) {
                           if(!TextUtils.isEmpty(query)) {
                                     getSearchTeacher(query);
                           }
                           returnfalse;
                  }

                  @Override
                  public boolean onQueryTextChange(StringnewText) {

                           returnfalse;
                  }
});

//      
searchView.setOnSearchViewListener(newMaterialSearchView.SearchViewListener() {
                  @Override
                  public void onSearchViewShown() {

                  }

                  @Override
                  public void onSearchViewClosed() {

                  }
});
}

5.カスタムスタイル
valuesのstylesでスタイルを定義し、レイアウトファイルでスタイルを関連付けます.
<com.miguelcatalan.materialsearchview.MaterialSearchView
                   android:id="@+id/search_view"
                    style="@style/MaterialSearchViewStyle"
                   android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                   android:layout_marginTop="25dp" />

    
<stylename="MaterialSearchViewStyle">
         <!—    -->
         <itemname="searchBackground">@color/theme_primaryitem>

         
         <itemname="searchVoiceIcon">@drawable/ic_action_voice_search_inverteditem>

         <!—     inverted    ;  inverted     -->
         <itemname="searchCloseIcon">@drawable/ic_action_navigation_close_inverteditem>

         
         <itemname="searchBackIcon">@drawable/ic_action_navigation_arrow_back_inverteditem>

         
         <itemname="searchSuggestionIcon">@drawable/ic_suggestionitem>

         
         <itemname="searchSuggestionBackground">@android:color/whiteitem>

         
         <itemname="android:textColor">@color/theme_primary_text_inverteditem>

         
         <itemname="android:textColorHint">@color/theme_secondary_text_inverteditem>

         <!—Hint   -->
         <itemname="android:hint">@string/search_hintitem>
style>

円形のアイコンCircleView
1.依存の追加
dependencies {
   ...
   compile 'de.hdodenhof:circleimageview:2.1.0'
}

2.使用
.hdodenhof.circleimageview.CircleImageView
    xmlns:app="http://schemas.android.com/apk/res-auto"
   android:id="@+id/profile_image"
   android:layout_width="96dp"
   android:layout_height="96dp"
   android:src="@drawable/profile"
   app:civ_border_width="2dp"
   app:civ_border_color="#FF000000"/>
app:civ_border_width:    
app:civ_border_color:

材料設計ライブラリMaterialDesign
Github公式アドレスhttps://github.com/navasmdc/MaterialDesignLibrary
1.インポート方法
公式方法:How to use If you want use this library,you only have to download MaterialDesign project,import it into your workspace and add theproject as a library in your android project settings.If you prefer it, you can use the gradledependency, you have to add these lines in your build.gradle file: repositories { jcenter() } dependencies { compile ‘com.github.navasmdc:MaterialDesign:1.5@aar’ }
2.インポートに失敗した場合は、次の方法でインポートします.
(1)まずgithubから公式demoをパソコンにダウンロードする
MaterialDesign使用及开发指南_第2张图片
(2)ダウンロードしたファイルを開くには,クラスライブラリのみで,他のファイルは不要である.
MaterialDesign使用及开发指南_第3张图片
(3)File-New-Import Moduleは、上のフレームのフォルダを見つけて、モジュールとしてインポートする.
(4)そしてあなたの工事に依存を追加します
build.gradle(Module:app) 
dependencies {
    compile project(':MaterialDesign')
}

あるいはStructureに直接追加してもよい.
(5)モジュール構成の変更
MaterialDesignモジュールのgradleコンパイルバージョン、ツールバージョン、最小バージョンはあなたのメインモジュールModule:appと一致します.修正後、同期時にsdkのダウンロードを求める場合がありますが、大きくないので、ダウンロードすればいいです.MaterialDesignモジュールのgradleは赤くなることがあります.気にしないで、直接使えばいいです.MaterialDesign使用及开发指南_第4张图片
3.使用
簡単なので、公式チュートリアルを直接参照することをお勧めします.https://github.com/navasmdc/MaterialDesignLibrary
ここで注意が必要なのは
(1)ネーミングスペースの指定を忘れない
Somecomponents have custom attributes, if you want use them, you must add this linein your xml file in the first component: 
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:materialdesign="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
</RelativeLayout>

(2)フラットボタン
<com.gc.materialdesign.views.ButtonFlat
               android:id="@+id/buttonflat"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:background="#1E88E5"
                android:text="Button"/>
android:background            .

アイコン素材
Google公式MaterialDesign素材ライブラリ説明ドキュメントhttp://google.github.io/material-design-icons/ダウンロードアドレスhttps://github.com/google/material-design-icons/
標準及び規範
http://design.1sters.com/MarginDesignの規範に従って、まとめたいくつかの設計基準はdimensに直接コピーする.xmlを使用すればよい.mdの仕様項目は細かいものが多いが、規則的であり、mdの設計基準--4 dpの偶数倍(または8の整数倍)を概括することができ、10 dpの整数倍ではない詳細は以下の通りである.
<resources>
    
    <dimen name="activity_horizontal_margin">16dpdimen>
    <dimen name="activity_vertical_margin">16dpdimen>
    <dimen name="fab_margin">16dpdimen>

    
    <dimen name="elevation_header">2dpdimen>
    <dimen name="elevation_tab">4dpdimen>

    
    <dimen name="btn_width">88dpdimen>
    <dimen name="btn_height">36dpdimen>
    <dimen name="flatbtn_twogroup_height">72dpdimen>
    <dimen name="flatbtn_twogroup_margin">24dpdimen>

    
    <dimen name="edt_height">48dpdimen>

    
    <dimen name="item_height_oneline">48dpdimen>
    <dimen name="item_height_oneline_avatar">56dpdimen>
    <dimen name="item_height_twoline">72dpdimen>
    <dimen name="item_height_threeline">88dpdimen>
    <dimen name="item_height_fourline">104dpdimen>
    <dimen name="item_padding">16dpdimen>

    
    <dimen name="margin_all">16dpdimen>
    <dimen name="margin_left_all">16dpdimen>
    <dimen name="margin_right_all">16dpdimen>
    <dimen name="margin_left_title_txt">72dpdimen>
    <dimen name="margin_dialog_24">24dpdimen>

    
    <dimen name="height_tab">48dpdimen>
    <dimen name="height_header">56dpdimen>
    <dimen name="height_listitem">72dpdimen>

    

    
    <dimen name="divider_small">8dpdimen>
    <dimen name="divider_medium">24dpdimen>
    <dimen name="divider_large">48dpdimen>
    <dimen name="divider_huge">56dpdimen>
    <dimen name="divider_textline">4dpdimen>


    
    <dimen name="txt_headline">24spdimen>
    <dimen name="txt_title">20spdimen>
    <dimen name="txt_subhead">16spdimen>
    <dimen name="txt_body">14spdimen>
    <dimen name="txt_caption">12spdimen>
    <dimen name="txt_menu">14spdimen>
    <dimen name="txt_btn">14spdimen>

    

    
    <dimen name="tab_indicator_height">2dpdimen>
    <dimen name="tab_txt_margin">12dpdimen>
    <dimen name="tab_height">48dpdimen>


    
    <dimen name="imgv_small">32dpdimen>
    <dimen name="imgv_large">56dpdimen>
    <dimen name="imgv_huge">72dpdimen>

resources>

その他
RippleEffect
コントロールをクリックして生成したMaterial Designの水波紋効果https://github.com/traex/RippleEffect例:
<com.andexert.library.RippleView
    android:layout_width="match_parent"
    android:layout_height="36dp"
    android:layout_alignParentBottom="true"
    app:rv_color="@color/fontlight"
    app:rv_rippleDuration="200">

    "@+id/rl_register"
        android:layout_width="match_parent"
        android:layout_height="36dp">

        "wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="     ?    "
            android:textColor="@color/fontlight"
            android:textSize="16sp" />

    
com.andexert.library.RippleView>

ReyMaterial
もう一つの使いやすいMaterialDesignサードパーティライブラリを強くお勧めしますhttps://github.com/rey5137/material
MaterialEdit
MaterialDesignスタイル入力ボックスhttps://github.com/rengwuxian/MaterialEditText
Feed Post Sample
Termuxのソースを自動的に交換し、パッケージのダウンロード速度を速めるノート