首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在折叠时保持CollapsingToolbarLayout的背景作为ToolBar的背景

在折叠时保持CollapsingToolbarLayout的背景作为ToolBar的背景,可以通过以下步骤实现:

  1. 首先,确保你的布局文件中包含了CollapsingToolbarLayout和ToolBar,并且ToolBar的背景设置为透明。
代码语言:txt
复制
<androidx.coordinatorlayout.widget.CoordinatorLayout>
    <com.google.android.material.appbar.AppBarLayout>
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_height="match_parent"
                android:layout_width="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/background_image"
                app:layout_collapseMode="parallax" />

            <androidx.appcompat.widget.Toolbar
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

    <!-- Content Layout -->
</androidx.coordinatorlayout.widget.CoordinatorLayout>
  1. 接下来,在代码中找到CollapsingToolbarLayout,并设置其背景为透明。
代码语言:txt
复制
CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collapsingToolbarLayout);
collapsingToolbarLayout.setContentScrimColor(Color.TRANSPARENT);
  1. 最后,确保你的ToolBar的背景设置为透明。
代码语言:txt
复制
Toolbar toolbar = findViewById(R.id.toolbar);
toolbar.setBackgroundColor(Color.TRANSPARENT);

这样,在折叠时,CollapsingToolbarLayout的背景就会保持为ToolBar的背景。你可以根据需要自定义ToolBar的背景,例如使用图片、颜色或渐变等效果。

推荐的腾讯云相关产品:腾讯云移动后端云(MBaaS),提供了丰富的移动开发后端服务,包括用户认证、数据存储、消息推送等,可帮助开发者快速搭建稳定可靠的移动应用后端。产品介绍链接地址:https://cloud.tencent.com/product/mbaas

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

CollapsingToolbarLayout使用

CollapsingToolbarLayout 可以看到,Toolbar标题放大并在下方显示,当我们向上滑动列表,顶部Header部分图片向上折叠隐藏,标题向上移动并缩小,同时以渐显式方式显示蓝色主题...,直至高度缩为Toolbar高度并成为Toolbar背景色;向下滑动列表,Header部分逐渐显示。...关于CollapsingToolbarLayout属性在官网上可以查到,这里我只介绍案例中我们常用几个属性:title标题,布局展开放大显示在图片底部,布局折叠缩小显示在Toolbar左侧。...,效果图中所示;contentScrim内容遮罩,上下滚动图片上面显示和隐藏遮罩色,Toolbar位置背景色;通常这样设置:app:contentScrim="?...作为AppBarLayout直接子控件,CollapsingToolbarLayout包裹Header部分ImageView和Toolbar,并分别设置二者折叠模式。

2.5K60

Material Design 实战 之 第六弹 —— 可折叠式标题栏(CollapsingToolbarLayout) & 系统差异型功能实现(充分利用系统状态栏空间)

1.2 CollapsingToolbarLayout不能独立存在, 它在设计时候就被限定只能作为AppBarLayout直接子布局来使用。...不过CollapsingToolbarLayout不能独立存在,它在设计时候就被限定只能作为AppBarLayout直接子布局来使用。...app:contentScrim指定CollapsmgToolbarLayout在趋于折叠状态以及折叠之后背景色, 其实CollapsingToolbarLayout折叠之后就是一个普通Toolbar...以及, app:layout_collapseMode用于指定当前控件在CollapsingToolbarLayout折叠过程中折叠模式, 其中Toolbar指定成pin,表示在折叠过程中位置始终保持不变...向上拖动水果图片,背景图上标题会慢慢缩小,而且会产生错位偏移效果,toolbar位置和图片还会产生透明度变化等等,效果十分炫酷。 ? ?

