“This is the third day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021.”

CollapsingToolbarLayout

As the name suggests, this is a layout that functions on the Toolbar, but remember that CollapsingToolbarLayout does not exist alone, it must be used as a direct child of AppBarLayout, The AppBarLayout must be a CoordinatorLayout that listens for the events of the child controls and responds appropriately. So we can get:

      
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:id="@+id/appbar">
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="? attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Copy the code

Then to make the title bar more sophisticated, place an image and a Toolbar in CollapsingToolbarLayout

      
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:id="@+id/appbar">
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="? attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:id="@+id/fruit_image_view"/>
            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="? attr/actionBarSize"
                android:id="@+id/toolbar"
                app:layout_collapseMode="pin"/>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>
Copy the code

So we have a layout_collapseMode property which means that the collapse is in the fold, parallax means that there’s a dislocation in the fold, and PIN means that it stays the same.

NestedScrollView

With the title bar complete, it’s time to start writing the fruit content. NestedScrollView is used here, which is the same as ScrollView and RecyclerView to view the data out of the screen by scrolling. Again, as in RecyclerView, you need to specify a layout behavior. Since NestedScrollView, like ScrollView, allows only one direct child layout, you can nest a LinearLayout as its direct child. Then put the specific content in the LinearLayout.

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <androidx.cardview.widget.CardView
                android:layout_marginTop="35dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginBottom="15dp"
                app:cardCornerRadius="4dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <TextView
                    android:id="@+id/fruit_content_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp"/>
            </androidx.cardview.widget.CardView>
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>
Copy the code

Add a layout behavior here (same as RecyclerView before). And just to make the most of what I’ve learned, I’m going to add a hover button.

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:src="@drawable/ic_comment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|end"/>
Copy the code

This is the current renderingThe next step is to fill in the data with logical code.

MainActivity – FruitActivity

FruitActivity doesn’t get the data because it gets the data from the MainActivity. So you need to send the data to the MainActivity using an Intent.

        ViewHolder viewHolder=new ViewHolder(view);
        viewHolder.cardView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent=new Intent(context,FruitActivity.class);
                int position=viewHolder.getAdapterPosition();
                Fruit fruit=FruitList.get(position);
                intent.putExtra("fruitName",fruit.getName());
                intent.putExtra("fruitId",fruit.getId()); context.startActivity(intent); }});Copy the code

The option here is to bind the cardView click event each time the ViewHolder is generated, passing the ID and name to FruitAcitivity.

FruitActivity does data processing.

       ImageView imageView=findViewById(R.id.fruit_image_view);
        TextView textView=findViewById(R.id.fruit_content_text);
        Toolbar toolbar=findViewById(R.id.toolbar);
        // Replace ActionBar with toolbar
        setSupportActionBar(toolbar);
        ActionBar actionBar=getSupportActionBar();
        if(actionBar! =null){
            actionBar.setDisplayHomeAsUpEnabled(true);
        }
        CollapsingToolbarLayout collapsingToolbarLayout=findViewById(R.id.collapsing_toolbar);
        Intent intent=getIntent();
        String name=intent.getStringExtra(fruitName);
        int id=intent.getIntExtra(fruitId,0);
        // Use Glide to load images
        Glide.with(this).load(id).into(imageView);
        textView.setText(ExtraText(name));
        // Set the title for the collapsible title bar.
        collapsingToolbarLayout.setTitle(name);
Copy the code

Use your status bar space.

Add the fitsSystemWindows attribute to the parent layout of the ImageView and to itself.

      
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    >
    <com.google.android.material.appbar.AppBarLayout
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:id="@+id/appbar">
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:fitsSystemWindows="true"
            android:id="@+id/collapsing_toolbar"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:contentScrim="? attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:fitsSystemWindows="true"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:id="@+id/fruit_image_view"/>
            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="? attr/actionBarSize"
                android:id="@+id/toolbar"
                app:layout_collapseMode="pin"/>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <androidx.cardview.widget.CardView
                android:layout_marginTop="35dp"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:layout_marginBottom="15dp"
                app:cardCornerRadius="4dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <TextView
                    android:id="@+id/fruit_content_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp"/>
            </androidx.cardview.widget.CardView>
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:src="@drawable/ic_comment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|end"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Copy the code

Customize a theme for FruitActivity.

      
<resources>
    <style name="FruitActivityTheme" parent="Theme.ListView">
        <item name="android:statusBarColor">
            @android:color/transparent
        </item>
    </style>
</resources>
Copy the code

Introduce the topic

 <activity android:name=".FruitActivity" android:theme="@style/FruitActivityTheme">
Copy the code