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](https://www.tellmehow.co/wp-content/uploads/2017/05/showcase.gif)
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.
Share your thoughts