2.3K40
  • Android开发笔记(一百三十六)可折叠工具栏布局CollapsingToolbarLayout

    所以Toolbar上部边缘是不可以往下拉,只有下部边缘才能往下拉,这样视觉效果好比Toolbar电影幕布一般缓缓向下展开。...下面是CollapsingToolbarLayout属性说明: app:contentScrim : 指定布局内部未展开背景颜色。...下面是Toolbar采用parallax模式效果图,可以看到红色区域会随着滚上去再滚下来。因为折叠系数设置为0.1,所以其效果近似于none模式。 ?...折叠效果并不仅限于和Toolbar互动,还包括标题文字样式渐变(文字大小、颜色、间距等等),连背景图片都可以实现折叠渐变效果。...下面是标题栏在折叠显示渐变图片效果图: ?

    3.3K30

    细说 AppbarLayout,如何理解可折叠 Toolbar 定制

    然后继续通过 CollapsingToolbarLayout 进一步增强 Toolbar 视觉效果。如果有人对可折叠 Toolbar 还不了解,那么请看下面的示例。 ?...attr/colorPrimary" /> 我们给 Toolbar 添加一个红色背景色...比如一个按钮,一般按钮正常时候背景色是一种颜色,而按下去时候,按钮会变化背景颜色,这就是一种反馈。 反馈提示了状态变化。...还是以按钮为例,手指按下去,按钮给反馈是背景颜色发生改变,这种直接视觉效果差异就是反馈,它提示了按钮从正常状态到按下状态变化。 那好。现在,我们再来思考 Toolbar。...CollapsingToolbarLayout 本质上是一个 FrameLayout,所以需要在 Toolbar 前面位置加入其它 View 作为内容,Content scrim 才会起作用。

    3K30

    【Android】5.x炫酷标题栏动画使用理解

    CollapsingToolbarLayout则只是一个对Toolbar进行包装,实现了可以对标题栏进行折叠功能一个基本容器,它是作为AppBarLayout直接子布局来使用。...这么说好像也不怎么好理解,题主就按自己理解讲得通俗点,举个例子: 上面那张动图里,标题栏包括了一个Toolbar、一个背景图(imageView)、一个FAB按钮。...至于CollapsingToolbarLayout则是给子控件提供了折叠功能,什么是折叠呢?...图片背景只是简单往上滑,没有之前那种视差效果了。...总结下,Toolbar、ImageView都是作为标题栏元素,AppBarLayout给它们提供可以响应滑动行为,而CollapsingToolbarLayout则是来安排谁不动,谁先动、怎么动。

    1.1K60

    通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout

    CollapsingToolbarLayout介绍 CollapsingToolbarLayout作用是提供了一个可以折叠Toolbar,它继承至FrameLayout,给它设置layout_scrollFlags...CollapsingToolbarLayout子View中可以设置这两个属性 1、ayout_collapseMode (折叠模式) - 有两个值: pin - 设置为这个模式,当CollapsingToolbarLayout...同理这是在展开Title文字特点外形设置 app:contentScrim 这是toolbar 标题工具栏停留在顶部时候背景设置 app:expandedTitleMarginStart 设置扩张时候...介绍 Toolbar 是在 Android 5.0 开始推出一个 Material Design 风格导航控件 ,Google 非常推荐大家使用 Toolbar作为Android客户端导航栏...除此之外,在设计 Toolbar 时候,Google也留给了开发者很多可定制修改余地,这些可定制修改属性在API文档中都有详细介绍,: 设置导航栏图标; 设置Applogo; 支持设置标题和子标题

    2.3K90

    在项目中运用Meterial Design实现动画效果

    这个动画效果最重要重点使用了CollapsingToolbarLayout可实现Toolbar折叠效果。...有几个重要属性需要重点介绍下: 1、app:contentScrim="#30469b" 设置当完全CollapsingToolbarLayout收缩后ToolBar背景颜色。...4、 app:layout_collapseParallaxMultiplier="0.5" CollapsingToolbarLayout滑动,子视图视觉差,可以通过这个属性来改变。...5、app:layout_collapseMode=”parallax” app:layout_collapseMode="pin" 子视图折叠模式,有两种,经常使用: pin:设置为这个模式...,当CollapsingToolbarLayout完全收缩后,Toolbar还可以保留在屏幕上,在折叠时候最后固定在顶端; parallax:视差模式,在折叠时候会有个视差折叠效果。

    40230

    界面无小事(九): 做个好看伸缩头部

    阶段效果图 发现两个问题, 由于背景是白色, 标题栏字体颜色要变成黑色, 默认就是黑色, 所以就是删除xml中主题设置. 当然, 如果你是深色背景, 这里就无需动它....="pin" app:layout_collapseMode="none" 从xml中参数说吧, 来看CollapsingToolbarLayout折叠模式....如果在此之前任何兄弟视图没有此标志, 则此值无效. exitUntilCollapsed 退出(滚动屏幕), 视图将滚动直到“折叠”. 折叠高度由视图最小高度定义。...snap 在滚动结束, 如果视图仅部分可见, 则它将被捕捉并滚动到其最近边缘. enterAlways 当进入(在屏幕上滚动), 无论滚动视图是否也在滚动, 视图都将滚动任何向下滚动事件....一旦滚动视图到达其滚动范围末尾, 该视图其余部分将滚动到视图中. 折叠高度由视图最小高度定义.

    98320

    AppBarLayout和CollapsingToolbarLayout闲谈

    背景 自从googledesign出来之后,很多控件效果实现起来已经不需要再像以前那样写自定义控件了,最近有个需求是要到页面头部标题栏折叠效果,因此,想想用CollapsingToolbarLayout...了解 CollapsingToolbarLayout主要是提供一个可折叠Toolbar容器,对容器中不同View设置layout_collapseMode折叠模式,来达到不同折叠效果。...通常CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout搭配使用折叠效果目前已经很常见了,在网上有很多例子和文章,小编整理了一下知识点。...属性contentScrim 设置当完全CollapsingToolbarLayout折叠(收缩)后背景颜色。...属性scrimAnimationDuration 设置控制Toolbar收缩,颜色变化持续时间 属性 layout_collapseMode 折叠模式,有两个值 pin:固定模式,在折叠时候最后固定在顶端

    1.7K30

    Android 沉浸式状态栏多种样式

    ---- 公共步骤: 布局文件中添加使用 Toolbar 控件(纯色 Toolbar 背景色为颜色,图片 Toolbar 样式设置背景色为图片或添加一个 ImageView 控件),在文件根布局与 Toolbar...和尚我用作为 Toolbar 背景图 background 方式处理,使用 ImageView 控件还需要单独处理图片,并有部分拉伸可能。 图片作为布局背景沉浸样式 ?...图片作为布局背景样式 ? 图片被拉伸 图片作为布局背景方式比较简单,方式与公共相同,只是不需要 Toolbar 而已。...和尚我解决方法是使用 layer-list drawable,类似于启动页初始加载样式。 <?xml version="1.0" encoding="utf-8"?...CollapsingToolbarLayout 折叠效果也是沉浸式状态,可以固定折叠状态,但是并不建议这样处理,只是偶然想到而已,各位有兴趣可以研究一下。

    1.5K41

    Android view滑动悬浮固定效果实现代码示例

    1.背景 在项目开发过程中,有时候会碰到这样需求:在滑动过程中,在某时要将子view固定在顶部(常见是将界面中tab在滑动到顶部时候进行固定)。...可以看到图中黑色边框显示内容不一致,因此ToolBar和ImageView排列顺序会对视图显示结果造成影响。...推测—— CollapsingToolbarLayout中以上三种view不同排序剖面展示效果为: 顺序:Toolbar—— ImageView—— TabLayout(设置layout_gravity...如果将Toolbar去掉,那么所有的CollapsingToolbarLayoutView都会滑出界面,此时布局就变成了普通布局了(相当于CollapsingToolbarLayout变成了CollapsingLayout...(这样也避免了:在CollapsingToolbarLayout中,因为视图折叠覆盖问题,会导致整个ImageView被TabLayout覆盖一部分而显示不完全问题。)

    86710

    CoordinatorLayout使用全解析

    ,它可以控制包含在CollapsingToolbarLayout控件(:ImageView、Toolbar)在响应layout_behavior事件作出相应scrollFlags滚动事件(移除屏幕或固定在屏幕顶端...CollapsingToolbarLayout可以通过app:contentScrim设置折叠工具栏布局颜色,通过app:statusBarScrim设置折叠状态栏颜色。...CollapsingToolbarLayout子布局有3种折叠模式(Toolbar中设置app:layout_collapseMode) off:默认属性,布局将正常显示,无折叠行为。...pin:CollapsingToolbarLayout折叠后,此布局将固定在顶部。 parallax:CollapsingToolbarLayout折叠,此布局也会有视差折叠效果。...折叠效果 如果想制造toolbar折叠效果,我们必须把Toolbar放在CollapsingToolbarLayout中: <android.support.design.widget.CollapsingToolbarLayout

    2.1K20
    领券