Support Library 28.0.0 alpha1を試してみた


※ 間違いなどありましたらご指摘お願いします。

https://developer.android.com/topic/libraries/support-library/revisions.html#28-0-0-alpha1

> Note: 28.0.0-alpha1 is a pre-release version to support the Android P developer preview. Its API surface is subject to change, and it does not necessarily include features or bug fixes from the latest stable versions of Support Library. For details on the P developer preview, see the release notes.



## 今回試したもの
#### Design Library
- BottomAppBar
- Chip
- ChipGroup
- MaterialButton
- MaterialCardView


![スクリーンショット 2018-03-08 17.58.38.png](https://qiita-image-store.s3.amazonaws.com/0/3048/0675798d-12ac-85af-b735-bc5de400ec48.png "スクリーンショット 2018-03-08 17.58.38.png")


### 設定

```app/build.gradle
apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 'android-P'
    buildToolsVersion "28.0.0-rc1"
    defaultConfig {
        applicationId "com.github.atsumo.myapplication"
        minSdkVersion 'P'
        targetSdkVersion 'P'
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:28.0.0-alpha1'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    implementation 'com.android.support:design:28.0.0-alpha1'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
}


```

#### BottomAppBar
```xml
<android.support.design.bottomappbar.BottomAppBar
        android:id="@+id/bottomappbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_gravity="bottom"
        app:backgroundTint="@color/colorPrimary"
        app:fabAlignmentMode="end"
        app:popupTheme="@style/AppTheme.PopupOverlay"
        />
        
<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:fabSize="normal"
        app:layout_anchor="@+id/bottomappbar"
        app:srcCompat="@android:drawable/ic_dialog_email"
        />
```

`fabAlignmentMode`でどの位置にくぼみを作るか指定する
`center/end`のみ

追記 layout_anchorを使うとくぼみにいい感じにはめてくれるとコメント頂いたので修正しました。

`app:layout_anchor="@+id/bottomappbar"`


#### Chip/ChipGroup

![スクリーンショット 2018-03-08 18.01.14.png](https://qiita-image-store.s3.amazonaws.com/0/3048/62d37c70-deed-9ca7-0642-8197e4f3fcba.png "スクリーンショット 2018-03-08 18.01.14.png")

Choice3が選択されている状態で初期化されているサンプル

`app:singleSelection="true"`　これによりどれが一つが選ばれている状態となる



```xml
<!-- ChipGroup single selection -->
    <android.support.design.chip.ChipGroup
        android:id="@+id/chipGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        app:checkedChip="@+id/choice3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:singleSelection="true"
        >

        <android.support.design.chip.Chip
            android:id="@+id/choice1"
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Choice1"
            />

        <android.support.design.chip.Chip
            android:id="@+id/choice2"
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Choice2"
            />

        <android.support.design.chip.Chip
            android:id="@+id/choice3"
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Choice3"
            />

        <android.support.design.chip.Chip
            android:id="@+id/choice4"
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Choice4"
            />
    </android.support.design.chip.ChipGroup>
 
```

 
##### Chipのスタイルは4種類

- Action(Default)
- Choice
- Entry
- Filter

![スクリーンショット 2018-03-08 18.04.54.png](https://qiita-image-store.s3.amazonaws.com/0/3048/f422421f-3fb0-7427-393c-cc414d88ba08.png "スクリーンショット 2018-03-08 18.04.54.png")

```xml
<android.support.design.chip.ChipGroup
        android:id="@+id/chipGroup2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/chipGroup"
        app:singleLine="true"
        >

        <android.support.design.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Action"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipIcon="@drawable/ic_android_black_24dp"
            app:chipText="Action"
            />

        <android.support.design.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Filter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Filter"
            />

        <android.support.design.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Choice"
            />

        <android.support.design.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Entry"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Entry"
            />
</android.support.design.chip.ChipGroup>
 
```


#### MaterialCardView
CardViewと比較して何が変わったのか？
strokeColor/strokeWidthが増えた？
※ もう少し調査する

#### MaterialButton
![スクリーンショット 2018-03-08 18.10.57.png](https://qiita-image-store.s3.amazonaws.com/0/3048/14b3ea37-55d6-d5e9-ff4a-4f205336b76d.png "スクリーンショット 2018-03-08 18.10.57.png")



```xml
<android.support.design.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:gravity="center_vertical"
        android:text="MaterialButton"
        android:textColor="#FFFFFF"
        app:cornerRadius="16dp"
        app:icon="@drawable/ic_android_black_24dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />  
``` 

下記二つが指定できるのはよさげ

- cornerRadius
- icon

rippleColorも指定できるみたいだけど、なんか上手く行かなかったのでまた次回

## ひとこと
ざっと試しただけなので、間違ってるところとか、それそもそも新しいとこじゃないしみたいなご指摘あったらお願いします。

Android-Pのまとめもそのうちに。