TextView Animations in Android | Android Studio | JAVA
In this tutorial, we will create custom textView animations in android. Here we also use custom fonts for the texts. These text animations help developers to create an attractive animated layout for the apps.
Overview
Types of Text Animations
Dependency
dependencies {
……………………………
implementation ‘hanks.xyz:htextview-library:0.1.5’
}
Design the Main XML file
Now in the main XML file, we design our main screen where we set our text animation types using Radio Buttons.
<?xml version=”1.0" encoding=”utf-8"?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android"
xmlns:tools=”http://schemas.android.com/tools"
android:layout_width=”match_parent”
android:layout_height=”match_parent”
xmlns:htext=”http://schemas.android.com/apk/res-auto"
android:orientation=”vertical”
tools:context=”.MainActivity”>
<View
android:layout_width=”match_parent”
android:layout_height=”50dp”
android:id=”@+id/text”/>
<com.hanks.htextview.HTextView
android:id=”@+id/text2"
android:layout_width=”match_parent”
android:layout_height=”100dp”
android:background=”@color/teal_200"
android:clickable=”true”
android:gravity=”center”
android:onClick=”onClick”
android:text=”@string/what_is_design”
android:textColor=”#000"
android:textSize=”40sp”
htext:animateType=”rainbow”
htext:fontAsset=”fonts/Ubuntu-Bold.ttf” /><SeekBar
android:id=”@+id/seekbar”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_margin=”20dp”/><RadioGroup
android:id=”@+id/typeGroup”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_margin=”20dp”>
<RadioButton
android:id=”@+id/scale”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:checked=”true”
android:text=”Scale (Lato Black)”/>
<RadioButton
android:id=”@+id/evaporate”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Evaporate (Poiret One)”/>
<RadioButton
android:id=”@+id/fall”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Fall (Mirza)”/>
<RadioButton
android:id=”@+id/pixelate”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Pixelate (Amatica SC)”/>
<RadioButton
android:id=”@+id/sparkle”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Sparkle (Roboto)”/>
<RadioButton
android:id=”@+id/line”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Line (Caveat VariableFont)”/>
<RadioButton
android:id=”@+id/typer”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Typer (Maxwell Bold)”/>
<RadioButton
android:id=”@+id/rainbow”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Rainbow (Ubuntu Bold)”/>
</RadioGroup>
</LinearLayout>
Manage fonts
- Create an assets folder inside our app(/app/new/folder/assets folder). Inside assets folder create a new android directory named fonts (/app/assets/new/android directory/fonts) and add the custom fonts end with “.ttf” format.
- Now create a java file inside our java package to handle the fonts (/package/new/java file/FontManager.java)
public class FontManager {
private static final String TAG = FontManager.class.getName();private static FontManager instance;
private AssetManager assetManager;
private Map<String, Typeface> fonts;
private FontManager(AssetManager assetManager) {
this.assetManager = assetManager;
this.fonts = new HashMap<>();
}public static FontManager getInstance(AssetManager assetManager) {
if (instance == null) {
instance = new FontManager(assetManager);
}
return instance;
}public Typeface getFont(String asset) {
if (fonts.containsKey(asset))
return fonts.get(asset);Typeface font = null;
try {
font = Typeface.createFromAsset(assetManager, asset);
fonts.put(asset, font);
} catch (RuntimeException e) {
Log.e(TAG, “getFont: Can’t create font from asset.”, e);
}return font;
}
}
Add Functionality
Go to the main java file and set the animation types with texts using the htextview library.
public class MainActivity extends AppCompatActivity {
// Strings that will display insdie View
String[] sentences = new String[]{“What is Animation?”, “Animation”, “is about creating the illusion”, “of life”, “And you can’t create it”,
“if you don’t”, “have one”, “- Brad Bird”, “Follow”, “me on IG and FB”, “just type”, “androidapp.development.blogs”, “Also visit”,
“my website”, “gbandroidblogs”, “dot com”, “Android tips”, “Android UI/UX tips”, “Find it”, “Useful?”, “Hit Like and”, “Leave a”, “comment”};private int mCounter = 10;
private HTextView hTextView;private SeekBar seekBar;
private RadioGroup radioGroup;@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);hTextView = (HTextView) findViewById(R.id.text2);
seekBar = (SeekBar) findViewById(R.id.seekbar);
seekBar.setMax(20);
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
hTextView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 8 + progress);
hTextView.reset(hTextView.getText());
}@Override
public void onStartTrackingTouch(SeekBar seekBar) {}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {}
});
seekBar.setProgress(10);radioGroup = (RadioGroup) findViewById(R.id.typeGroup);
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {@SuppressLint(“NonConstantResourceId”)
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.scale:
hTextView.setTextColor(Color.BLACK);
hTextView.setBackgroundColor(Color.WHITE);
hTextView.setTypeface(FontManager.getInstance(getAssets()).getFont(“fonts/Lato-Black.ttf”));
hTextView.setAnimateType(HTextViewType.SCALE);
break;
case R.id.evaporate:
hTextView.setTextColor(Color.BLACK);
hTextView.setBackgroundColor(Color.WHITE);
hTextView.setTypeface(FontManager.getInstance(getAssets()).getFont(“fonts/PoiretOne-Regular.ttf”));
hTextView.setAnimateType(HTextViewType.EVAPORATE);
break;
case R.id.fall:
hTextView.setTextColor(Color.BLACK);
hTextView.setBackgroundColor(Color.WHITE);
hTextView.setTypeface(FontManager.getInstance(getAssets()).getFont(“fonts/Mirza-Regular.ttf”));
hTextView.setAnimateType(HTextViewType.FALL);
break;
case R.id.pixelate:
hTextView.setTextColor(Color.BLACK);
hTextView.setBackgroundColor(Color.WHITE);
hTextView.setTypeface(FontManager.getInstance(getAssets()).getFont(“fonts/AmaticaSC-Regular.ttf”));
hTextView.setAnimateType(HTextViewType.PIXELATE);
break;
case R.id.sparkle:
hTextView.setTextColor(Color.WHITE);
hTextView.setBackgroundColor(Color.BLACK);
hTextView.setTypeface(null);
hTextView.setAnimateType(HTextViewType.SPARKLE);
break;
case R.id.line:
hTextView.setTextColor(Color.WHITE);
hTextView.setBackgroundColor(Color.BLACK);
hTextView.setTypeface(FontManager.getInstance(getAssets()).getFont(“fonts/Caveat-VariableFont_wght.ttf”));
hTextView.setAnimateType(HTextViewType.LINE);
break;
case R.id.typer:
hTextView.setTextColor(Color.WHITE);
hTextView.setBackgroundColor(Color.BLACK);
hTextView.setTypeface(FontManager.getInstance(getAssets()).getFont(“fonts/MAXWELL BOLD.ttf”));
hTextView.setAnimateType(HTextViewType.TYPER);
break;
case R.id.rainbow:
hTextView.setTextColor(Color.WHITE);
hTextView.setBackgroundColor(Color.BLACK);
hTextView.setTypeface(FontManager.getInstance(getAssets()).getFont(“fonts/Ubuntu-Bold.ttf”));
hTextView.setAnimateType(HTextViewType.RAINBOW);
break;
}onClick(radioGroup.findViewById(checkedId));
}
});}
public void onClick(View view) {
mCounter = mCounter >= sentences.length — 1 ? 0 : mCounter + 1;
hTextView.animateText(sentences[mCounter]);
}
}
Thank you for your support!
