{"id":3628,"date":"2025-04-14T05:49:51","date_gmt":"2025-04-14T05:49:51","guid":{"rendered":"https:\/\/alsaeeddev.com\/?p=3628"},"modified":"2025-04-14T06:20:15","modified_gmt":"2025-04-14T06:20:15","slug":"collapsing-toolbar-layout-in-android-java","status":"publish","type":"post","link":"https:\/\/alsaeeddev.com\/shop\/collapsing-toolbar-layout-in-android-java\/","title":{"rendered":"Collapsing Toolbar Layout in Android Java"},"content":{"rendered":"

Introduction<\/strong>
\nIn this tutorial, we will implement a Collapsing Toolbar Layout in Android Java using AppBarLayout<\/code> and NestedScrollView<\/code>. The CollapsingToolbarLayout<\/code> provides a smooth collapsing effect when the user scrolls through a NestedScrollView<\/code>.<\/p>\n

Prerequisites<\/h3>\n
    \n
  • Android Studio installed<\/li>\n
  • Basic knowledge of XML and Java\/Kotlin<\/li>\n
  • A working Android project<\/li>\n<\/ul>\n

    Step 1: activity_main.xml<\/h3>\n

    Create an activity_main.xml<\/code> file with the following code:<\/p>\n

    <?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\">\r\n\r\n    <com.google.android.material.appbar.AppBarLayout\r\n        android:id=\"@+id\/appBarLayout\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"300dp\"\r\n        android:theme=\"@style\/ThemeOverlay.AppCompat.Dark.ActionBar\">\r\n\r\n        <com.google.android.material.appbar.CollapsingToolbarLayout\r\n            android:id=\"@+id\/collapsingToolbar\"\r\n            android:layout_width=\"match_parent\"\r\n            android:layout_height=\"match_parent\"\r\n            app:contentScrim=\"@color\/black\"\r\n            app:layout_scrollFlags=\"scroll|exitUntilCollapsed\"\r\n            android:fitsSystemWindows=\"true\"\r\n            app:titleEnabled=\"true\"\r\n            app:expandedTitleTextAppearance=\"@android:color\/transparent\">\r\n\r\n            <ImageView\r\n                android:id=\"@+id\/headerImage\"\r\n                android:layout_width=\"match_parent\"\r\n                android:layout_height=\"match_parent\"\r\n                android:alpha=\"0.6\"\r\n                android:scaleType=\"centerCrop\"\r\n                android:src=\"@drawable\/img\"\r\n                app:layout_collapseMode=\"parallax\" \/>\r\n\r\n            <androidx.appcompat.widget.Toolbar\r\n                android:id=\"@+id\/toolbar\"\r\n                android:layout_width=\"match_parent\"\r\n                android:layout_height=\"?attr\/actionBarSize\"\r\n                android:background=\"@android:color\/transparent\"\r\n                app:layout_collapseMode=\"pin\"\r\n                app:popupTheme=\"@style\/ThemeOverlay.AppCompat.Dark\" \/>\r\n\r\n        <\/com.google.android.material.appbar.CollapsingToolbarLayout>\r\n\r\n    <\/com.google.android.material.appbar.AppBarLayout>\r\n\r\n    <androidx.core.widget.NestedScrollView\r\n        android:id=\"@+id\/nested_scroll\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\"\r\n        app:layout_behavior=\"@string\/appbar_scrolling_view_behavior\">\r\n\r\n        <TextView\r\n            android:id=\"@+id\/text_view\"\r\n            android:layout_width=\"match_parent\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:padding=\"16dp\"\r\n            android:text=\"Your long text here...\" \/>\r\n    <\/androidx.core.widget.NestedScrollView>\r\n\r\n<\/androidx.coordinatorlayout.widget.CoordinatorLayout>\r\n<\/code><\/pre>\n
    Step 2: MainActivity.java<\/h3>\n
    Modify MainActivity.java<\/code> to initialize the toolbar and set the collapsing behavior:<\/p>\n
    \r\npublic class MainActivity extends AppCompatActivity {\r\n\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_main);\r\n\r\n        \/\/ Set up Toolbar\r\n        Toolbar toolbar = findViewById(R.id.toolbar);\r\n        toolbar.setTitle(\"\");\r\n        setSupportActionBar(toolbar);\r\n    \r\n\r\n        \/\/ Collapsing Toolbar Layout\r\n        CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collapsingToolbar);\r\n        AppBarLayout appBarLayout = findViewById(R.id.appBarLayout);\r\n\r\n        collapsingToolbarLayout.setTitle(\"\");\r\n\r\n\r\n\r\n        appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {\r\n            boolean isShown = true;\r\n            int scrollRange = -1;\r\n\r\n            @Override\r\n            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {\r\n                if (scrollRange == -1) {\r\n                    scrollRange = appBarLayout.getTotalScrollRange();\r\n                }\r\n\r\n                if (Math.abs(verticalOffset) >= scrollRange) {\r\n                    \/\/ Toolbar is fully collapsed\r\n                    Log.d(\"Alsaeed\", \"onOffsetChanged: COLLAPSED\");\r\n                    collapsingToolbarLayout.setTitle(\"Toolbar Title\");\r\n                    collapsingToolbarLayout.setCollapsedTitleTextColor(Color.RED);\r\n\r\n                    isShown = true;\r\n                } else if (verticalOffset == 0) {\r\n                    \/\/ Toolbar is fully expanded\r\n                    Log.d(\"Alsaeed\", \"onOffsetChanged: EXPANDED\");\r\n                    collapsingToolbarLayout.setTitle(\"\");  \/\/ Hide title when expanded\r\n                    isShown = false;\r\n                }\r\n            }\r\n        });\r\n    }\r\n\r\n \r\n}\r\n\r\n<\/code><\/pre>\n
    Step 3: Run the Application<\/h3>\n
      \n
    1. Compile and run the app.<\/li>\n
    2. Scroll through the content.<\/li>\n
    3. Observe the collapsing effect on the toolbar.<\/li>\n<\/ol>\n
      \n