Ícones Animados Android Parte 2
Published in
10 min readNov 20, 2020
Fala pessoal, vamos seguir a parte 2 de nosso tutorial de ícones animados com android.
Caso perdeu a primeira parte, segue o link da primeira parte https://medium.com/@diegosalviano2007/%C3%ADcones-animados-android-f18f192f18d7
Feito isso vamos seguir renomeando os arquivos de animações dos ícones e abrir o Android Studio para adicionar a animação ao projeto.
Para simplificar vamos criar um projeto novo com o template Bottom Navigation Activity conforme a nossa imagem abaixo.
Projeto criado então agora vamos importar a nossa animação para a pasta drawable
location_animate.xml esse foi o nome que dei para a minha animação esse código abaixo é o conteúdo que foi gerado no Shape Shifter da nossa animação SVG.
<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="59dp"
android:height="59dp"
android:viewportWidth="59"
android:viewportHeight="59">
<path
android:name="path"
android:pathData="M 53.057 24.76 L 7.057 24.76 L 3.402 53.76 L 56.171 53.76 Z"
android:fillColor="#ffffff"
android:strokeWidth="1"/>
<path
android:name="path_1"
android:pathData="M 53.057 24.76 L 56.171 53.76 L 3.402 53.76 L 7.057 24.76 L 53.057 24.76 M 55.752 21.76 L 4.411 21.76 L 4.08 24.385 L 0.425 53.385 L 0 56.76 L 59.51 56.76 L 59.153 53.44 L 56.039 24.44 L 55.752 21.76 Z"
android:fillColor="#556080"
android:strokeWidth="1"/>
<path
android:name="path_2"
android:pathData="M 13.684 49.76 C 13.427 49.76 13.171 49.744 12.915 49.713 C 12.697 49.687 12.477 49.646 12.262 49.589 C 11.727 49.451 11.406 48.905 11.544 48.371 C 11.682 47.836 12.227 47.511 12.762 47.653 C 12.894 47.686 13.026 47.712 13.158 47.728 C 13.561 47.778 13.969 47.765 14.373 47.713 C 14.925 47.648 15.422 48.032 15.49 48.58 C 15.559 49.128 15.171 49.628 14.623 49.697 C 14.31 49.738 13.995 49.76 13.684 49.76 Z M 18.334 48.602 C 17.933 48.602 17.555 48.359 17.401 47.962 C 17.202 47.446 17.459 46.867 17.973 46.669 C 18.565 46.44 19.161 46.186 19.747 45.91 C 20.25 45.675 20.843 45.891 21.077 46.39 C 21.311 46.89 21.097 47.486 20.597 47.72 C 19.969 48.015 19.328 48.288 18.694 48.533 C 18.576 48.581 18.454 48.602 18.334 48.602 Z M 9.987 46.87 C 9.48 46.87 9.046 46.486 8.993 45.972 C 8.973 45.775 8.965 45.577 8.965 45.38 C 8.965 45.264 8.968 45.148 8.974 45.033 C 8.997 44.564 9.073 44.091 9.199 43.627 C 9.343 43.092 9.896 42.774 10.425 42.923 C 10.958 43.067 11.274 43.615 11.129 44.149 C 11.041 44.475 10.988 44.806 10.973 45.132 C 10.969 45.214 10.966 45.297 10.966 45.38 C 10.966 45.509 10.971 45.64 10.985 45.769 C 11.041 46.319 10.64 46.809 10.091 46.866 C 10.055 46.868 10.021 46.87 9.987 46.87 Z M 23.666 45.871 C 23.339 45.871 23.018 45.711 22.826 45.416 C 22.525 44.952 22.657 44.333 23.12 44.032 C 23.655 43.685 24.186 43.312 24.7 42.925 C 25.144 42.593 25.768 42.684 26.101 43.121 C 26.433 43.562 26.345 44.189 25.905 44.522 C 25.353 44.937 24.783 45.337 24.21 45.71 C 24.041 45.819 23.853 45.871 23.666 45.871 Z M 28.425 42.221 C 28.116 42.221 27.812 42.078 27.615 41.81 C 27.29 41.364 27.388 40.738 27.835 40.413 C 28.044 40.262 28.257 40.113 28.476 39.972 C 28.853 39.727 29.257 39.495 29.676 39.284 C 30.172 39.037 30.771 39.236 31.019 39.728 C 31.267 40.221 31.068 40.823 30.575 41.071 C 30.221 41.249 29.882 41.443 29.565 41.648 C 29.377 41.771 29.193 41.898 29.013 42.03 C 28.835 42.159 28.629 42.221 28.425 42.221 Z M 12.469 41.748 C 12.114 41.748 11.77 41.559 11.589 41.225 C 11.325 40.74 11.506 40.133 11.991 39.87 C 12.509 39.589 13.062 39.414 13.635 39.35 C 13.925 39.317 14.228 39.318 14.526 39.358 C 15.073 39.43 15.459 39.932 15.386 40.48 C 15.314 41.026 14.825 41.411 14.264 41.34 C 14.131 41.322 13.993 41.322 13.858 41.338 C 13.542 41.372 13.235 41.47 12.945 41.627 C 12.793 41.709 12.63 41.748 12.469 41.748 Z M 33.903 39.896 C 33.441 39.896 33.026 39.575 32.926 39.105 C 32.811 38.564 33.155 38.033 33.695 37.918 C 34.338 37.78 35.03 37.666 35.753 37.576 C 36.306 37.495 36.8 37.896 36.868 38.445 C 36.936 38.993 36.547 39.493 35.999 39.56 C 35.334 39.643 34.699 39.748 34.113 39.873 C 34.042 39.889 33.972 39.896 33.903 39.896 Z M 39.863 39.279 C 39.33 39.279 38.886 38.858 38.865 38.32 C 38.843 37.768 39.271 37.302 39.823 37.28 L 41.816 37.198 C 42.366 37.148 42.836 37.599 42.861 38.152 C 42.886 38.703 42.459 39.171 41.907 39.196 L 39.905 39.278 C 39.892 39.279 39.877 39.279 39.863 39.279 Z M 45.842 38.836 C 45.377 38.836 44.961 38.511 44.863 38.038 C 44.752 37.497 45.099 36.968 45.64 36.856 C 46.218 36.737 46.646 36.57 46.987 36.331 C 47.424 35.99 48.089 36.046 48.425 36.48 C 48.764 36.917 48.721 37.519 48.285 37.858 C 48.23 37.9 48.175 37.941 48.116 37.98 C 47.572 38.364 46.887 38.641 46.044 38.815 C 45.977 38.829 45.908 38.836 45.842 38.836 Z M 49.911 34.806 C 49.813 34.806 49.714 34.791 49.615 34.761 C 49.088 34.598 48.792 34.037 48.956 33.51 C 49.009 33.339 49.042 33.169 49.053 33.004 L 49.057 32.888 C 49.057 32.659 49.013 32.426 48.927 32.194 C 48.735 31.676 48.998 31.101 49.517 30.909 C 50.031 30.718 50.611 30.98 50.802 31.499 C 50.971 31.954 51.057 32.422 51.057 32.889 C 51.057 32.973 51.054 33.056 51.049 33.139 C 51.027 33.463 50.965 33.785 50.866 34.103 C 50.734 34.531 50.338 34.806 49.911 34.806 Z M 44.851 30.699 C 44.415 30.699 44.014 30.412 43.89 29.97 C 43.74 29.439 44.048 28.886 44.58 28.737 C 45.359 28.517 46.177 28.451 46.966 28.557 C 47.513 28.631 47.897 29.134 47.823 29.682 C 47.75 30.229 47.257 30.613 46.698 30.539 C 46.177 30.47 45.64 30.516 45.123 30.66 C 45.032 30.687 44.942 30.699 44.851 30.699 Z"
android:fillColor="#ebba16"
android:strokeWidth="1"/>
<group android:name="group">
<path
android:name="path_4"
android:pathData="M 30.023 5.981 C 25.972 5.981 22.677 9.276 22.677 13.326 C 22.677 17.377 25.972 20.672 30.023 20.672 C 34.074 20.672 37.369 17.377 37.369 13.326 C 37.368 9.276 34.073 5.981 30.023 5.981 Z M 30.023 18.672 C 27.076 18.672 24.677 16.274 24.677 13.326 C 24.677 10.378 27.075 7.981 30.023 7.981 C 32.971 7.981 35.369 10.378 35.369 13.326 C 35.369 16.274 32.97 18.672 30.023 18.672 Z"
android:fillColor="#b02721"
android:strokeWidth="1"/>
<path
android:name="path_3"
android:pathData="M 40.844 11.931 C 40.32 7.932 38.23 2.75 30.022 2.75 C 21.815 2.75 19.724 7.932 19.2 11.931 C 18.913 14.123 19.074 16.35 19.53 18.513 C 22.039 30.406 28.24 37.535 29.707 39.09 C 29.879 39.272 30.165 39.272 30.337 39.09 C 31.804 37.535 38.005 30.406 40.514 18.513 C 40.971 16.35 41.132 14.123 40.844 11.931 Z M 30.022 19.672 C 26.517 19.672 23.676 16.831 23.676 13.326 C 23.676 9.821 26.517 6.981 30.022 6.981 C 33.527 6.981 36.368 9.822 36.368 13.326 C 36.368 16.831 33.527 19.672 30.022 19.672 Z"
android:fillColor="#dd352e"
android:strokeWidth="1"/>
</group>
</vector>
</aapt:attr>
<target android:name="group">
<aapt:attr name="android:animation">
<set>
<objectAnimator
android:propertyName="translateX"
android:duration="400"
android:valueFrom="0"
android:valueTo="12"
android:valueType="floatType"
android:interpolator="@android:anim/anticipate_overshoot_interpolator"/>
<objectAnimator
android:propertyName="translateX"
android:startOffset="400"
android:duration="400"
android:valueFrom="12"
android:valueTo="0"
android:valueType="floatType"
android:interpolator="@android:anim/anticipate_overshoot_interpolator"/>
</set>
</aapt:attr>
</target>
</animated-vector>Para esse animação funcionar e ter o start precisamos de um novo arquivo xml animated que dei o nome de anim_location.xml
<?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
tools:targetApi="16"> <!-- provide a different drawable for each state-->
<item android:id="@+id/state_on"
android:drawable="@drawable/location_animate"
android:state_checked="true"/>
<item android:id="@+id/state_off"
android:drawable="@drawable/location_animate"/>
<!-- specify transitions -->
<transition
android:drawable="@drawable/location_animate"
android:fromId="@id/state_off"
android:toId="@id/state_on" />
</animated-selector>
O nosso android:drawable=”@drawable/location_animate” é a referencia de nossa animação.
Agora em nosso menu bottom_nav_menu.xml vamos editar ele e fazer a referência para a animação.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"> <item
android:id="@+id/navigation_home"
android:icon="@drawable/anim_home"
android:title="@string/title_home" /> <item
android:id="@+id/navigation_map"
android:icon="@drawable/anim_map"
android:title="@string/maps" /> <item
android:id="@+id/navigation_location"
android:icon="@drawable/anim_location"
android:title="@string/location" /></menu>
Aproveitei e fiz mais duas animações para demonstrar para vocês que também depende um pouco da escolha do SVG pois os ícones que não tem o fundo com transparência como esse que escolhemos eles não fica tão legal.
Calma eu fiz essa escolha de propósito para que eu pudesse mostrar como ficaria uma escolha de ícone ruim.
Mais o lado bom que vou mostrar pra vocês duas novas animações que fiz utilizando a mesma técnica desse post apenas escolhendo um ícone melhor
Agora vamos ver um vídeo de como ficou a nossa animação, lembrando que os código desses ícones estão disponíveis aqui abaixo.
map_animate.xml
<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="470dp"
android:height="470dp"
android:viewportWidth="470"
android:viewportHeight="470">
<group android:name="group">
<path
android:name="path"
android:pathData="M 470 310.715 L 470 159.176 C 470 155.856 467.816 152.93 464.634 151.986 L 394.521 131.184 C 399.948 117.909 403.331 104.733 403.331 92.5 C 403.331 41.496 361.836 0 310.831 0 C 259.826 0 218.331 41.495 218.331 92.5 C 218.331 104.733 221.714 117.909 227.141 131.184 L 159.162 151.353 L 9.633 106.985 C 7.365 106.314 4.911 106.75 3.014 108.165 C 1.117 109.58 0 111.809 0 114.176 L 0 417.5 C 0 420.82 2.183 423.746 5.367 424.69 L 156.916 469.657 C 156.96 469.67 157.029 469.69 157.029 469.69 C 157.053 469.697 157.078 469.699 157.102 469.706 C 157.381 469.786 157.667 469.847 157.959 469.894 C 158.037 469.907 158.115 469.92 158.194 469.93 C 158.508 469.971 158.826 469.998 159.15 469.999 C 159.498 469.999 159.817 469.971 160.132 469.93 C 160.21 469.92 160.287 469.907 160.365 469.894 C 160.657 469.847 160.944 469.785 161.224 469.706 C 161.248 469.699 161.273 469.697 161.297 469.69 L 161.366 469.669 C 161.41 469.656 307.793 426.224 307.793 426.224 C 308.723 426.637 309.749 426.871 310.832 426.871 C 311.915 426.871 312.942 426.637 313.871 426.224 L 460.367 469.689 C 461.068 469.897 461.786 469.999 462.501 469.999 C 464.099 469.999 465.676 469.488 466.987 468.509 C 468.883 467.093 470.001 464.865 470.001 462.499 L 470.001 310.775 C 470 310.755 470 310.735 470 310.715 Z M 455 164.774 L 455 300.79 L 318.331 260.24 L 318.331 238.908 C 328.111 228.837 366.519 187.913 388.207 144.957 L 455 164.774 Z M 310.831 15 C 353.564 15 388.331 49.766 388.331 92.5 C 388.331 104.681 384.256 118.248 377.919 131.985 C 377.605 132.487 377.347 133.032 377.154 133.618 C 359.082 171.767 324.125 210.868 310.829 225.014 C 297.541 210.883 262.616 171.836 244.537 133.7 C 244.334 133.058 244.051 132.463 243.704 131.92 C 237.39 118.208 233.331 104.666 233.331 92.499 C 233.331 49.766 268.098 15 310.831 15 Z M 303.331 238.907 L 303.331 260.239 L 166.662 300.789 L 166.662 164.774 L 233.455 144.957 C 255.144 187.913 293.551 228.837 303.331 238.907 Z M 15 275.886 L 66.818 291.261 C 67.53 291.472 68.248 291.573 68.954 291.573 C 72.189 291.573 75.174 289.464 76.141 286.204 C 77.32 282.233 75.056 278.059 71.084 276.881 L 15 260.24 L 15 124.224 L 151.662 164.774 L 151.662 300.79 L 99.845 285.415 C 95.875 284.235 91.7 286.5 90.522 290.472 C 89.343 294.443 91.607 298.617 95.579 299.795 L 151.663 316.436 L 151.663 452.452 L 15 411.902 L 15 275.886 Z M 318.331 411.902 L 318.331 357.605 C 318.331 353.463 314.974 350.105 310.831 350.105 C 306.688 350.105 303.331 353.463 303.331 357.605 L 303.331 411.902 L 166.662 452.451 L 166.662 316.436 L 303.331 275.886 L 303.331 327.605 C 303.331 331.747 306.688 335.105 310.831 335.105 C 314.974 335.105 318.331 331.747 318.331 327.605 L 318.331 275.886 L 455 316.436 L 455 452.452 L 318.331 411.902 Z"
android:fillColor="#000"
android:strokeWidth="1"/>
<path
android:name="path_1"
android:pathData="M 310.831 145 C 339.779 145 363.331 121.449 363.331 92.5 C 363.331 63.552 339.779 40 310.831 40 C 281.883 40 258.331 63.551 258.331 92.5 C 258.331 121.448 281.883 145 310.831 145 Z M 310.831 55 C 331.509 55 348.331 71.822 348.331 92.5 C 348.331 113.178 331.509 130 310.831 130 C 290.153 130 273.331 113.178 273.331 92.5 C 273.331 71.822 290.153 55 310.831 55 Z"
android:fillColor="#000"
android:strokeWidth="1"/>
</group>
</vector>
</aapt:attr>
<target android:name="group">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="translateY"
android:duration="800"
android:valueFrom="400"
android:valueTo="0"
android:valueType="floatType"
android:interpolator="@android:anim/anticipate_overshoot_interpolator"/>
</aapt:attr>
</target>
</animated-vector>anim_map.xml
<?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
tools:targetApi="16"> <!-- provide a different drawable for each state-->
<item android:id="@+id/state_on"
android:drawable="@drawable/map_animate"
android:state_checked="true"/>
<item android:id="@+id/state_off"
android:drawable="@drawable/map_animate"/>
<!-- specify transitions -->
<transition
android:drawable="@drawable/map_animate"
android:fromId="@id/state_off"
android:toId="@id/state_on" />
</animated-selector>
home_animate.xml
<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="511dp"
android:height="511dp"
android:viewportWidth="511"
android:viewportHeight="511">
<path
android:name="path_1"
android:pathData="M 368.897 483.079 L 324.404 483.079 L 324.404 398.16 C 324.404 360.422 293.701 329.72 255.962 329.72 C 218.224 329.72 187.521 360.422 187.521 398.16 L 187.521 483.079 L 96.248 483.079 C 87.924 483.079 81.152 476.308 81.152 467.983 L 81.152 363.247 C 81.152 359.104 77.794 355.747 73.652 355.747 C 69.51 355.747 66.152 359.104 66.152 363.247 L 66.152 467.983 C 66.152 484.578 79.653 498.079 96.248 498.079 L 368.897 498.079 C 373.04 498.079 376.397 494.722 376.397 490.579 C 376.397 486.436 373.04 483.079 368.897 483.079 Z M 202.521 398.161 C 202.521 368.694 226.495 344.721 255.962 344.721 C 285.429 344.721 309.403 368.695 309.403 398.161 L 309.403 483.08 L 202.521 483.08 Z"
android:fillColor="#000"
android:strokeWidth="1"/>
<group android:name="animate">
<path
android:name="path"
android:pathData="M 430.772 276.2 L 430.772 467.984 C 430.772 476.308 424.001 483.08 415.676 483.08 L 404.046 483.08 C 399.903 483.08 396.546 486.437 396.546 490.58 C 396.546 494.723 399.903 498.08 404.046 498.08 L 415.676 498.08 C 432.271 498.08 445.772 484.579 445.772 467.984 L 445.772 291.814 L 461.038 307.705 C 467.932 314.881 479.375 315.003 486.419 307.959 L 506.757 287.62 C 513.549 280.83 513.661 269.67 507.007 262.743 L 276.185 22.464 C 265.15 10.977 246.783 10.967 235.74 22.464 L 4.917 262.743 C -1.736 269.669 -1.624 280.829 5.167 287.62 L 25.506 307.959 C 32.544 314.995 43.985 314.889 50.888 307.705 L 66.152 291.816 L 66.152 328.248 C 66.152 332.391 69.51 335.748 73.652 335.748 C 77.794 335.748 81.152 332.391 81.152 328.248 L 81.152 276.201 L 250.26 100.163 C 253.37 96.926 258.542 96.917 261.664 100.163 C 396.44 240.46 369.758 212.686 430.772 276.2 Z M 496.15 277.012 L 475.811 297.352 C 474.481 298.447 473.162 298.434 471.854 297.312 L 272.482 89.773 L 272.48 89.771 C 272.47 89.76 272.459 89.751 272.449 89.74 C 263.426 80.382 248.459 80.386 239.443 89.772 L 68.243 267.985 C 68.239 267.989 68.236 267.994 68.232 267.998 L 40.071 297.312 C 38.763 298.434 37.443 298.447 36.113 297.351 L 15.774 277.012 C 14.715 275.953 14.698 274.213 15.735 273.134 L 246.557 32.855 C 251.696 27.506 260.231 27.507 265.368 32.856 L 496.189 273.133 C 497.227 274.213 497.21 275.954 496.15 277.012 Z"
android:fillColor="#000"
android:strokeWidth="1"/>
</group>
</vector>
</aapt:attr>
<target android:name="animate">
<aapt:attr name="android:animation">
<set>
<objectAnimator
android:propertyName="translateY"
android:duration="300"
android:valueFrom="0"
android:valueTo="50"
android:valueType="floatType"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
<objectAnimator
android:propertyName="translateY"
android:startOffset="300"
android:duration="300"
android:valueFrom="50"
android:valueTo="0"
android:valueType="floatType"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
</set>
</aapt:attr>
</target>
</animated-vector>anim_home.xml
<?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
tools:targetApi="16"><!-- provide a different drawable for each state-->
<item android:id="@+id/state_on"
android:drawable="@drawable/home_animate"
android:state_checked="true"/>
<item android:id="@+id/state_off"
android:drawable="@drawable/home_animate"/>
<!-- specify transitions -->
<transition
android:drawable="@drawable/home_animate"
android:fromId="@id/state_off"
android:toId="@id/state_on" />
</animated-selector>
Finalmente temos nosso ícone de menu com animações, foram apresentados modelos bem básico mais podemos fazer muitas coisas com essa ferramenta e deixar nosso aplicativo ainda mais atrativo.
Valeu pessoal espero que tenha ajudado de alguma forma obrigado.
