Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Custom Collapsing Toolbar smooth title resizing

I'm using a custom Collapsing Toolbar Layout, which has a Title and a Subtitle.
I got the title to collapse and animate on a curved path, but the part of the title becoming smaller as collapsing isn't smooth. It resizes in a jagged sort of way.
This is my behavior that is responsible for moving and resizing the title:

public class ViewBehavior : CoordinatorLayout.Behavior
{
    private Context mContext;

    private int mStartMarginRight;
    private int mEndMargintRight;
    private int mMarginLeft;
    private int mStartMarginBottom;
    private bool isHide;
    private static float SCALE_MINIMUM = 0.5f;
    public ViewBehavior(Context context, IAttributeSet attrs)
    {
        mContext = context;
    }

    public override bool LayoutDependsOn(CoordinatorLayout parent, Java.Lang.Object child, View dependency)
    {
        return dependency is AppBarLayout;
    }

    public override bool OnDependentViewChanged(CoordinatorLayout parent, Java.Lang.Object child, View dependency)
    {
        ShouldInitProperties((child as HeaderView), dependency);

        int maxScroll = ((AppBarLayout)dependency).TotalScrollRange;
        float percentage = System.Math.Abs(dependency.GetY()) / (float)maxScroll;

        float childPosition = dependency.Height
                + dependency.GetY()
                - (child as View).Height
                - (getToolbarHeight() - (child as View).Height) * percentage / 2;


        childPosition = childPosition - mStartMarginBottom * (1f - percentage);

        CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams)(child as View).LayoutParameters;
        lp.RightMargin = (int)(100 * System.Math.Sin(percentage * System.Math.PI)) + mStartMarginRight / 2 + mEndMargintRight / 2;
        lp.LeftMargin = mMarginLeft;
        (child as View).LayoutParameters = lp;

        (child as View).SetY(childPosition);
        float x = (child as HeaderView).Title.TextSize;
        //Here is the algorithm for setting the text size
        (child as HeaderView).Title.SetTextSize(ComplexUnitType.Sp, 36 * (1 - percentage / 2));
        (child as HeaderView).SubTitle.SetTextSize(ComplexUnitType.Sp, 26 * (1 - percentage / 2));

        var toolbarTitleSize = (int)TypedValue.ApplyDimension(ComplexUnitType.Sp, 18, Application.Context.Resources.DisplayMetrics);
        var toolbarSubTitleSize = (int)TypedValue.ApplyDimension(ComplexUnitType.Sp, 16, Application.Context.Resources.DisplayMetrics);
        if ((child as HeaderView).Title.TextSize < toolbarTitleSize)
            (child as HeaderView).Title.SetTextSize(ComplexUnitType.Sp, 18);
        if ((child as HeaderView).SubTitle.TextSize < toolbarSubTitleSize)
            (child as HeaderView).SubTitle.SetTextSize(ComplexUnitType.Sp, 14);
        if (Build.VERSION.SdkInt < BuildVersionCodes.Lollipop)
        {
            if (isHide && percentage < 1)
            {
                (child as View).Visibility = ViewStates.Visible;
                isHide = false;
            }
            else if (!isHide && percentage == 1)
            {
                (child as View).Visibility = ViewStates.Gone;
                isHide = true;
            }
        }
        return true;
    }


    public void ShouldInitProperties(HeaderView child, View dependency)
    {

        if (mStartMarginRight == 0)
            mStartMarginRight = mContext.Resources.GetDimensionPixelOffset(Resource.Dimension.header_view_start_margin_right);

        if (mEndMargintRight == 0)
            mEndMargintRight = mContext.Resources.GetDimensionPixelOffset(Resource.Dimension.header_view_end_margin_right);

        if (mStartMarginBottom == 0)
            mStartMarginBottom = mContext.Resources.GetDimensionPixelOffset(Resource.Dimension.header_view_start_margin_bottom);

        if (mMarginLeft == 0)
            mMarginLeft = mContext.Resources.GetDimensionPixelOffset(Resource.Dimension.header_view_end_margin_left);

    }


    public int getToolbarHeight()
    {
        int result = 0;
        TypedValue tv = new TypedValue();
        if (mContext.Theme.ResolveAttribute(Android.Resource.Attribute.ActionBarSize, tv, true))
        {
            result = TypedValue.ComplexToDimensionPixelSize(tv.Data, mContext.Resources.DisplayMetrics);
        }
        return result;
    }
}

How can I change the algorithm so it should resize in a smoother fashion?

Edit - Video:
https://youtu.be/j6LseSW6h1s

like image 519
amitairos Avatar asked Feb 07 '17 10:02

amitairos


2 Answers

As mentioned by others scaling via textSize doesn't work well on Android within animations since it isn't accurate enough (it rounds up the decimal values to integers).

If it fulfills your need you should perform your animation with the scaleX/scaleY attributes, e.g.:

float scale = 1 - percentage * SCALE_MINIMUM;
(child as HeaderView).Title.SetScaleX(scale);
(child as HeaderView).Title.SetScaleY(scale);
(child as HeaderView).SubTitle.SetScaleX(scale);
(child as HeaderView).SubTitle.SetScaleY(scale);
like image 108
dipdipdip Avatar answered Sep 20 '22 23:09

dipdipdip


The problem you have is that the even if you calculate scales as demical values, they become integer values in the TextView. You should enable both LINEAR_TEXT_FLAG and SUBPIXEL_TEXT_FLAG flags in your TextView's Paint class to achieve smooth scaling and positioning.

Something like this:

yourTextView.Paint.SubpixelText = true;
yourTextView.Paint.LinearText = true;
like image 41
Timo Salomäki Avatar answered Sep 24 '22 23:09

Timo Salomäki