web-dev-qa-db-ja.com

Android Material Design-CollapsingToolbarLayoutが折りたたまれた後にツールバーの背景色を変更する方法

ユーザーが画面を下にスクロールすると、CollapsingToolbarLayoutの画像が消えて、戻るボタン、コンテンツタイトル、および設定メニューのあるツールバーが残ります。 「折りたたみ」状態の場合にのみ、ツールバーの背景色を変更する方法を知りたいです。

私が言及しているアクションは、ツールバーの背景色が緑色に変わる、これに似ています：

enter image description here

CollapsingToolbarLayoutの下にNestedScrollView with CardViewsがあります

androidmaterial-designandroid-collapsingtoolbarlayout
38
Eli Davila

あなたはapp:contentScrim。

<Android.support.design.widget.CollapsingToolbarLayout
    ...
    app:contentScrim="?attr/colorPrimary">
    <!-- Toolbar and ImageView here -->
</Android.support.design.widget.CollapsingToolbarLayout>
82
Jimeux

最初に削除

app:contentScrim="?attr/colorPrimary">

collapsingToolbarLayoutから

ライブラリを追加

compile 'com.Android.support:palette-v7:23.2.1'

そして、以下のコードをJava code

    Bitmap bitmap = BitmapFactory.decodeResource(getApplicationContext().getResources(), R.drawable.ny);
    Palette.generateAsync(bitmap,
            new Palette.PaletteAsyncListener() {
                @Override
                public void onGenerated(Palette palette) {
                    Palette.Swatch vibrant =
                            palette.getVibrantSwatch();
                    int mutedColor = palette.getVibrantSwatch().getRgb();
                    if (vibrant != null) {
                        // If we have a vibrant color
                        // update the title TextView
                        collapseToolbar.setBackgroundColor(mutedColor);
                        //  mutedColor = palette.getMutedColor(R.attr.colorPrimary);
                        collapseToolbar.setStatusBarScrimColor(palette.getDarkMutedColor(mutedColor));
                        collapseToolbar.setContentScrimColor(palette.getMutedColor(mutedColor));

                    }
                }
            });
12
Ashish

CollapsingToolbarLayoutモードの場合、contentScrim XML属性Toolbarを使用してcollapsed背景色を設定するだけです。

app:contentScrim="YOUR_TOOLBAR_COLOR"

ここに例があります：

<Android.support.design.widget.CollapsingToolbarLayout
    Android:id="@+id/collapsing_toolbar"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true"
    app:contentScrim="?attr/colorPrimary"
    app:layout_scrollFlags="scroll|exitUntilCollapsed">

    <ImageView
        Android:id="@+id/img_group_photo"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:fitsSystemWindows="true"
        Android:scaleType="centerCrop"
        app:layout_collapseMode="parallax" />

    <Android.support.v7.widget.Toolbar
        Android:id="@+id/anim_toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="?attr/actionBarSize"
        app:layout_collapseMode="pin"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</Android.support.design.widget.CollapsingToolbarLayout>

これが役立つことを願っています〜

6
Ferdous Ahamed

おそらくあなたが探しているのはこれです：

myCollapsingToolbar.setContentScrimColor(getResources().getColor(R.color.my_color_id));

それは私のために働いて、collapsingToolbarがフルスケールのときに表示された画像のメインカラーに合うように折りたたまれたcollapsingToolbarの色を変更しました。これにより、明らかに色をプログラムで変更できます！

私は遅れていることは知っていますが、それが助けになることを願っています。

2
Olivier L. Applin

AppBarLayoutのオフセットリスナーを使用し、目的の動作に応じてCollapsingTollbar属性を変更できます。

appBarLayout.addOnOffsetChangedListener { _, verticalOffSet ->
            if (Math.abs(verticalOffSet) == appBarLayout.totalScrollRange) {
                //Collapsed
                toolBar.setBackgroundDrawable(ContextCompat.getDrawable(this,
                        R.drawable.last_revolut_gradient))
            } else {
                //Expanded
                toolBar.setBackgroundColor(ContextCompat.getColor(this,
                        Android.R.color.transparent))
            }
        }
0
haroldolivieri