Collapsing Toolbar

Hello.
In this tutorial I will show you how to implement that awesome collapsing toolbar in your android application.

First, add dependencies in your gradle:

build.gradle(Module:app)
implementation 'com.android.support:cardview-v7:26.1.0'
implementation 'com.android.support:design:26.1.0'

 

Next, build layout in your activities xml file:

activity_main.xml
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    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:layout_alignParentTop="true"
    tools:context="com.example.bodhi64.virtuozatutorials.MainActivity">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true"
        >

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="350dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleTextAppearance="@android:color/transparent"
            android:fitsSystemWindows="true"
            >

            <ImageView
                app:layout_collapseMode="parallax"
                android:src="@drawable/fireworks"
                android:contentDescription="@string/app_name"
                android:scaleType="centerCrop"
                android:layout_width="match_parent"
                android:layout_height="350dp" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                android:title="@string/recent_news"
                app:layout_collapseMode="pin"
                />


        </android.support.design.widget.CollapsingToolbarLayout>



    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        >

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            app:cardElevation="5dp"
            app:cardUseCompatPadding="true"

            >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                >

                <TextView
                    android:padding="12dp"
                    android:textSize="20sp"
                    android:layout_marginTop="12dp"
                    android:textStyle="bold"
                    android:textColor="@color/colorPrimaryText"
                    android:text="@string/recent_news"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

                <LinearLayout
                    android:orientation="horizontal"
                    android:padding="12dp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <ImageView
                        android:contentDescription="@string/app_name"
                        android:src="@drawable/ic_clock"
                        android:layout_weight="1"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content" />

                    <TextView
                        android:layout_gravity="center_vertical"
                        android:padding="12dp"
                        android:textSize="14sp"
                        android:textStyle="bold"
                        android:textColor="@color/colorPrimaryText"
                        android:text="@string/publish_date"
                        android:layout_width="0dp"
                        android:layout_weight="9"
                        android:layout_height="wrap_content" />

                </LinearLayout>

                <TextView
                    android:padding="12dp"
                    android:textSize="13sp"
                    android:lineSpacingMultiplier="1.5"
                    android:layout_marginTop="12dp"
                    android:text="@string/in_news"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    />


            </LinearLayout>


        </android.support.v7.widget.CardView>

    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:src="@drawable/ic_action_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp"
        app:layout_anchor="@id/app_bar_layout"
        app:layout_anchorGravity="bottom|right|end"
        />
</android.support.design.widget.CoordinatorLayout>

NOTE: Please make sure to add all the strings, drawables and everything else.

In your main activity, copy and paste this code:

MainActivity.java
public class MainActivity extends AppCompatActivity {


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        if(getSupportActionBar() != null)
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    }


}

And that is all.
Easy to add, fun to use, awesome looks.
Cheers.

Share with your friends