How to replicate LinkedIn loading animation in android studio?

Question

The following is the css and html of LinkedIn loading animation. How to replicate this animation in android studio in xml?

body{
    margin:0;
    padding:0
}
.wrapper{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    transition:2s
}
.wrapper img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}
.cover{
    position:relative;
    width:130px;
    height:5px;
    background:#d3d3d3;
    border-radius:20px;
    margin-top:75px;
    overflow:hidden;
    transition:2s
}
.cover:before{
    content:"";
    position:absolute;
    width:68px;
    height:5px;
    left:-30px;
    background:#1e90ff;
    border-radius:20px;
    animation:link 1s infinite ease;
    transition:1s
}
@keyframes link{
    50%{
        left:96px
    }
}

<div class="wrapper"><div class="cover"></div></div>

I tried to extract animation frames and put them inside animation-list as follows:

<!-- loading.xml -->

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="<http://schemas.android.com/apk/res/android>">
    <item android:drawable="@drawable/bg_color"/>
    <item android:bottom="50dp" android:gravity="bottom">
        <animation-list android:drawable="@drawable/frame1" android:duration="100" />
        <animation-list android:drawable="@drawable/frame2" android:duration="100" />
        <animation-list android:drawable="@drawable/frame3" android:duration="100" />
        <animation-list android:drawable="@drawable/frame4" android:duration="100" />
        <animation-list android:drawable="@drawable/frame5" android:duration="100" />
    </item>
</layer-list>

But I want a direct method.

score 0 · Accepted Answer · answered Jul 03 '23 at 05:10

Finally with help of this SO post and shapeshifter I ended up with the following animation:

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:name="vector"
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <path
                android:name="path"
                android:pathData="M 24 4 L 48 10 L 0 10 L 0 14 Z"
                android:fillColor="#0C53CC"
                android:strokeColor="#f09090"
                android:strokeWidth="0"
                android:strokeLineCap="square"/>
        </vector>
    </aapt:attr>
    <target android:name="path">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="pathData"
                android:duration="1000"
                android:valueFrom="M -20 14 L -20 10 L 4 10 L 4 14 Z"
                android:valueTo="M 20 14 L 20 10 L 48 10 L 48 14 Z"
                android:valueType="pathType"
                android:repeatCount="infinite"
                android:repeatMode="reverse"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </aapt:attr>
    </target>
</animated-vector>

How to replicate LinkedIn loading animation in android studio?

1 Answers1