1. TextButton(明顯度最低)
3. Contained button(明顯度最高)
2. Outlined Button (明顯度中等)
4. Toggle button
圖片來源:https://material.io
1.Text button
A. Text label
C. Icon (optional)
2.Outlined button
A. Text label
B. Container
C. Icon (optional)
3.Contained button
A. Text label
B. Container
C. Icon (optional)
4.Toggle button
A. Container
C. Icon
圖片來源:https://material.io
圖片來源:https://material.io
圖片來源:https://material.io
圖片來源:https://material.io
圖片來源:https://material.io
圖片來源:https://material.io
圖片來源:https://material.io
圖片來源:https://material.io
<item name="materialButtonStyle">@style/AppButton</item>
<style name="AppButton" parent="Widget.MaterialComponents.Button">
<item name="backgroundTint">?attr/colorSecondary</item>
<item name="android:textColor">@color/button_text_color</item>
<item name="iconTint">@color/button_text_color</item>
<item name="rippleColor">@color/button_ripple_color</item>
</style>
<!-- 客制形狀 -->
<item name="shapeAppearanceSmallComponent">@style/AppShapeAppearance.SmallComponent</item>
<item name="shapeAppearanceMediumComponent">@style/AppShapeAppearance.MediumComponent</item>
<item name="shapeAppearanceLargeComponent">@style/AppShapeAppearance.LargeComponent</item>
<style name="AppShapeAppearance.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="cornerFamily">cut</item>
<item name="cornerSize">8dp</item>
</style>
<style name="AppShapeAppearance.MediumComponent" parent="ShapeAppearance.MaterialComponents.MediumComponent">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">8dp</item>
</style>
<style name="AppShapeAppearance.LargeComponent" parent="ShapeAppearance.MaterialComponents.LargeComponent">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">8dp</item>
</style>
<evan.chen.tutorial.ui.customviewsample.CustomView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorAccent" />
<evan.chen.tutorial.ui.customviewsample.CustomView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorAccent"
android:padding="20dp" />
<FrameLayout
android:layout_width="200dp"
android:layout_height="200dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<evan.chen.tutorial.ui.customviewsample.CustomView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorAccent"
android:padding="20dp" />
</FrameLayout>
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
val widthSpecMode = MeasureSpec.getMode(widthMeasureSpec)
val widthSpecSize = MeasureSpec.getSize(widthMeasureSpec)
if (widthSpecMode == MeasureSpec.AT_MOST) {
//wrap_content
}
if (widthSpecMode == MeasureSpec.EXACTLY) {
//指定大小
}
if (widthSpecMode == MeasureSpec.UNSPECIFIED) {
//未定大小
}
}
override fun draw(canvas: Canvas?) {
canvas?.drawLine(startX, startY, stopX, stopY)
}
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
val widthMode = MeasureSpec.getMode(widthMeasureSpec)
val heightMode = MeasureSpec.getMode(heightMeasureSpec)
val widthSize = MeasureSpec.getSize(widthMeasureSpec)
val heightSize = MeasureSpec.getSize(heightMeasureSpec)
//依子View計算GroupView的寬、高
setMeasuredDimension(finalWidth, finalHeight)
}
override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
//編排子View
}
來源:維基百科
矩形 -> 圓形
載入中動畫
Reveal 完成
圓形 -> 矩形
canvas.drawArc(oval, 30f, 300f, true, p)
canvas.drawArc(oval, 300f, 300f, true, p)
dependencies {
implementation 'com.google.android.material:material:1.1.0-beta01'
}
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
加入Dependencies
修改Style
<androidx.drawerlayout.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
https://developer.android.com/jetpack/androidx/migrate/class-mappings
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
用來協調子View之間動作的一個Layout
圖片來源:https://material.io
MaterialAlertDialogBuilder(this)
.setMessage("確認刪除")
.setPositiveButton("刪除") { _: DialogInterface?, _: Int ->
Toast.makeText(this, "刪除", Toast.LENGTH_SHORT).show()
}
.setNegativeButton("取消") { _, _ ->
Toast.makeText(this, "取消", Toast.LENGTH_SHORT).show()
}
.show()
val items = arrayOf("選項1", "選項2", "選項3")
MaterialAlertDialogBuilder(this)
.setTitle("請選擇")
.setItems(items){ _, i ->
Toast.makeText(this, "選項: ${items[i]}", Toast.LENGTH_SHORT).show()
}
.setCancelable(false)
.show()
val items = arrayOf("選項1", "選項2", "選項3")
val checkedItem = 0
MaterialAlertDialogBuilder(this)
.setTitle("請選擇")
.setSingleChoiceItems(items, checkedItem) { dialog, which ->
Toast.makeText(this, "選項 ${items[which]}", Toast.LENGTH_SHORT).show()
}
.setPositiveButton("確定") { dialog, which ->
Toast.makeText(this, "選項:${items[which]}", Toast.LENGTH_SHORT).show()
}
.setNegativeButton("取消") { dialog, which ->
Toast.makeText(this, "選項 cancel", Toast.LENGTH_SHORT).show()
}
.show()
val items = arrayOf("選項1", "選項2", "選項3")
val checkedItems = booleanArrayOf(true, false, false, false)
MaterialAlertDialogBuilder(this)
.setTitle("請選擇")
.setMultiChoiceItems(items, checkedItems) { dialog, which, checked ->
Toast.makeText(this, "Chose ${items[which]}", Toast.LENGTH_SHORT).show()
}
.setPositiveButton("確定") { dialog, which ->
Toast.makeText(this, "確定 ${items[which]}", Toast.LENGTH_SHORT).show()
}
.setNegativeButton("取消") { dialog, which ->
Toast.makeText(this, "取消", Toast.LENGTH_SHORT).show()
}
.show()
由底部由下往上展開的,可以滑動來展開、收合的View
下拉更新資料
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/navigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_insetEdge="bottom"
app:menu="@menu/bottom_nav_menu" />
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/navigation_home"
android:icon="@drawable/ic_home_black_24dp"
android:title="@string/title_home" />
<item
android:id="@+id/navigation_settings"
android:icon="@drawable/ic_settings_black_24dp"
android:title="@string/title_setting" />
<item
android:id="@+id/navigation_notifications"
android:icon="@drawable/ic_notifications_black_24dp"
android:title="@string/title_notifications" />
</menu>
ItemTouchHelper mIth = new ItemTouchHelper(
new ItemTouchHelper.SimpleCallback(ItemTouchHelper.UP | ItemTouchHelper.DOWN,
ItemTouchHelper.LEFT) {
public abstract boolean onMove(RecyclerView recyclerView,
ViewHolder viewHolder, ViewHolder target) {
final int fromPos = viewHolder.getAdapterPosition();
final int toPos = target.getAdapterPosition();
return true;
}
public void onSwiped(ViewHolder viewHolder, int direction) {
// remove from adapter
}
});
圖片來源:https://material.io
圖片來源:https://material.io
圖片來源:https://material.io
圖片來源:https://material.io
圖片來源:https://material.io
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/hint_text">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
1. Container
2. Leading icon (optional)
3. Label text
4. Input text
5. Trailing icon (optional)
6. Activation indicator
7. Helper text (optional)
來源:https://material.io
圖片來源:https://material.io
1.Container
2.Icon
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="@drawable/ic_add_black_24dp" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
圖片來源:https://material.io
圖片來源:https://material.io
圖片來源:https://material.io
1.Container
2.Icon (optional)
3.Text label
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:text="Add"
app:icon="@drawable/ic_add_black_24dp" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
圖片來源:https://material.io
圖片來源:https://material.io
Component | 優先權 | 使用者互動 |
---|---|---|
Snackbar | 低 | Snackbars會自動消失,可能有互動 |
Dialog | 高 | 可強制使用者選擇 |
側邊選單
網站來源:https://material.io/
<style name="cardStyle" parent="Widget.MaterialComponents.CardView">
<item name="cardCornerRadius">8dp</item>
<item name="cardElevation">8dp</item>
<item name="android:clickable">true</item>
<item name="rippleColor">#666666</item>
<item name="android:checkable">true</item>
</style>
<com.google.android.material.card.MaterialCardView
app:cardBackgroundColor="#00BCD4"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
app:rippleColor="#666666"
android:clickable="true"/>
基於CardView做出來的更多功能的Component
圖片來源:https://material.io/