Android experiment showing a sinking TextView

Overview

Titanic for Android

This library is DEPRECATED, as I don't have time to mainatin it anymore. But feel free to go through the code and copy that into your project, it still does its job.

Titanic is an Android experiment reproducing this effect.

ScreenShot

How to use

Add a TitanicTextView to your layout:

<com.romainpiel.titanic.TitanicTextView
    android:id="@+id/titanic_tv"
    android:text="@string/loading"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#212121"
    android:textSize="70sp"/>

To start the animation:

titanic = new Titanic();
titanic.start(myTitanicTextView);

You may want to keep track of the titanic instance after the animation is started if you want to stop it.

To stop it:

titanic.cancel();

How does it work?

Quick version

Titanic is a simple illusion obtained by applying an animated translation on the TextView TextPaint Shader's matrix.

Less quick version

What is a Shader?

A Shader is a class defining spans of colors. It is installed in a Paint. It's usually following a certain strategy, so you have LinearGradient shaders, RadialGradient shaders BitmapShader shaders, etc...

Shader attributes:

  • tile mode: how the shader color spans should be repeated on the x and y axis.
  • local matrix: can be used to apply transformations on the shader

Why are you bugging me with these notions?

Well because it is exaclty what we are using in this experiment.

In TitanicTextView, we create a BitmapShader containing a wave bitmap.

We set the tile mode to:

  • x: TileMode.REPEAT. The bitmap is repeated on the x-axis
  • y: Tilemode.CLAMP. The edge colors are repeated outside the bitmap on the y-axis

We have a maskX and a maskY variable that will define the position of the shader. So at every onDraw() we will take in account these values and translate the shader's local matrix at the right position.

We also have a variable offsetY to make the value maskY usable. So when maskY is equal to 0, the wave is at the center of the view.

How is it animating?

The animation is based on Android Animator API. I am not going to go through that part. Go read the documentation if you need some explanations.

In this experiment there are 2 animations.

  • One is moving the wave horizontally from 0 to 200 (the width of the wave bitmap).
  • The second one is moving the wave vertically from the bottom half to the top half.

To animate these translations, all we need is to apply an animator on maskX and maskY. The position of the shader's matrix will be updated automatically in onDraw().

I want more examples

Glad you said that. Go check out Shimmer-android. It's based on the same concept with a LinearGradient shader.

Sample

See the sample for a common use of this library.

License

Copyright 2014 Romain Piel

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
You might also like...
() An Android TextView with a shimmering effect
() An Android TextView with a shimmering effect

Shimmer for Android This library is DEPRECATED, as I don't have time to mainatin it anymore. But feel free to go through the code and copy that into y

An Android TextView that always displays an auto refreshing relative time span with respect to a reference time
An Android TextView that always displays an auto refreshing relative time span with respect to a reference time

android-ago This library provides RelativeTimeTextView, a custom TextView that takes a reference time and always displays the relative time with respe

a super textview for android
a super textview for android

SuperTextView 重磅推出SuperTextView2.x版本,属性参数相比1.x有些变化,1.x的用户升级2.x的时候请注意 1、功能描述 SuperTextView是一个功能强大的View,可以满足日常大部分布局样式,开发者可已自行组合属性配置出属于自己风格的样式!可能描述起来没有概念

Build valid HTML for Android TextView
Build valid HTML for Android TextView

HTML Builder Build valid HTML for Android TextView. Description There is a lovely method on the android.text.Html class, fromHtml(), that converts HTM

ExpandableTextView - Read More TextView for Android
ExpandableTextView - Read More TextView for Android

ExpandableTextView Read More TextView for Android Usage Gradle dependencies { implementation 'com.wayne.expandabletextview:expandable-textview:1.1

Animation effects to text, not really textview
Animation effects to text, not really textview

HTextView Animation effects with custom font support to TextView see iOS Effects see Flutter Effects Screenshot type gif Scale Evaporate Fall Line Typ

A TextView that automatically resizes text to fit perfectly within its bounds.
A TextView that automatically resizes text to fit perfectly within its bounds.

AutoFitTextView A TextView that automatically resizes text to fit perfectly within its bounds. Usage dependencies { compile 'me.grantland:autofitt

A Custom TextView with trim text
A Custom TextView with trim text

ReadMoreTextView A Custom TextView with trim text Download To add the ReadMoreTextView library to your Android Studio project, simply add the followin

AutoLinkTextView is TextView that supports Hashtags (#), Mentions (@) , URLs (http://), Phone and Email automatically detecting and ability to handle clicks.
AutoLinkTextView is TextView that supports Hashtags (#), Mentions (@) , URLs (http://), Phone and Email automatically detecting and ability to handle clicks.

AutoLinkTextView Deprecated Please use the new version of AutoLinkTextView AutoLinkTextView is TextView that supports Hashtags (#), Mentions (@) , URL

Owner
Romain Piel
Romain Piel
Mentions-TextView - Make Mentions and hashtags clickable in Textview

Mentions Textview Custome Textview with Mentions and hashtags being clickable. D

null 2 Jan 9, 2022
Android's TextView that can expand/collapse like the Google Play's app description

ExpandableTextView ExpandableTextView is an Android library that allows developers to easily create an TextView which can expand/collapse just like th

Manabu S. 4k Nov 17, 2022
A library to show emoji in TextView, EditText (like WhatsApp) for Android

Discontinued This projected is discontinued. Please consider using other alternative, i.e EmojiCompat. Contact me if you want to continue working on a

Hieu Rocker 3.6k Nov 21, 2022
Advanced Android TextView

Advanced Android TextView Companion app for my Advanced Android TextView talk, demostrating: Animated CompoundDrawable Text shadow Custom font Non-bre

Chiu-Ki Chan 1.2k Nov 11, 2022
This is based on an open source autosizing textview for Android.

SizeAdjustingTextView This is based on an open source autosizing textview for Android I found a few weeks ago. The initial approach didn't resize mult

Elliott Chenger 257 Feb 15, 2022
An extension of Android's TextView, EditText and Button that let's you use the font of your choice

AnyTextView (deprecated) Note: AnyTextView is no longer being maintained. I recommend replacing AnyTextView with the Calligraphy library instead. Frus

Hans Petter Eide 165 Nov 11, 2022
Form validation and feedback library for Android. Provides .setText for more than just TextView and EditText widgets. Provides easy means to validate with dependencies.

android-formidable-validation Form validation and feedback library for Android. Provides .setText for more than just TextView and EditText widgets. Pr

Linden 147 Nov 20, 2022
Simple way to create linked text, such as @username or #hashtag, in Android TextView and EditText

Simple Linkable Text Simple way to create link text, such as @username or #hashtag, in Android TextView and EditText Installation Gradle Add dependenc

Aditya Pradana Sugiarto 76 Nov 29, 2022
Lightweight android library for highlighting sections of a textview, with optional callbacks.

Linker Lightweight android library for highlighting Strings inside of a textview (ignoring case), with optional callbacks. Language: Java MinSDK: 17 J

Josh Gainey 35 Apr 30, 2022
Android slanted TextView.

SlantedTextView Android slanted TextView . 中文版 Preview Gradle compile 'com.haozhang.libary:android-slanted-textview:1.2' XML Layout <com.haozhang.lib.

Hand Zhang 2.2k Nov 21, 2022