いろいろなCoordinatorLayoutパターン

#最初に一言
スクロールに合わせて消えるあのかっこいいやつやりたい。-> なるほど。**CoordinatorLayout**ってヤツを使えばできると。-> えっナニコレ、**CoordinatorLayout**すごく使いづらいYO、...ってことで、今後のために**CoordinatorLayout**の組み合わせをメモっておこうと思った。

#CoordinatorLayoutって？
個人的にはめちゃくちゃ使いづらいレイアウトってイメージ。分類的にはFrameLayoutだとか。
簡単な一からの実装方法はこちらを参考に [ドラッグで始める最速CoordinatorLayout](https://qiita.com/YS-BETA/items/a1be1fd37dd69d242239)

これを使えばどんなことができるのか？
↓こういうよく見るスクロールに合わせて消えるヤツ
<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/09c8f507-af83-4a77-42db-ed03322149c2.gif">

今回はCoordinatorlayoutを使ったサンプルを**レイアウトファイルに焦点を当て**、いくつか紹介してみる。
RecyclerViewやViewPagerの細かい実装は今回は省略。
なおコードはgithubに挙げているのでレイアウトファイル以外を見たい方は適宜参照してほしい。
(※今回のコードはすべて**kotlin, android x に対応**したものになっています。)

#Coordinatorlayout + RecyclerView
一番シンプルなやつ
<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/09c8f507-af83-4a77-42db-ed03322149c2.gif">

なお、前提としてアクションバーは非表示のテーマになっているとする。(非表示のやり方は一番下に)

<img width="300" alt="キャcafプチャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/e51f5cad-5a3e-befe-ef75-10d64b340da1.png">　<img width="185" alt="キャプチvaertャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/a2db9993-a7d5-833e-7e9b-8f172ed717e9.png">


##メインのレイアウトファイル

```xml:activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="230dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:minHeight="?attr/actionBarSize"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:toolbarId="@+id/toolbar">

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:srcCompat="@drawable/house" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:title="スイスの湖小屋" />
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
```

ここで**注意**が必要なのが**CollapsingToolbarLayout**の属性に**minHeight**を指定しておかないとRecyclerViewの一番下の要素がtoolbarの分だけ表示しきれずに切れてしまう。

また、アクションバー自体も消えるようにしたいときは**CollapsingToolbarLayout**の属性を**app:layout_scrollFlags="scroll"**に変更するとアクションバーも隠れるようになる。

こちらのコードは[github](https://github.com/SY-BETA/Coordinatorlayout-Normal)からどうぞ



#CoordinatorLayout + RecyclerView + ViewPager
ViewPagerでフラグメントを切り替え、そのフラグメントの中にRecyclerViewが入ってるパターン
<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/a0046bd2-1409-4497-18bf-a36c7d2d9a1a.gif">

なお、前提としてアクションバーは非表示のテーマになっているとする。(非表示のやり方は一番下に)

<img width="300" alt="キャプチャcadsfjty.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/023d7bc8-389b-82d7-1a6f-62658a9039a4.png">　<img width="226" alt="キccgagdャプチャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/668d5dca-637b-d247-d728-535f47e97fe9.png">

ViewPagerを**NestedScrollView**の中に入れていると、**ViewPagerとその中のフラグメントが表示されないので注意**。viewPagerを中に入れてると大きさをmatch_parentにしようが、wrap_contentにしようが何故かviewPagerの**大きさが０**になる。**固定値でheight:500dpとか指定したらいける**けど、それじゃぁ、あんまり使えないよね...


##メインのレイアウトファイル

```xml:activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="230dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:toolbarId="@+id/toolbar">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                app:srcCompat="@drawable/house" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:title="スイスの湖小屋"></androidx.appcompat.widget.Toolbar>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
```

##フラグメントのレイアウトファイル
ViewPagerで表示を切り替えるフラグメント(この中にRecyclerViewが入ってる)
<img width="300" alt="キャプccfaチャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/c8e2598f-08e5-f62e-511b-be664c80a90e.png">  　 <img width="192" alt="キcvadgャプチャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/d404f6cc-24ac-6633-a354-0f60e6b53aa9.png">


```xml:fragment_view_pager.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ViewPagerFragment" >

    <TextView
        android:id="@+id/positionText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:text="TextView"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/positionText" />
</androidx.constraintlayout.widget.ConstraintLayout>
```

親のViewPagerで**app:layout_behavior**属性を定義しているのでRecyclerViewに**app:layout_behavior**属性を追加しなくても動く。


こちらのコードは[github](https://github.com/SY-BETA/CoordinatorLayout-ViewPager)からどうぞ


#CoordinatorLayout + RecyclerView + ViewPager + TabLayout

## toolbarとtabLayoutも消える
<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/b2722aa1-f521-6c22-2012-7163f2b6af24.gif">

なお、前提としてアクションバーは非表示のテーマになっているとする。(非表示のやり方は一番下に)
<img width="300" alt="キdafャプチャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/e9555d23-742c-9686-8db9-252959fae6fc.png">　　<img width="201" alt="キャccvasdfプチャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/443d2703-4b6f-e93d-02b3-a004c3024d93.png">

###メインのレイアウトファイル

```xml:activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed"></androidx.appcompat.widget.Toolbar>

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_collapseMode="parallax"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
            app:tabIndicatorFullWidth="false"
            app:tabMode="scrollable">

            <com.google.android.material.tabs.TabItem
                android:id="@+id/tabItem1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TAB01" />

            <com.google.android.material.tabs.TabItem
                android:id="@+id/tabItem2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TAB02" />

            <com.google.android.material.tabs.TabItem
                android:id="@+id/tabItem3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TAB03" />

            <com.google.android.material.tabs.TabItem
                android:id="@+id/tabItem4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TAB04" />
        </com.google.android.material.tabs.TabLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>
```

###フラグメントのレイアウトファイル
ViewPagerの中身のフラグメント。この中にrecyclerViewが入ってる
上記の**CoordinatorLayout + RecyclerView + ViewPager**と同じため省略

こちらのコードは[github](https://github.com/SY-BETA/CoordinatorLayoutTabLayout1/tree/master)からどうぞ

##toolbarだけ消える
<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/6994649f-6b24-e4ce-7b38-ab70adaf9ae9.gif">

上記の**toolbarとtablayoutも消える**とほぼ同じ。
**tablayout**の**layout_scrollFlags**属性を削除すればできる。

```xml:activity_main.xml
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_collapseMode="parallax"
            app:tabIndicatorFullWidth="false"
            app:tabMode="scrollable">
```

## tabLayoutだけ消える
<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/ef5bc2a8-5f03-bf0c-ea48-2cd5d716554f.gif">
なお、前提としてアクションバーは非表示のテーマになっているとする。(非表示のやり方は一番下に)
これも上記の**toolbarとtablayoutも消える**とほぼ同じ
メインのレイアウトファイルを以下のように変更する。フラグメントは変わらず。
<img width="300" alt="キャプチcafddsaャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/53155be4-8de7-f418-ac25-1932072d9e65.png">　　<img width="220" alt="キャプチgacxvzャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/3f7c2577-bfd6-b058-b217-6368a543e68f.png">
ちょっと無理やりだがこうすればいける

```xml:activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_scrollFlags="scroll|enterAlwaysCollapsed"></androidx.appcompat.widget.Toolbar>

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/coordinatorLayout"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar">

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_collapseMode="parallax"
                app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
                app:tabIndicatorFullWidth="false"
                app:tabMode="scrollable">

                <com.google.android.material.tabs.TabItem
                    android:id="@+id/tabItem1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="TAB01" />

                <com.google.android.material.tabs.TabItem
                    android:id="@+id/tabItem2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="TAB02" />

                <com.google.android.material.tabs.TabItem
                    android:id="@+id/tabItem3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="TAB03" />

                <com.google.android.material.tabs.TabItem
                    android:id="@+id/tabItem4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="TAB04" />
            </com.google.android.material.tabs.TabLayout>

        </com.google.android.material.appbar.AppBarLayout>

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />

    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

```

こちらのコードは[github](https://github.com/SY-BETA/CoordinatorLayoutTabLayout2/tree/master)からどうぞ

##画像入り
<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/d6ba6006-5df4-3d98-adf6-e470cedde773.gif">
なお、前提としてアクションバーは非表示のテーマになっているとする。(非表示のやり方は一番下に)

<img width="303" alt="キャプチcafddsaャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/d442fc37-e9b3-fd19-7f30-c0213aa514e3.png">　　<img width="220" alt="キャプチgacxvzャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/63776a76-74d2-13ec-c45a-fc1ec339a83b.png">


###メインのレイアウトファイル

```xml:activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:toolbarId="@+id/toolbar">

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:srcCompat="@drawable/house" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
                app:title="スイスの湖小屋"></androidx.appcompat.widget.Toolbar>

        </com.google.android.material.appbar.CollapsingToolbarLayout>

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="enterAlwaysCollapsed"
            app:tabIndicatorFullWidth="false"
            app:tabMode="scrollable">

            <com.google.android.material.tabs.TabItem
                android:id="@+id/tabItem1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TAB01" />

            <com.google.android.material.tabs.TabItem
                android:id="@+id/tabItem2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TAB02" />

            <com.google.android.material.tabs.TabItem
                android:id="@+id/tabItem3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TAB03" />

            <com.google.android.material.tabs.TabItem
                android:id="@+id/tabItem4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TAB04" />
        </com.google.android.material.tabs.TabLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>
```
フラグメントのレイアウトファイル等は上記と変わらず。

こちらのコードは[github](https://github.com/SY-BETA/CoordinatorLayout-TabLayout3)からどうぞ

##おまけ
**layout_scrollFlags**を組み合わせたりすることで以下のような動きにすることができる。(tabLayoutとtoolbarが出てくるタイミングが異なる)
tabLayoutはスクロールしたらすぐに出てくるが、toolbarは一番上までいかないと出てこない。

<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/f1e28fa4-e299-0031-e320-6ec12d465b23.gif">

**CollapsingToolbarLayoutとtabLayoutのlayout_scrollFlagsはこんな感じ**

```xml:activity_main.xml
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:minHeight="?attr/actionBarSize"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
            app:toolbarId="@+id/toolbar">

            <ImageView
                android:id="@+id/imageView3"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="centerCrop"
                app:srcCompat="@drawable/house" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:title="スイスの湖小屋"></androidx.appcompat.widget.Toolbar>
```

```xml:activity_main.xml
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_collapseMode="parallax"
            app:layout_scrollFlags="scroll|enterAlways"
            app:tabIndicatorFullWidth="false"
            app:tabMode="scrollable">
```


#CoordinatorLayout + FloatingActionButton
スクロールに合わせてボタンが消えるヤツ
FloatingActionButtonのついでに戻るボタンとかオプションメニューとかも表示してみる

<img width="250" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/8fb7e745-fc2b-e416-6968-32c9b00f1225.gif">

##レイアウトファイル
**FloatingActionButton**を設置する。

<img width="300" alt="キャプチavaャ.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/f0a2cf67-8f92-2af3-03b1-ef1a4e3a08cd.png">　　<img width="200" alt="cavc.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520167/151e80da-a0e7-c531-ff89-fdcc9324fb52.png">

```xml:activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed|exitUntilCollapsed"
            app:toolbarId="@+id/toolbar">

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:srcCompat="@drawable/house" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:title="スイスの湖小屋"></androidx.appcompat.widget.Toolbar>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:id="@+id/nestedScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
     app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </androidx.core.widget.NestedScrollView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:src="@android:drawable/btn_star_big_off"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
```

**toolbar**の**app:layout_collapseMode**属性は**pin**にしておかないと戻るボタンとかが表示されなくなる。

floatingActionButtonの**layout_anchor**を指定することで**appbar**が隠れたときにfabも非表示にするようになっている。
また、fabの位置は**layout_anchorGravity**で指定可能。普通のlayout_gravityとかじゃないので注意。
とりあえずこれでスクロールに合わせて消えるfabの出来上がり。

##戻るボタンの表示
後は戻るボタンとかオプションメニューを表示してみる。

menuフォルダを作って適当にmenuItemを追加(わからない方はoptionMenuの表示の仕方とかで調べてみてください。)
onCreateで戻るボタンとオプションメニューを表示させる。

```kotlin:MainActivity.kt
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        // toolbar設定
        setSupportActionBar(toolbar)
        //戻るボタンの表示
        supportActionBar?.setDisplayHomeAsUpEnabled(true)

        // recyclerView
        val list = List<String>(20) { "RecyclerView$it" }
        val adapter = RecyclerViewAdapter(list)
        recyclerView.adapter = adapter
        recyclerView.layoutManager = LinearLayoutManager(this)
    }

    // オプションメニューを表示させる
    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        val inflater = MenuInflater(this)
        inflater.inflate(R.menu.main, menu)
        return true
    }
```

出来上がり。
こちらのコードは[github](https://github.com/SY-BETA/Floating-ActionBtn/tree/master)からどうぞ



#アクションバーを非表示にする
**styles**を少しいじってアクションバー非表示

```xml:styles.xml
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowNoTitle">true</item>
　　　　　<!--        アクションバーの文字色-->
        <item name="android:textColorPrimary">@android:color/white</item>
    </style>
```

アクションバーの設定(※toolbarを自分で作ってそれをアクションバーとして使う場合)
**onCreate**に以下を加える

```kotlin:MainActivity.kt
setSupportActionBar(toolbar)
```

#おわり
使いづらいと思ってたCoordinatorLayoutとこれを機に仲良くなりたいと思ってまとめてみた。
少しでもアンドロイダーの方々の一助となれば幸いです。
上にスクロールして消えるときにアニメーションとか入れているものを紹介しているサイトがいくつかあって、アニメーションとCoordinatorLayout入れるだけでずいぶん印象変わりそうだなと思った。

スイスにこんな別荘が欲しい...