You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何让CoordinatorLayout中的AppBarLayout占屏幕高度的25%?

Solution: Make AppBarLayout take 25% of screen height in CoordinatorLayout

Got it, let's fix this! Since CoordinatorLayout doesn't natively support percentage-based dimensions like ConstraintLayout does, we can wrap your AppBarLayout in a full-screen ConstraintLayout (inside the CoordinatorLayout) to leverage its guideline feature. Here's the adjusted layout:

Modified Layout Code

<?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"
    tools:context=".MainActivity">

    <!-- ConstraintLayout wrapper to handle percentage height logic -->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- Horizontal guideline at 25% of screen height -->
        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline_25_percent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.25" />

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/fragprofile_app_bar"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:background="@drawable/background_gradient"
            android:orientation="vertical"
            app:layout_constraintBottom_toTopOf="@id/guideline_25_percent"
            app:layout_constraintTop_toTopOf="parent">

            <TextView
                android:id="@+id/tv_app_name"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_gravity="center"
                android:drawablePadding="3dp"
                android:fontFamily="@font/concert_one"
                android:gravity="center"
                android:textColor="@color/colorWhite"
                android:textSize="24sp"
                android:layout_weight="1"
                app:layout_scrollFlags="scroll|enterAlways" />

            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tablayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabIndicatorColor="@color/colorWhite"
                app:tabIndicatorHeight="3dp"
                app:tabSelectedTextColor="@color/colorWhite"
                app:tabTextColor="@color/colorWhite60PercentOpacity" />

        </com.google.android.material.appbar.AppBarLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorWhite"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Key Changes Breakdown

  • ConstraintLayout Wrapper: We added a full-screen ConstraintLayout to host the AppBarLayout and guideline. This lets us use percentage positioning while keeping CoordinatorLayout as the root (so your ViewPager's scrolling behavior still works).
  • 25% Guideline: The horizontal guideline uses app:layout_constraintGuide_percent="0.25" to mark the 25% height point of the screen.
  • AppBarLayout Height: We set the AppBarLayout's height to 0dp and constrained its top to the parent's top, bottom to the guideline. This forces it to fill exactly the top 25% of the screen.
  • Fixed Internal Layout: Removed the invalid layout_constraint attributes from the TextView and TabLayout (they don't work inside AppBarLayout, which is a LinearLayout). Instead, we used layout_weight="1" on the TextView to let it take up the available space above the TabLayout, keeping the TabLayout anchored to the bottom of the AppBarLayout.

This approach avoids hardcoded dp values and keeps your CoordinatorLayout-based scrolling functionality intact.

内容的提问来源于stack exchange,提问作者WHOATEMYNOODLES

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.29 11:52:31