LoginSignup
9

More than 5 years have passed since last update.

Support Library 28.0.0 alpha1を試してみた

Last updated at Posted at 2018-03-08

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

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

設定

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

<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

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

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

<!-- 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

<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

<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のまとめもそのうちに。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9