Hello everybody, in this tutorial I am going to teach you how to create effects and animations on UI elements in Android in a simple way. On many occasions, as mobile developers we need to create animations as part of the client’s requirements, and sometimes these effects can be a headache, since the animation can contain many more lines of code than the same UI element.
To facilitate the task of creating animations on UI elements we have a library available on Github called Ramotion’s Android UI libraries, with which we can make complex animations for UI. Its use is defined through an MIT license.
Create animations for UI elements
Through the Android UI libraries, we can create a variety of UI elements, which we can implement directly within our application. These elements are in Java language for Android.
Some of the available effects, as well as some of the transitions offered by Ramotion, are as follows:
Garland View
Garland views are nice transitions between multiple content lists. It is compatible with Android versions 4.4 and up.
Compilation
compile 'com.ramotion.garlandview:garland-view:0.3.3'
Example of use: https://github.com/Ramotion/garland-view-android
Folding Cell
We can expand the contents of a cell with animation, just like a container folder is displayed. Its compatibility is with Android versions 4.0 and higher.
Import
'com.ramotion.foldingcell: folding-cell: 1.2.3'
Implementation
1- We create a FoldingCell element with some FrameLayout children:
<com.ramotion.foldingcell.FoldingCell
xmlns:android = "http://schemas.android.com/apk/res/android"
android:id = "@+id/folding_cell"
android:layout_width = "match_parent"
android:layout_height = "wrap_content">
<FrameLayout
android:id = "@+id/cell_content_view"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:background = "@android:color/holo_green_dark"
android:visibility = "gone">
<TextView
android:layout_width = "match_parent"
android:layout_height = "250dp" />
</FrameLayout>
<FrameLayout
android:id = "@+id/cell_title_view"
android:layout_width = "match_parent"
android:layout_height = "wrap_content">
<TextView
android:layout_width = "match_parent"
android:layout_height = "100dp"
android:background = "@android:color/holo_blue_dark" />
</FrameLayout>
</com.ramotion.foldingcell.FoldingCell>
2- In the root element of the FoldingCell we add
android:clipChildren = "false" android:clipToPadding = "false"
3- We add the OnClickListener to trigger the animation on the element.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// get our folding cell
final FoldingCell fc = (FoldingCell) findViewById(R.id.folding_cell);
// attach click listener to folding cell
fc.setOnClickListener(new View.OnClickListener () {
@Override
public void onClick(View v) {
fc.toggle(false);
}
});
}
Testing
The live operation of the FoldingCell can be seen from the demo application, or we can directly implement it in our project. Also in the documentation we can customize our element. The display should resemble the following:
Other UI elements
Ramotion contains other UI elements, easy to customize and highly adaptable to your project, thus covering the expectations of your client or the development you are carrying out.
In another tutorial I will show you some additional UI elements that could benefit you in your project. The contents that we publish seek to be licensed by MIT so that you can have broad rights for the purpose of your development.
Recommended reading and tutorials for Android
Follow us, and learn Kotlin through our tutorials. Here are some recommendations to learn Kotlin that might be of interest to you.