October 29, 2020

Impact & Learning

Learn to impact

Create animations on UI elements on Android

Read Time:2 Minute, 58 Second

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.

0 0