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.

Wanna try that FancyTrendView animation on Your mobile

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

[button color=”blue” size=”” type=”3d” target=”_blank” link=”https://github.com/fantasy1022/FancyTrendView/blob/master/sample.apk?raw=true”]Download demo here[/button]

It’s also 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" />

colorArray

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>

cursorBlinkInterval

This attribute indicates type cursor blink interval.

app:cursorBlinkInterval="300" //ms

cursorBlinkTimesAfterTypeDone

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

app:cursorBlinkTimesAfterTypeDone="10" //times

cursorWidth

This attribute indicates how width about cursor.

app:cursorWidth="3dp"

flipDirection

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.

flipSpeed

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

app:flipSpeed="1000" //ms

textArray

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>

textChangeType

This attribute indicates text array showing order.

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

textSize

This attribute indicates text size

app:textSize="10sp"

typedSpeed

This attribute indicates the interval between two character.

app:typedSpeed="200" //ms

Hope you enjoy this library tutorial. Please comment us.