androidandroid-toolbarandroid-coordinatorlayoutandroid-appbarlayout
Custom toolbar in CoordinatorLayout
I am trying to get this design, but the content is not collapsing. I need tabs to be under the toolbar when scrolling, currently, I set two buttons for collapsing layout for testing when, but the content is not scrolling now. What am I doing wrong? Maybe I should add toolbar outside the CoordinatorLayout?
<?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"
tools:context=".ui.fragments.MainFragment">
<android.support.design.widget.AppBarLayout 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:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginTop="@dimen/appBarTopMargin"
android:elevation="@dimen/toolbarElevation"
app:contentInsetStart="0dp"
tools:ignore="UnusedAttribute">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/img_overflow"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentEnd="true"
android:scaleType="center"
android:src="@drawable/icon_menu_border"
tools:ignore="ContentDescription" />
<ImageView
android:id="@+id/img_message"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:scaleType="center"
android:src="@drawable/icon_message"
tools:ignore="ContentDescription" />
<ImageView
android:id="@+id/img_search"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:layout_toStartOf="@id/img_overflow"
android:scaleType="center"
android:src="@drawable/icon_search"
tools:ignore="ContentDescription" />
<TextView
android:id="@+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toEndOf="@id/img_message"
android:layout_toStartOf="@id/img_overflow"
android:fontFamily="sans-serif-medium"
android:gravity="center_vertical"
android:text="@string/vouch"
android:textColor="@color/action_bar_color"
android:textSize="18sp" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false"
app:toolbarId="@+id/toolbar">
<android.support.constraint.ConstraintLayout
android:id="@+id/profile_relative"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="none">
<Button
android:id="@+id/btn_view_contacts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="View Contacts"
android:textAllCaps="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/btn_edit_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Edit Profile"
android:textAllCaps="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.9"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:layout_gravity="bottom"
android:background="@android:color/transparent"
app:tabGravity="fill"
app:tabIndicatorColor="@android:color/holo_orange_dark"
app:tabMaxWidth="0dp"
app:tabMode="fixed"
app:tabSelectedTextColor="@android:color/black"
app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
app:tabTextColor="@android:color/black" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
Solution
Try This if you does not want to make Toolbar sticky means it will collapse with CollapsingToolbar.
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginTop="@dimen/appBarTopMargin"
android:elevation="@dimen/toolbarElevation"
app:layout_scrollFlags="scroll|exitUntilCollapsed" <== Add this line
app:contentInsetStart="0dp"
tools:ignore="UnusedAttribute">
if you want Toolbar to be sticky. then, move your Toolbarout of the main CoordinateLayout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context=".ui.fragments.MainFragment">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginTop="@dimen/appBarTopMargin"
android:elevation="@dimen/toolbarElevation"
app:contentInsetStart="0dp"
tools:ignore="UnusedAttribute">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/img_overflow"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentEnd="true"
android:scaleType="center"
android:src="@drawable/icon_menu_border"
tools:ignore="ContentDescription" />
<ImageView
android:id="@+id/img_message"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:scaleType="center"
android:src="@drawable/icon_message"
tools:ignore="ContentDescription" />
<ImageView
android:id="@+id/img_search"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:layout_toStartOf="@id/img_overflow"
android:scaleType="center"
android:src="@drawable/icon_search"
tools:ignore="ContentDescription" />
<TextView
android:id="@+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toEndOf="@id/img_message"
android:layout_toStartOf="@id/img_overflow"
android:fontFamily="sans-serif-medium"
android:gravity="center_vertical"
android:text="@string/vouch"
android:textColor="@color/action_bar_color"
android:textSize="18sp" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout 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:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false"
app:toolbarId="@+id/toolbar">
<android.support.constraint.ConstraintLayout
android:id="@+id/profile_relative"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="none">
<Button
android:id="@+id/btn_view_contacts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="View Contacts"
android:textAllCaps="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/btn_edit_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Edit Profile"
android:textAllCaps="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.9"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:layout_gravity="bottom"
android:background="@android:color/transparent"
app:tabGravity="fill"
app:tabIndicatorColor="@android:color/holo_orange_dark"
app:tabMaxWidth="0dp"
app:tabMode="fixed"
app:tabSelectedTextColor="@android:color/black"
app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
app:tabTextColor="@android:color/black" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
- java.lang.IllegalStateException: Reading a state that was created after the snapshot was taken or in a snapshot that has not yet been applied
- Android Studio gradle takes too long to build
- Why "This app has been built with an incorrect configuration" error occured in some phones?
- How to add line divider for menu item Android
- How to define shape for Button in Jetpack compose when using Material design 3
- Disable zoom on input focus in Android webpage
- Get current screen in Navigation Type-safety Jetpack Compose
- How do I join these tables to relate chapters, sub-chapters and text entries?
- How to recompile with -Xlint:deprecation
- Disabling the fullscreen editing view for soft keyboard input in landscape?
- android studio 0.4.2: Gradle project sync failed error
- How to embed a powerbi report within a flutter android application?
- What is the use of androidx.legacy:legacy-support-v4: dependency
- No tests found for given includes Error, when running Parameterized Unit test in Android Studio
- How to use Trading view in react native Expo?
- How to reduce App (.apk) Size
- QR code scanning with Expo v.51 is not working
- How to create a text field input with mask in jetpack compose?
- Kotlin extract time form the date
- Updated compileSdkVersion to 34 in React Native project, but unable to connect to Metro server
- Error in my flutter project after trying to change sdk target
- Expo only working on web and fails on Android with multiple issues
- How to detect a long touch pressure with javascript for android and iphone?
- Flutter Error: 'UnmodifiableUint8ListView' is restricted and can't be extended or implemented
- App is not shown in Alarms & Reminders besides setting the SCHEDULE_EXACT_ALARM permission in manifest
- Excluding Vulkan validation library from Android debug build that uses Flutter
- Play Console Warning: Update your Play Core Maven dependency to an Android 14 compatible version
- TextField data is not getting clear
- Unity game crashes cos of Google Admob
- Why AVD Manager options are not showing in Android Studio