Create UI animation like Google trend Using FancyTrendView

0
190

I take assume that you’re aware from Google trends which is a public web facility of Google Inc., based on Google Search, that shows how often a particular search-term is entered relative to the total search-volume across various regions of the world, and in various languages.

I found a cool UI animation on that website. You can see demo above or see live here. After looking for this animation i found a great library named FancyTrendView which give the custom UI view including animation and typing text.

How to create UI animation like Google trend Using FancyTrendView
How to create UI animation like Google trend Using FancyTrendView

Wanna try that FancyTrendView animation on Your mobile

You can download the latest sample APK from this repo here:

Download demo here

It’s also on Google Play:

Get it on Google Play

Gradle Dependency

Library

dependencies {
  // ... other dependencies here
    compile 'com.fantasy1022.fancytrendview:library:0.8.2'
}

How to use FancyTrendView library

XML

<com.fantasy1022.fancytrendview.FancyTrendView
        android:id="@+id/googleTrendView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:colorArray="@array/trendcolors"
        app:cursorBlinkInterval="300"
        app:cursorBlinkTimesAfterTypeDone="10"
        app:cursorWidth="3dp"
        app:flipDirection="random"
        app:flipSpeed="1000"
        app:textArray="@array/demoTrendArray"
        app:textChangeType="random"
        app:textSize="10sp"
        app:typedSpeed="200" />

1colorArray

Use it to define color code.

<item name="material_blue" type="color">#FF4285F4</item>
    <item name="material_red" type="color">#FFea4335</item>
    <item name="material_green" type="color">#FF34a852</item>
    <item name="material_yellow" type="color">#FFfabb05</item>

    <integer-array name="trendcolors">
        <item>@color/material_blue</item>
        <item>@color/material_red</item>
        <item>@color/material_green</item>
        <item>@color/material_yellow</item>
    </integer-array>

2cursorBlinkInterval

This attribute indicates type cursor blink interval.

app:cursorBlinkInterval="300" //ms

3cursorBlinkTimesAfterTypeDone

This attribute indicates how many times for cursor blinking after type text done.

app:cursorBlinkTimesAfterTypeDone="10" //times

4cursorWidth

This attribute indicates how width about cursor.

app:cursorWidth="3dp"

5flipDirection

This attribute indicates the changing trend direction inclunding random, up, down, left and right. The random direction includes other four direction.

app:flipDirection="random" // random, up, down, left and right.

6flipSpeed

This attribute indicates how much time in flip trasition between two trend. Much time means the flip is slower.

app:flipSpeed="1000" //ms

7textArray

Use it to define trend text.

<string-array name="demoTrendArray" translatable="false">
        <item>Google</item>
        <item>Apple</item>
        <item>IBM</item>
        <item>Microsoft</item>
        <item>HTC</item>
        <item>Amazon</item>
        <item>OPPO</item>
        <item>Asus</item>
    </string-array>

8textChangeType

This attribute indicates text array showing order.

app:textChangeType="random" //random, increase, decrease

9textSize

This attribute indicates text size

app:textSize="10sp"

10typedSpeed

This attribute indicates the interval between two character.

app:typedSpeed="200" //ms

Hope you enjoy this library tutorial. Please comment us.

Share your thoughts

Loading Facebook Comments ...
Loading Disqus Comments ...