web-dev-qa-db-ja.com

CollapsingToolBarLayout-ステータスバーのスクリムの色は変わりません

数日前にAndroid studioを更新し、CoordinatorLayoutとCollapsingToolbarLayoutで作業を始めました。

ツールバーのスクリムの色がステータスバーの初期色とステータスバーのスクリムの色をオーバーライドしているようです(xmlとコードの両方から試されました)

初期状態:

initial state:


スクロールを開始しました:

started scrolling


崩壊するまでスクロール:

scrolled until collapsing


質問は次のとおりです。

  1. 折りたたむときにツールバーがステータスバーを上書きしないようにするにはどうすればよいですか(折りたたんでいる画像をその上に移動させることさえできません)。

  2. 折りたたみ後にステータスバーの色を変更するにはどうすればよいですか

私が抱えていた別の問題は、画像の上にツールバーが必要だったので、スクリム色だけでなくツールバーの初期色を指定したことです。その後ろに崩壊


xmlのツールバーに色/スタイルを追加しました:

added colour/style to the toolbar in the xml


  1. 最初から画像の上にツールバーを配置し、画像を折りたたむ方法はありますか? (おそらく、ツールバーをピン留めしたままにして、画像の前にフレームレイアウトを配置することを考えましたが、それでも主要な質問であるステータスバー領域で折りたたまれます。)

メインアクティビティxml:

<Android.support.design.widget.AppBarLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:theme="@style/AppTheme.AppBarOverlay">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim = "?attr/colorPrimary"
        app:statusBarScrim="?attr/colorAccent" --------> not changing
        Android:id="@+id/my_ctl">


        <ImageView
            Android:id="@+id/image"
            Android:src="@drawable/flights"
            Android:layout_width="match_parent"
            Android:layout_height="250dp"
            Android:scaleType="centerCrop"
            Android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax"
            />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:layout_collapseMode="pin" />


    </Android.support.design.widget.CollapsingToolbarLayout>

</Android.support.design.widget.AppBarLayout>


<Android.support.v4.widget.NestedScrollView
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:clipToPadding="false"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" >

    <include layout="@layout/content_main" />

</Android.support.v4.widget.NestedScrollView>

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_gravity="bottom|end"
    Android:layout_margin="@dimen/fab_margin"
    Android:src="@Android:drawable/ic_dialog_email" />

</Android.support.design.widget.CoordinatorLayout>

MainActivity.Java:

  CollapsingToolbarLayout ctl = (CollapsingToolbarLayout) findViewById(R.id.my_ctl);
    //ctl.setContentScrimColor(Color.RED);
    ctl.setStatusBarScrimColor(Color.BLUE);  --------> not working
    ctl.setTitle("blabla");
23
Roee
app:statusBarScrim="@Android:color/transparent"
35
wklbeta

Android:fitsSystemWindows="true"をAppBarLayoutに追加してみてください。それは私のために働いた。

6
Vineet Ashtekar

ポイント#3の場合:ツールバーで透明な背景を追加します

Android:background = "@ Android:color/transparent"

 <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:layout_collapseMode="pin"
            Android:background="@Android:color/transparent" />
1
Allan Ramírez

2)には 既知の問題 があります

今のところ、プログラムでツールバーの背景色を設定しています

    mAppBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
        @Override
        public void onStateChanged(AppBarLayout appBarLayout, State state) {
            Toolbar toolbar = (Toolbar) mAppBarLayout.findViewById(R.id.toolbar_top);
            int toolbarBackground = (state == AppBarStateChangeListener.State.COLLAPSED) ? R.color.color_collapsed : R.color.color_non_collapsed;
            toolbar.setBackgroundColor(ContextCompat.getColor(DealsOptionsActivity.this, toolbarBackground));
        }

    });

これはもちろん簡単な実装です。最適化できます。

1
kingston

ソリューションを探していて、それを見つけました。まず、アクティビティテーマをAppThemeNoActionBarLight.SimpleCoordinatorThemeに設定します

ご覧ください:

<!-- Base application theme. -->
<style name="AppThemeNoActionBarLight" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="AppThemeNoActionBarLight.SimpleCoordinatorTheme">
    <item name="Android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="Android:statusBarColor">@Android:color/transparent</item>
</style>

次に、このレイアウトサンプルを試してください。

<?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"
xmlns:tools="http://schemas.Android.com/tools"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:background="@Android:color/background_light"
Android:fitsSystemWindows="true"
>

<Android.support.design.widget.AppBarLayout
    Android:id="@+id/main.appbar"
    Android:layout_width="match_parent"
    Android:layout_height="300dp"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    Android:fitsSystemWindows="true"
    >

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/main.collapsing"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp"
        app:title="@string/app_name"
        >

        <ImageView
            Android:id="@+id/main.backdrop"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:scaleType="centerCrop"
            Android:fitsSystemWindows="true"
            Android:src="@drawable/material_flat"
            app:layout_collapseMode="parallax"
            tools:ignore="ContentDescription"
            />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/main.toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:title="Test"

            />
    </Android.support.design.widget.CollapsingToolbarLayout>
</Android.support.design.widget.AppBarLayout>

<Android.support.v4.widget.NestedScrollView
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    >

    <TextView
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:textSize="20sp"
        Android:lineSpacingExtra="8dp"
        Android:text="@string/lorem"
        Android:padding="@dimen/activity_horizontal_margin"
        />
</Android.support.v4.widget.NestedScrollView>

<Android.support.design.widget.FloatingActionButton
    Android:layout_height="wrap_content"
    Android:layout_width="wrap_content"
    Android:layout_margin="@dimen/activity_horizontal_margin"
    Android:src="@drawable/ic_comment_24dp"
    app:layout_anchor="@id/main.appbar"
    app:layout_anchorGravity="bottom|right|end"
    />
0
Taras Vovkovych