简体   繁体   English

CollapseAppbar + Image Overlay(系统主题)

[英]CollapseAppbar + Image Overlay (The system theme)

I was using the Default "CollapsingAppbar" then, after observing some design, i started wondering how can make the layout works in this way, with the imageview overlay the "Statusbar", where we can see notifications, battery and so on.我使用的是默认的“CollapsingAppbar”,然后,在观察了一些设计之后,我开始想知道如何使布局以这种方式工作,imageview 覆盖在“状态栏”上,我们可以在其中看到通知、电池等。

First Example 第一个例子

Second example 第二个例子

Here is my XML with no sucess这是我的 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="192dp"
        android:theme="@style/Theme.Application.AppBarOverlay">

        <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:layout_scrollInterpolator="@android:interpolator/decelerate_quad"
            app:toolbarId="@+id/toolbar">

            <ImageView
                android:id="@+id/app_bar_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"

                android:src="@drawable/street_map"
                app:layout_collapseMode="parallax" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:theme="@style/Theme.Application.PopupOverlay"
                app:layout_collapseMode="pin" />

        </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.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context=".MainActivities.StoreActivity" >

            <com.google.android.material.tabs.TabLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <com.google.android.material.tabs.TabItem
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Monday" />

                <com.google.android.material.tabs.TabItem
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Tuesday" />

                <com.google.android.material.tabs.TabItem
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Wednesday" />
            </com.google.android.material.tabs.TabLayout>
        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.core.widget.NestedScrollView>


</androidx.coordinatorlayout.widget.CoordinatorLayout>

And here is my Manifest这是我的清单

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.application">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Application.NoActionBar">

        <activity android:name=".MainActivities.SplashScreen">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".MainActivities.StoreActivity" />

        <activity android:name=".MainActivities.MainActivity" />

    </application>

</manifest>

I tried to change the Appbar with Overlay THEME, but no sucess, and i did the same with the toolbar with PopupOverlay.我尝试使用 Overlay THEME 更改 Appbar,但没有成功,我对带有 PopupOverlay 的工具栏做了同样的事情。

Well, after some attempts it fixed by himself.好吧,经过一些尝试,它自己修复了。 hehehe, Humm:, I think it was because i put a lot of elements with:呵呵,嗯:,我想是因为我放了很多元素:

android:fitsSystemWindows="true" and maybe... android:theme="@style/ThemeOverlay.AppCompat" android:fitsSystemWindows="true" 也许... android:theme="@style/ThemeOverlay.AppCompat"

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM