没有 CoordinatorLayout 的编程可折叠/可扩展工具栏？

Question

I want to have a toolbar that can be expanded when the user clicks on a certain item in a layout. However, I don't need to have a toolbar that can collapse when scrolling, so I don't see the use of the CoordinatorLayout . The problem is that calling setExpanded(false) on my AppBarLayout doesn't do anything. Is there a way to just have a toolbar that I can expand or collapse programmatically without nesting it inside a CoordinatorLayout ? I don't want to use that layout because there are multiple children in my root layout and I don't need special behavior on scrolling.

Answer 1

Make a custom view.

ExpandableToolbar.java

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.LayerDrawable;
import android.util.AttributeSet;
import android.view.ViewGroup;

import androidx.annotation.Nullable;
import androidx.appcompat.widget.Toolbar;

public class ExpandableToolbar extends Toolbar {

    private Drawable expandedDrawable;
    private boolean isExpanded = false;

    public ExpandableToolbar(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initToolbar(attrs);
    }

    private void initToolbar(AttributeSet attrs) {
        TypedArray a = getContext().getTheme().obtainStyledAttributes(
                attrs,
                R.styleable.ExpandableToolbar,
                0, 0);

        try {
            expandedDrawable = a.getDrawable(R.styleable.ExpandableToolbar_expandedDrawable);
        } finally {
            a.recycle();
        }

        if (expandedDrawable == null) {
            expandedDrawable = new ColorDrawable(Color.GRAY);
        }
        expandedDrawable.setAlpha(0);

        Drawable[] drawables = { getBackground(), expandedDrawable };
        LayerDrawable layer = new LayerDrawable(drawables);

        setBackground(layer);
    }

    public void expand() {
        ValueAnimator anim = ValueAnimator.ofFloat(0f, 1f);
        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (float) animation.getAnimatedValue();
                updateAnimation(value);
            }
        });
        anim.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                isExpanded = true;
            }

            @Override
            public void onAnimationEnd(Animator animation, boolean isReverse) {
                isExpanded = true;
            }
        });
        anim.start();
    }

    public void collapse() {
        ValueAnimator anim = ValueAnimator.ofFloat(1f, 0f);
        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (float) animation.getAnimatedValue();
                updateAnimation(value);
            }
        });
        anim.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                isExpanded = false;
            }

            @Override
            public void onAnimationEnd(Animator animation, boolean isReverse) {
                isExpanded = false;
            }
        });
        anim.start();
    }

    private void updateAnimation(float value) {
        ViewGroup.LayoutParams params = getLayoutParams();
        float heightProgress = 56f + (value * (112f - 56f));
        params.height = (int) (heightProgress * getResources().getDisplayMetrics().density);
        setLayoutParams(params);

        expandedDrawable.setAlpha((int) (value * 255));
    }

    public boolean isExpanded() {
        return isExpanded;
    }
}

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ExpandableToolbar">
        <attr name="expandedDrawable" format="reference|color"/>
    </declare-styleable>
</resources>

Usage:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <marabillas.loremar.expandabletoolbar.ExpandableToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:title="My Toolbar"
        app:titleTextColor="#fff"
        app:menu="@menu/main_menu"
        app:expandedDrawable="@drawable/city_buildings"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <Button
        android:id="@+id/button"
        android:layout_width="92dp"
        android:layout_height="41dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar" />

</androidx.constraintlayout.widget.ConstraintLayout>

public class MainActivity extends AppCompatActivity {

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

        final ExpandableToolbar toolbar = findViewById(R.id.toolbar);
        final Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (toolbar.isExpanded()) {
                    toolbar.collapse();
                } else {
                    toolbar.expand();
                }
            }
        });

        setSupportActionBar(toolbar);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main_menu, menu);
        return super.onCreateOptionsMenu(menu);
    }
}

Result: