[Android] 新しいBottom App Bar試してみた。Material Design

## Bottom App Bar??

Bottom App BarとはグーグルI/O 18で　新しくなった
Material　Designの中にあるcomponentである。

1. Link + [Material Design Bottom App Bar](https://material.io/design/components/app-bars-bottom.html)


![image.png](https://qiita-image-store.s3.amazonaws.com/0/137182/6737090d-2903-4b20-05e9-1604f411b40e.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/137182/144f1b74-c137-957a-0f03-7037c01aa83e.png)

https://material.io/design/components/app-bars-bottom.html#anatomy
による

なんかカッコイイ。。

## どうやってつかいますか＿？

最初はなんかbuildが難しく
どうしようと思いました。

1. Android API 28 
2. ...

### Module:app のからかくにんしましょう

これのように
minSDKは１９までも大丈夫でした。
compileSdkVersionとtargetSdkVersionはバージョン２８にセット。

```groovy:build.gradle
 compileSdkVersion 28
    defaultConfig {
        applicationId "com.dreamwalker.bottomappbar"
        minSdkVersion 21
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
```

### Module:app の dependencies かくにんしましょう

material design Github によると


>If you don't want to switch over to the new androidx and com.google.android.material packages yet, you can use Material Components via the com.android.support:design:28.0.0-alpha3 dependency.

>Note: You should not use the com.android.support and com.google.android.material dependencies in your app at the same time.

で、


```groovy:build.gradle

dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    //implementation 'com.google.android.material:material:1.0.0-beta01'
    implementation 'com.android.support:appcompat-v7:28.0.0-beta01'
    implementation 'com.android.support:design:28.0.0-beta01'


}

```

設定はこれのようにしました。　他のは追加しませんでした。


### Layoutをつくってみようか

**componentはCoordinatorLayoutのなかに入らなければならない。**


```xml:activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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">

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

    <android.support.design.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        style="@style/Widget.MaterialComponents.BottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_gravity="bottom"
        app:backgroundTint="@color/colorAccent"
        app:fabCradleRoundedCornerRadius="10dp"
        app:title="@string/detail"
        app:titleTextColor="@android:color/black"
        app:navigationIcon="@drawable/ic_menu_black_24dp"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_dribble"
        app:layout_anchor="@id/bottomAppBar" />
</android.support.design.widget.CoordinatorLayout>

```

### Code しましょう。最後です。

onCreate なかに

```java:Main.java

final BottomAppBar bottomAppBar = findViewById(R.id.bottomAppBar);
setSupportActionBar(bottomAppBar);


 bottomAppBar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                bottomAppBar.setFabAlignmentMode(BottomAppBar.FAB_ALIGNMENT_MODE_END);
                Toast.makeText(MainActivity.this, "Clicked", Toast.LENGTH_SHORT).show();
            }
        });


```

Kotlinなら.


```kotlin:main.kt

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_home)

        initView()
    }

    private fun initView() {
        setSupportActionBar(bottomAppBar)
    }

```

#結果

## 一つ目

![device-2018-08-02-180515.png](https://qiita-image-store.s3.amazonaws.com/0/137182/adbe119a-72f5-49c4-e801-bbd8870b22ee.png)

## 二つ目

![device-2018-08-02-180526.png](https://qiita-image-store.s3.amazonaws.com/0/137182/772c4b2a-d8a9-943f-7d23-a173908fa417.png)


#終わりに

新しいMaterial　Designは何回かな。。
試してみたら、以外に難しくなかったです。
ここまで読んでいただきありがとうございました。
次ももっとお役立ちものを書いてみようと思います。

**Dreamwalker**