How to animate gradient in vector drawable? - android

I need to animate a path in a vector using a gradient, but I cannot find a solution on how to do this. Any help is appreciated.
<?xml version="1.0" encoding="utf-8"?>
<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="80dp"
android:height="88dp"
android:viewportWidth="80"
android:viewportHeight="88">
<path
android:name="curve"
android:pathData="M79.6,54.8623V54.3618C79.7,52.8601 79.8,50.9579 79.9,48.8555V48.6553C79.9,47.1536 80,45.6519 80,44.0501C80,42.4482 80,40.8464 79.9,39.4448V39.2446C79.8,37.1422 79.7,35.24 79.6,33.7383V32.537C79.5,30.9352 79.4,29.934 79.4,29.8339C79.4,29.6337 79.4,29.5336 79.3,29.3333V29.2332C79.3,28.9329 79.2,28.6325 79.2,28.4323V28.3322C78.5,24.9283 76.6,21.2241 74.3,18.521C73.4,17.4198 72.4,16.5188 71.4,15.7179C71.3,15.6177 70.2,14.8168 68.3,13.5154C66.1,12.0137 63.0999,10.0114 59.5999,8.0091C53.5,4.3049 48,1.802 47.2999,1.5017H47.2C45.6,0.8009 43.5999,0.3003 41.5,0.1001C41.0999,0.1001 40.7,0 40.2999,0H38.5999C35.7999,0.1001 33.2,0.6007 31.1,1.5017C30.8,1.6018 25.2999,4.1047 19,7.8089C19,7.8089 18.9,7.909 18.7999,7.909C12.4,11.7133 7.3,15.4175 7.0999,15.6177C5.4999,16.8191 4.0999,18.3208 2.7999,20.223C2.4999,20.6234 2.4999,21.7247 3.7999,21.7247H6.9999C8.4,21.7247 8.7,20.9238 10.2,19.8225C11.9,18.6212 15.2,16.1183 21.4,12.4141C25.7999,9.8111 30,7.7088 32,6.8077C32,6.8077 32.0999,6.8077 32.0999,6.7076H32.4C32.9,6.5074 33.2,6.3072 33.2,6.3072C34.6,5.7065 36.6,5.306 38.7,5.2059H39.5C40.0999,5.2059 40.7,5.306 41.2999,5.306C42.5999,5.5063 43.7,5.7065 44.7,6.1069C44.7999,6.1069 44.9,6.207 45,6.207C45,6.207 45.1,6.207 45.2,6.3072C46.1,6.7076 51.3,9.1103 56.9,12.4141C60.2,14.3163 63.1999,16.3185 65.1999,17.7201C66.9999,18.9215 68.1,19.7224 68.1,19.8225C68.9,20.4232 69.7,21.2241 70.4,22.1251C72.3,24.5279 73.8,27.8316 74,30.3345C74,30.3345 74.1,31.4357 74.2,33.0375V36.4414C74.2999,38.6439 74.4,41.1468 74.4,43.8498C74.4,46.5529 74.2999,49.1559 74.2,51.2582V54.6621C74.1,56.364 74,57.3652 74,57.3652C73.7,59.868 72.2,63.1718 70.4,65.5745C69.7,66.4755 68.9,67.3766 68.1,67.8771C68.1,67.8771 66.9999,68.678 65.1999,69.9795C63.1999,71.3811 60.2,73.3834 56.9,75.2855C51.3,78.5893 46.1,80.992 45.2,81.3925C45.1,81.3925 45.0999,81.4926 45,81.4926C44.9,81.4926 44.7999,81.5927 44.7,81.5927C43.7999,81.9932 42.5999,82.2935 41.2999,82.3936C40.7,82.4937 40.0999,82.4937 39.5,82.4937H38.7C36.6,82.4937 34.6,82.0933 33.2,81.3925C33.2,81.3925 32.9,81.2924 32.4,80.992C32.3,80.992 32.3,80.8919 32.2,80.8919C32.2,80.8919 32.0999,80.8919 32.0999,80.7918H32C32,80.7918 31.9,80.7918 31.9,80.6917C31.7999,80.6917 31.8,80.6917 31.7,80.5916C29.6,79.5904 25.5999,77.5882 21.4,75.0853C15.2,71.4812 11.9,68.9784 10.2,67.6769C8.7,66.9761 8.4,66.1752 6.9999,66.1752H3.9C2.6,66.1752 2.6999,67.2764 2.9,67.6769C4.2,69.5791 5.5999,71.0808 7.2,72.2821C7.4,72.4824 12.5,76.1866 18.9,79.9909C19.1999,80.1911 19.6,80.3913 19.9,80.5916C25.7999,83.9954 30.9,86.2981 31.2,86.4983C33.2,87.3993 35.9,88 38.7,88H40.4C40.8,88 41.1999,88 41.5999,87.8999C43.6999,87.6997 45.7,87.1991 47.2999,86.4983H47.4C48.1,86.198 53.6,83.6951 59.7,80.091C63.1,78.0887 66.2,76.0865 68.3,74.5848C70.1,73.2833 71.3,72.4824 71.4,72.3823C72.4,71.6815 73.4,70.6803 74.3,69.5791C76.6,66.7759 78.5,63.0717 79.2,59.7679V59.6678C79.2999,59.3675 79.3,59.0671 79.3,58.8669V58.7668C79.3,58.5666 79.3,58.4664 79.4,58.2662C79.4,58.1661 79.5,57.165 79.6,55.5631V54.8623Z">
<aapt:attr name="android:fillColor">
<gradient
android:startY="-0.32032"
android:startX="41.2774"
android:endY="87.8803"
android:endX="41.2774"
android:type="linear">
<item android:offset="0" android:color="#FF666666"/>
<item android:offset="0.4" android:color="#FF777777"/>
<item android:offset="0.66" android:color="#FF818181"/>
<item android:offset="1" android:color="#FF919191"/>
</gradient>
</aapt:attr>
</path>
</vector>
</aapt:attr>
<target
android:name="curve" >
<!-- There should be an animated gradient -->
</target>
</animated-vector>
The solution does not have to be in an XML file, it may be in code.

Related

Layout with rounded corners using vector for background

I have constraint layout using xml as a background.
Constraintlayout:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/fr_main_masters"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:background="#drawable/ic_background_wave"
android:layout_marginBottom="10dp">
</androidx.constraintlayout.widget.ConstraintLayout>
ic_background_wave.xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<solid android:color="#color/colorPrimary" />
<stroke
android:color="#B1BCBE" />
<corners android:radius="16dp" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
</shape>
</item>
<item android:drawable="#drawable/ic_group_wave_backg"/>
</layer-list>
ic_group_wave_backg.xml (here should be much more paths - each path is a wave - because stack limits I have put only few upper waves as a code)
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="200dp"
android:height="199dp"
android:viewportWidth="200"
android:viewportHeight="199">
<path
android:fillColor="#00000000"
android:pathData="M348.55,1L340.82,3.92C338.46,4.81 335.85,4.81 333.49,3.92L329.42,2.38C327.06,1.49 324.46,1.49 322.1,2.38L318.03,3.92C315.67,4.81 313.07,4.81 310.71,3.92L306.64,2.38C304.28,1.49 301.67,1.49 299.31,2.38L295.25,3.92C292.89,4.81 290.28,4.81 287.92,3.92L283.86,2.38C281.5,1.49 278.89,1.49 276.53,2.38L272.46,3.92C270.1,4.81 267.5,4.81 265.14,3.92L261.07,2.38C258.71,1.49 256.11,1.49 253.75,2.38L249.68,3.92C247.32,4.81 244.71,4.81 242.35,3.92L238.29,2.38C235.93,1.49 233.32,1.49 230.96,2.38L226.9,3.92C224.54,4.81 221.93,4.81 219.57,3.92L215.5,2.38C213.14,1.49 210.54,1.49 208.18,2.38L204.11,3.92C201.75,4.81 199.15,4.81 196.79,3.92L192.72,2.38C190.36,1.49 187.75,1.49 185.39,2.38L181.33,3.92C178.97,4.81 176.36,4.81 174,3.92L169.94,2.38C167.57,1.49 164.97,1.49 162.61,2.38L158.54,3.92C156.18,4.81 153.58,4.81 151.22,3.92L147.15,2.38C144.79,1.49 142.19,1.49 139.83,2.38L135.76,3.92C133.4,4.81 130.79,4.81 128.43,3.92L124.37,2.38C122.01,1.49 119.4,1.49 117.04,2.38L112.97,3.92C110.61,4.81 108.01,4.81 105.65,3.92L101.58,2.38C99.22,1.49 96.62,1.49 94.26,2.38L90.19,3.92C87.83,4.81 85.23,4.81 82.87,3.92L78.8,2.38C76.44,1.49 73.83,1.49 71.47,2.38L67.41,3.92C65.05,4.81 62.44,4.81 60.08,3.92L56.02,2.38C53.65,1.49 51.05,1.49 48.69,2.38L44.62,3.92C42.26,4.81 39.66,4.81 37.3,3.92L33.23,2.38C30.87,1.49 28.27,1.49 25.91,2.38L21.84,3.92C19.48,4.81 16.87,4.81 14.51,3.92L10.45,2.38C8.09,1.49 5.48,1.49 3.12,2.38L-0.94,3.92C-3.31,4.81 -5.91,4.81 -8.27,3.92L-16,1"
android:strokeWidth="0.75947"
android:strokeAlpha="0.22"
android:strokeColor="#322B3A" />
<path
android:fillColor="#00000000"
android:pathData="M348.55,5.58L340.83,8.51C338.46,9.41 335.84,9.41 333.47,8.51L329.44,6.98C327.07,6.08 324.45,6.08 322.08,6.98L318.05,8.51C315.68,9.41 313.06,9.41 310.69,8.51L306.66,6.98C304.29,6.08 301.67,6.08 299.3,6.98L295.27,8.51C292.89,9.41 290.27,9.41 287.9,8.51L283.88,6.98C281.5,6.08 278.88,6.08 276.51,6.98L272.48,8.51C270.11,9.41 267.49,9.41 265.12,8.51L261.09,6.98C258.72,6.08 256.1,6.08 253.73,6.98L249.7,8.51C247.33,9.41 244.71,9.41 242.34,8.51L238.31,6.98C235.93,6.08 233.32,6.08 230.94,6.98L226.91,8.51C224.54,9.41 221.92,9.41 219.55,8.51L215.52,6.98C213.15,6.08 210.53,6.08 208.16,6.98L204.13,8.51C201.76,9.41 199.14,9.41 196.77,8.51L192.74,6.98C190.37,6.08 187.75,6.08 185.38,6.98L181.35,8.51C178.98,9.41 176.35,9.41 173.98,8.51L169.96,6.98C167.58,6.08 164.96,6.08 162.59,6.98L158.56,8.51C156.19,9.41 153.57,9.41 151.2,8.51L147.17,6.98C144.8,6.08 142.18,6.08 139.81,6.98L135.78,8.51C133.41,9.41 130.79,9.41 128.41,8.51L124.39,6.98C122.01,6.08 119.39,6.08 117.02,6.98L112.99,8.51C110.62,9.41 108,9.41 105.63,8.51L101.6,6.98C99.23,6.08 96.61,6.08 94.24,6.98L90.21,8.51C87.84,9.41 85.22,9.41 82.85,8.51L78.82,6.98C76.45,6.08 73.83,6.08 71.45,6.98L67.43,8.51C65.05,9.41 62.43,9.41 60.06,8.51L56.03,6.98C53.66,6.08 51.04,6.08 48.67,6.98L44.64,8.51C42.27,9.41 39.65,9.41 37.28,8.51L33.25,6.98C30.88,6.08 28.26,6.08 25.89,6.98L21.86,8.51C19.49,9.41 16.87,9.41 14.49,8.51L10.47,6.98C8.09,6.08 5.47,6.08 3.1,6.98L-0.93,8.51C-3.3,9.41 -5.92,9.41 -8.29,8.51L-16,5.58"
android:strokeWidth="0.75947"
android:strokeAlpha="0.22"
android:strokeColor="#322B3A" />
<path
android:fillColor="#00000000"
android:pathData="M348.55,10.19L340.82,13.11C338.46,14 335.85,14 333.49,13.11L329.42,11.57C327.06,10.68 324.46,10.68 322.1,11.57L318.03,13.11C315.67,14 313.07,14 310.71,13.11L306.64,11.57C304.28,10.68 301.67,10.68 299.31,11.57L295.25,13.11C292.89,14 290.28,14 287.92,13.11L283.86,11.57C281.5,10.68 278.89,10.68 276.53,11.57L272.46,13.11C270.1,14 267.5,14 265.14,13.11L261.07,11.57C258.71,10.68 256.11,10.68 253.75,11.57L249.68,13.11C247.32,14 244.71,14 242.35,13.11L238.29,11.57C235.93,10.68 233.32,10.68 230.96,11.57L226.9,13.11C224.54,14 221.93,14 219.57,13.11L215.5,11.57C213.14,10.68 210.54,10.68 208.18,11.57L204.11,13.11C201.75,14 199.15,14 196.79,13.11L192.72,11.57C190.36,10.68 187.75,10.68 185.39,11.57L181.33,13.11C178.97,14 176.36,14 174,13.11L169.94,11.57C167.57,10.68 164.97,10.68 162.61,11.57L158.54,13.11C156.18,14 153.58,14 151.22,13.11L147.15,11.57C144.79,10.68 142.19,10.68 139.83,11.57L135.76,13.11C133.4,14 130.79,14 128.43,13.11L124.37,11.57C122.01,10.68 119.4,10.68 117.04,11.57L112.97,13.11C110.61,14 108.01,14 105.65,13.11L101.58,11.57C99.22,10.68 96.62,10.68 94.26,11.57L90.19,13.11C87.83,14 85.23,14 82.87,13.11L78.8,11.57C76.44,10.68 73.83,10.68 71.47,11.57L67.41,13.11C65.05,14 62.44,14 60.08,13.11L56.02,11.57C53.65,10.68 51.05,10.68 48.69,11.57L44.62,13.11C42.26,14 39.66,14 37.3,13.11L33.23,11.57C30.87,10.68 28.27,10.68 25.91,11.57L21.84,13.11C19.48,14 16.87,14 14.51,13.11L10.45,11.57C8.09,10.68 5.48,10.68 3.12,11.57L-0.94,13.11C-3.31,14 -5.91,14 -8.27,13.11L-16,10.19"
android:strokeWidth="0.75947"
android:strokeAlpha="0.22"
android:strokeColor="#322B3A" />
<path
android:fillColor="#00000000"
android:pathData="M348.55,14.8L340.82,17.72C338.46,18.61 335.85,18.61 333.49,17.72L329.42,16.18C327.06,15.29 324.46,15.29 322.1,16.18L318.03,17.72C315.67,18.61 313.07,18.61 310.71,17.72L306.64,16.18C304.28,15.29 301.67,15.29 299.31,16.18L295.25,17.72C292.89,18.61 290.28,18.61 287.92,17.72L283.86,16.18C281.5,15.29 278.89,15.29 276.53,16.18L272.46,17.72C270.1,18.61 267.5,18.61 265.14,17.72L261.07,16.18C258.71,15.29 256.11,15.29 253.75,16.18L249.68,17.72C247.32,18.61 244.71,18.61 242.35,17.72L238.29,16.18C235.93,15.29 233.32,15.29 230.96,16.18L226.9,17.72C224.54,18.61 221.93,18.61 219.57,17.72L215.5,16.18C213.14,15.29 210.54,15.29 208.18,16.18L204.11,17.72C201.75,18.61 199.15,18.61 196.79,17.72L192.72,16.18C190.36,15.29 187.75,15.29 185.39,16.18L181.33,17.72C178.97,18.61 176.36,18.61 174,17.72L169.94,16.18C167.57,15.29 164.97,15.29 162.61,16.18L158.54,17.72C156.18,18.61 153.58,18.61 151.22,17.72L147.15,16.18C144.79,15.29 142.19,15.29 139.83,16.18L135.76,17.72C133.4,18.61 130.79,18.61 128.43,17.72L124.37,16.18C122.01,15.29 119.4,15.29 117.04,16.18L112.97,17.72C110.61,18.61 108.01,18.61 105.65,17.72L101.58,16.18C99.22,15.29 96.62,15.29 94.26,16.18L90.19,17.72C87.83,18.61 85.23,18.61 82.87,17.72L78.8,16.18C76.44,15.29 73.83,15.29 71.47,16.18L67.41,17.72C65.05,18.61 62.44,18.61 60.08,17.72L56.02,16.18C53.65,15.29 51.05,15.29 48.69,16.18L44.62,17.72C42.26,18.61 39.66,18.61 37.3,17.72L33.23,16.18C30.87,15.29 28.27,15.29 25.91,16.18L21.84,17.72C19.48,18.61 16.87,18.61 14.51,17.72L10.45,16.18C8.09,15.29 5.48,15.29 3.12,16.18L-0.94,17.72C-3.31,18.61 -5.91,18.61 -8.27,17.72L-16,14.8"
android:strokeWidth="0.75947"
android:strokeAlpha="0.22"
android:strokeColor="#322B3A" />
<path
android:fillColor="#00000000"
android:pathData="M348.55,19.38L340.83,22.31C338.46,23.21 335.84,23.21 333.47,22.31L329.44,20.78C327.07,19.88 324.45,19.88 322.08,20.78L318.05,22.31C315.68,23.21 313.06,23.21 310.69,22.31L306.66,20.78C304.29,19.88 301.67,19.88 299.3,20.78L295.27,22.31C292.89,23.21 290.27,23.21 287.9,22.31L283.88,20.78C281.5,19.88 278.88,19.88 276.51,20.78L272.48,22.31C270.11,23.21 267.49,23.21 265.12,22.31L261.09,20.78C258.72,19.88 256.1,19.88 253.73,20.78L249.7,22.31C247.33,23.21 244.71,23.21 242.34,22.31L238.31,20.78C235.93,19.88 233.32,19.88 230.94,20.78L226.91,22.31C224.54,23.21 221.92,23.21 219.55,22.31L215.52,20.78C213.15,19.88 210.53,19.88 208.16,20.78L204.13,22.31C201.76,23.21 199.14,23.21 196.77,22.31L192.74,20.78C190.37,19.88 187.75,19.88 185.38,20.78L181.35,22.31C178.98,23.21 176.35,23.21 173.98,22.31L169.96,20.78C167.58,19.88 164.96,19.88 162.59,20.78L158.56,22.31C156.19,23.21 153.57,23.21 151.2,22.31L147.17,20.78C144.8,19.88 142.18,19.88 139.81,20.78L135.78,22.31C133.41,23.21 130.79,23.21 128.41,22.31L124.39,20.78C122.01,19.88 119.39,19.88 117.02,20.78L112.99,22.31C110.62,23.21 108,23.21 105.63,22.31L101.6,20.78C99.23,19.88 96.61,19.88 94.24,20.78L90.21,22.31C87.84,23.21 85.22,23.21 82.85,22.31L78.82,20.78C76.45,19.88 73.83,19.88 71.45,20.78L67.43,22.31C65.05,23.21 62.43,23.21 60.06,22.31L56.03,20.78C53.66,19.88 51.04,19.88 48.67,20.78L44.64,22.31C42.27,23.21 39.65,23.21 37.28,22.31L33.25,20.78C30.88,19.88 28.26,19.88 25.89,20.78L21.86,22.31C19.49,23.21 16.87,23.21 14.49,22.31L10.47,20.78C8.09,19.88 5.47,19.88 3.1,20.78L-0.93,22.31C-3.3,23.21 -5.92,23.21 -8.29,22.31L-16,19.38"
android:strokeWidth="0.75947"
android:strokeAlpha="0.22"
android:strokeColor="#322B3A" />
<path
android:fillColor="#00000000"
android:pathData="M348.55,23.99L340.82,26.91C338.46,27.8 335.85,27.8 333.49,26.91L329.42,25.37C327.06,24.48 324.46,24.48 322.1,25.37L318.03,26.91C315.67,27.8 313.07,27.8 310.71,26.91L306.64,25.37C304.28,24.48 301.67,24.48 299.31,25.37L295.25,26.91C292.89,27.8 290.28,27.8 287.92,26.91L283.86,25.37C281.5,24.48 278.89,24.48 276.53,25.37L272.46,26.91C270.1,27.8 267.5,27.8 265.14,26.91L261.07,25.37C258.71,24.48 256.11,24.48 253.75,25.37L249.68,26.91C247.32,27.8 244.71,27.8 242.35,26.91L238.29,25.37C235.93,24.48 233.32,24.48 230.96,25.37L226.9,26.91C224.54,27.8 221.93,27.8 219.57,26.91L215.5,25.37C213.14,24.48 210.54,24.48 208.18,25.37L204.11,26.91C201.75,27.8 199.15,27.8 196.79,26.91L192.72,25.37C190.36,24.48 187.75,24.48 185.39,25.37L181.33,26.91C178.97,27.8 176.36,27.8 174,26.91L169.94,25.37C167.57,24.48 164.97,24.48 162.61,25.37L158.54,26.91C156.18,27.8 153.58,27.8 151.22,26.91L147.15,25.37C144.79,24.48 142.19,24.48 139.83,25.37L135.76,26.91C133.4,27.8 130.79,27.8 128.43,26.91L124.37,25.37C122.01,24.48 119.4,24.48 117.04,25.37L112.97,26.91C110.61,27.8 108.01,27.8 105.65,26.91L101.58,25.37C99.22,24.48 96.62,24.48 94.26,25.37L90.19,26.91C87.83,27.8 85.23,27.8 82.87,26.91L78.8,25.37C76.44,24.48 73.83,24.48 71.47,25.37L67.41,26.91C65.05,27.8 62.44,27.8 60.08,26.91L56.02,25.37C53.65,24.48 51.05,24.48 48.69,25.37L44.62,26.91C42.26,27.8 39.66,27.8 37.3,26.91L33.23,25.37C30.87,24.48 28.27,24.48 25.91,25.37L21.84,26.91C19.48,27.8 16.87,27.8 14.51,26.91L10.45,25.37C8.09,24.48 5.48,24.48 3.12,25.37L-0.94,26.91C-3.31,27.8 -5.91,27.8 -8.27,26.91L-16,23.99"
android:strokeWidth="0.75947"
android:strokeAlpha="0.22"
android:strokeColor="#322B3A" />
<path
android:fillColor="#00000000"
android:pathData="M348.55,28.59L340.82,31.51C338.46,32.41 335.85,32.41 333.49,31.51L329.42,29.98C327.06,29.09 324.46,29.09 322.1,29.98L318.03,31.51C315.67,32.41 313.07,32.41 310.71,31.51L306.64,29.98C304.28,29.09 301.67,29.09 299.31,29.98L295.25,31.51C292.89,32.41 290.28,32.41 287.92,31.51L283.86,29.98C281.5,29.09 278.89,29.09 276.53,29.98L272.46,31.51C270.1,32.41 267.5,32.41 265.14,31.51L261.07,29.98C258.71,29.09 256.11,29.09 253.75,29.98L249.68,31.51C247.32,32.41 244.71,32.41 242.35,31.51L238.29,29.98C235.93,29.09 233.32,29.09 230.96,29.98L226.9,31.51C224.54,32.41 221.93,32.41 219.57,31.51L215.5,29.98C213.14,29.09 210.54,29.09 208.18,29.98L204.11,31.51C201.75,32.41 199.15,32.41 196.79,31.51L192.72,29.98C190.36,29.09 187.75,29.09 185.39,29.98L181.33,31.51C178.97,32.41 176.36,32.41 174,31.51L169.94,29.98C167.57,29.09 164.97,29.09 162.61,29.98L158.54,31.51C156.18,32.41 153.58,32.41 151.22,31.51L147.15,29.98C144.79,29.09 142.19,29.09 139.83,29.98L135.76,31.51C133.4,32.41 130.79,32.41 128.43,31.51L124.37,29.98C122.01,29.09 119.4,29.09 117.04,29.98L112.97,31.51C110.61,32.41 108.01,32.41 105.65,31.51L101.58,29.98C99.22,29.09 96.62,29.09 94.26,29.98L90.19,31.51C87.83,32.41 85.23,32.41 82.87,31.51L78.8,29.98C76.44,29.09 73.83,29.09 71.47,29.98L67.41,31.51C65.05,32.41 62.44,32.41 60.08,31.51L56.02,29.98C53.65,29.09 51.05,29.09 48.69,29.98L44.62,31.51C42.26,32.41 39.66,32.41 37.3,31.51L33.23,29.98C30.87,29.09 28.27,29.09 25.91,29.98L21.84,31.51C19.48,32.41 16.87,32.41 14.51,31.51L10.45,29.98C8.09,29.09 5.48,29.09 3.12,29.98L-0.94,31.51C-3.31,32.41 -5.91,32.41 -8.27,31.51L-16,28.59"
android:strokeWidth="0.75947"
android:strokeAlpha="0.22"
android:strokeColor="#322B3A" />
</vector>
The result I wish should be like this:
But when I implement ic_background_wave.xml as background in my Constraintlayout the wave goes beyond rounding. How to fix it?

It happens because <corners android:radius="16dp" /> is inside <shape> and it applies radius to the shape. The new item with background android:drawable="#drawable/ic_group_wave_backg" is drown on top. That's how Layer List works: Docs
The easiest way would be add corners to the view itself.
It's also possible to play with Layer List. E.g. move item with "ic_group_wave_backg" using:
<item
android:bottom="10dp"
android:drawable="#drawable/ic_group_wave_backg"
android:top="10dp"/>
It will produce gap without waves on the top and on the bottom. However it's possible to add one more item with single wave and moved them similar.
Another solution is preparing svg with waves and background with rounded corners and just import as vector drawable.
All depends on the needs and main purpose.

How can I draw rectangle with "title text" at top right in xml?

I wanna create a rectangle and set a title at left top. Creating a rectangle is easy :
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/listview_background_shape">
<stroke android:width="2dp" android:color="#ff207d94" />
<padding android:left="2dp"
android:top="2dp"
android:right="2dp"
android:bottom="2dp" />
<corners android:radius="5dp" />
<solid android:color="#ffffffff" />
</shape>
But how to set title at left top? I thought creating an SVG and convert that to XML will work. But Android Studio says "The image may be incomplete : Error # line 3 is not supported. I created a design in Photoshop and converted PNG to SVG in internet. Then I found the following result.
Here's the svg file,
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="496px" height="503px" viewBox="0 0 496 503" enable-background="new 0 0 496 503" xml:space="preserve"> <image id="image0" width="496" height="503" x="0" y="0"
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfAAAAH3CAYAAABEqQ1eAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAA
CXBIWXMAABJ0AAASdAHeZh94AAA390lEQVR42u3deZxU9ZX///f53OoGmn13YVMJgooigjGKxl0U
NToxycRJjI5mNJNf1MzkO5PRLGbx+8tjEh/JGMcxjonLzM+ZLCYSRdGJG+6IiKA2i4JsIqBssvRS
dc/vj6qCBhvEeD/Qd+r11KaL7urbt241fep8PudzPhIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAdHi2t0/go5oyZcqZjY2NhyVJUnJ3q7wPknzChAlPjBs3bmbb+z/44IMTGxsbDw0hlNzd
3F3uHoYPHz7/zDPPvL++vt6r933llVdGPvzww2clSVJM09TMzEMIaWtra33//v1XXXDBBf/d0NBQ
3J3zfOCBBya+9tprhxYKhRZJqpyjzMxLpVJSV1fXUiqVkhBCmqZp4u7h4IMPbpw0adLUvX2NAQDI
3He/+93vSfL23s4666yHdrz/aaed9lh79x0xYsTrq1ev7t32vj/84Q+vNbPt7lf9+xe+8IX/bGlp
2e0XQBdffPGd7X3f6vF2/D6S/NOf/vTvP+r1efPNN/ebN2/egfPnzz+gsbHxY/Pnzz9gwYIFwxYs
WDCsubk59y/gAKBWFfb2CXxUEyZMeEKSkiTRmDFjXhkwYMDby5Yt23/OnDmj5s+f/7FVq1b1GTBg
wBpJWrFiRf+xY8eOlqSjjjrq5f79+69qbm4uPPbYYyfNnz//oMWLFw+VtLZ67BkzZhzt7ho1atQb
w4YNe+Pdd9/t89JLL41tbW0N48ePf75ttv5BKgFagwYNWjl69OhZ77zzTr9Zs2Yd1draqur5H3fc
cU916tRpS2Nj46ilS5cOKhaLyUe9Pl/72tdue+WVV44MIRTTNE2SJGkxs9DQ0LDp3nvvPV3S0r39
HAIAatCSJUv2HT169Fwz8x/84Aff2bhxY9cHHnjgjPr6+rRnz54bH3300ROq97333nvPTZLEBwwY
sHbWrFmHb9y4sfPq1at7jxgxYr4kv/766/+pet9XX3314AMPPHCJmfktt9xy+caNG7vec889n2po
aNjSu3fvtdOmTZuwq/MqlUqWpunWDPfiiy++Q5JfdNFF/7Fx48auTz311DH77bffKlWy7Z49e26e
OXPmEe+9916Xyy677FZJfv755//ZGXipVAqlUsnGjRs3S5InSeJdunTxzp07FyV5fX29NzY2jtjb
zx8A4M8T9vYJfFT9+/dfNXr06JfcXfPnzx/Z0NCwecyYMS8ddthhc9avX9/1ueeeO65632nTpp1Y
KpU0ZsyYF4cPHz6/W7duTf379197+umnT5WkqVOnTqred8GCBQcvWbJkcP/+/TeMHz/+hW7dum16
7bXXDtu8eXPngw466M3Ro0fPaXsemzZtqms7JJ0kiYcQtmbo1Qy8UCgUu3XrtqlXr15r6+vrt86f
hxDUtWvXTd27d9/SuXPnLZLk7rsc4t68eXO7IyjFYjEkSZImSeJmVpKkSy+99Ff33Xffad/73vf+
qa6uToVCodi5c+emvf38AQD+PLkeQm9paSnU19cXb7zxxmfuvvvuv5w1a9a4pUuXDt5vv/2WHnro
oS/PnDnz8FmzZh3V0tJSVywW/ZxzzjlSksaMGTOzW7duW4PXMccc88xNN930tUWLFg1funTpoMGD
By+bPXv24cViUcOGDXtjxIgR8zZu3Fj/mc985nhJGjt27Is9e/bcMG/evIOmTZt24vz580d85Stf
Gbh58+au3/72txtHjx49e+zYsS8OHz58UZvTdWlbUE7TNKRp2naI3Kufa21trZOkti8AJKmpqcle
ffXV0TNnzhw3e/bsI770pS/te8kll7x36KGHvjJu3LjpH//4x6d36dKltVQq6fbbb7+4VCqF66+/
vr8kDRs2bOGpp576p6effnp9XV1dqbm5ufAf//EfF/3yl79cLskmTZo0eZ999nl3bz+nAIDdk+sA
Xs1gjz322Kf69OmzYd68eR9bsmTJkKFDhy658cYbn7v77ru/+NJLLx27atWqAWvXru3x2muvHV5X
V6cxY8bMlKTm5ubQqVOndMSIEfN69OixafXq1QOnT59+tKRlTzzxxEmSNGbMmBe7d+++afHixfu+
/PLLRyZJ4p07d958xRVX3PLb3/72orVr13Zu79z22WefNdddd93Pr7zyyp/16dNnXfXjZpZWb1cr
0Su33d23u0/bAD99+vSxV1xxxdcmT5782bVr1zbs+P06depUOumkk/5n2rRp329paXn5q1/96q2b
N2+uq36+paWlvvKYOzc3NyelUknf+c53fiCVs//Jkye/LemBvf2cAgB2T64DeNWhhx762qBBg96a
PXt2j0ceeeRUSU+NHz9+erdu3VoXLVq078qVKwcuXLjwgFWrVvUZNGjQqiOPPPJFSbrnnns+s2rV
qkfq6urmjxkzZua0adOOf+mll8auXbv20eHDhx8pSccff/zjt956q+bMmXP4W2+91T9JErvrrrsu
XrduXfckSXTggQcuHTly5Gv9+vVb7e62evXqATNnzjz67bff7nPdddd9d9asWUdt2LDhwq9//evp
DqddrTZ/39+rw+0hhFSS/vjHP0764he/eNO8efOG1dXV6bDDDps7fPjwBf369Vu9YcOGHq+//vrH
Zs+effjUqVMnzpgx45h/+qd/+l71RcCECROe6d2797phw4YtlKS+ffuuPf/88ye3tLTUbdq0qdOT
Tz55UqlUCmYUpAMA9oJLLrnkLkl+wgknPFcqlUJLS4sddNBByyT5T3/606//4z/+4/8ryU888cSn
isViWLFiRa9PfOITzz/99NPHStKVV175M0n+F3/xF5Pvueee8yV5t27dtixcuHCIJH35y1++VW2W
ex188MGv33DDDX+3aNGiocViMWlpaamTpGKxmLz66qujrrrqqp9VC8auuuqqGy+77LJfSvK//uu/
/pUkzZ49e+TgwYO3FrH16tVrQ2Nj43BJuuKKK26S5H/5l3/533/6059OHjx48EpJPmrUqPm33Xbb
patWrerbtkBuw4YN3aZOnXrauHHjXpTkdXV1aaFQcEk+ZcqUiTteq1KpFCRp+fLlfXr16rXWzHzK
lCln7+3nEABQg+67776zJXlDQ4OvWbOmtyRdcsklt0vyU0455bHx48dPl+TXXnvt9ZL05JNPflyS
33777RdL0n//939/plAo+JAhQ1ZMmjRpiiQ/5phjnq8OQ48dO/ZlVYLtmDFjXpk+ffp4Sdq0aVPh
mWeeOeYXv/jF5b/85S8vffHFF8dWz+lb3/rW9yX5wIED1x988MGva/sAfvAOAXx9Y2PjQdK2AP7J
T35y2kknnfRY5VxmzJgxY6wkbdy4se6JJ56Y8J//+Z9/9cADD0xcuXJlH0launTpvmedddYUVarO
Jfn3vve9bz3wwAOnv/nmm4MkaeXKlb0efvjhUx588MHT77777s917dq1JYTg999//6f29nMIANh9
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
re/cpalnQ7dNe/zJAoD/5UJISukH10D9eceOddImBSnd47udDR6031sHHVQu+vrjH/9wniRdcMEF
/3XyySc/LElTpkw5V5LGjBkzY99991150kknPRpC0COPPHL6+vXrux588MFzv/zlL9+aJIlPmzbt
pHXr1nUfMmTI8n322We5JPXt2/ddSVq8ePEBzzzzzImStP/++7972mmnPT5w4MC1aZpq2LBhr/fo
0WPDtktRXj8uScVicWt/8rZ90dM0Taqbl1RfpSVJorVr13abOXPmeEk6//zzf1tfXy8zU48ePZpP
O+20x4855pgXq9Xx48ePnzl+/PiZAwYMeLeSoW8tnqvMiau1tbmTJGtuaqq/9ppv/vPEM8+c9t3v
fPsnLaWPvvc4AGB7wT2x6qrwjIv/ogXY1LyU7WDB7qnv1CU97bRTH5KkqQ9OPUeSTjzxxMcPOeSQ
195+++2BL7744tGSNGnSpMmSdMIJJzxWKBTS2bNnH7JixYp9hw8fvmTixIkPStKzzz57bGtrq448
8sgZhxxyyKuStGLFiv3SNLVBgwYt69ev30pJeuedd/o+9thjp6xcubJ3586d06uvvvpnBxxwwFJp
25ruNtXgW1citB1OCSFsve+OX3PbbbddUTnnqZdccsmt7q4NGzZ0euihh056/vnnjyqVShoyZMhb
N95441enTJlyyuWXX/6vktSjR4+m/fff/y1J2rhxYzdJOuSQQ17r1q3rZkma/Ic/nvXi8zMOmfLH
+84utTTX7/lnCwD+dwvuhSCXefZFYbFCrFVnW/ek5uZyEDr55FP/FELQsqVvDV6wYP7wLl26NHXu
3Ln5hRdeGL9ixYqBPXv2bJkwYcKTknTEEUfMGjhw4NuS9OCDD54tSV27dm1au3Zt95kzZx4tSUce
eeSLZ5555gOSNHXq1LNXrlw5oH///ut/8Ytf/PW55577wAEHHPDmiBEjXj/99NMfv/nmmy/73Oc+
95umpqZOkpSm6XbTFFaJzu6etN0utFQqdSqVStXsPEjSgQceuKS+vj594YUXxv/85z//fyTphhtu
+Lt//ud//scTTzzxmTFjxrx6+OGHv3rBBRfce+edd/7VJz7xiefMLH3ppZeOKl+Hk6dOmDBhmiTN
nDnzKEkaNGjwih//+CdfP/fccx8644wz/iRJS99cOmjl2+VldQCALAW1CbUdu+7Im9bX/fIb33ji
O+ddsKHx+eln7MnvXSqVN/hobJz7saFDhy6vq6vztp3SvvWtb10vyU8++eQn1q5d27P68YsuuuhO
SX7eeedNrn7sueeeO7pHjx6bGxoa/MEHH5y4fPnyAQMHDnxHkn/pS1+6c/Xq1b2r9124cOEBS5Ys
GdzU1FS/adOmTlddddXPX3nllUMlVbfsTKuboFx22WW/Kp9j48eGDRu2VJV17n379t0yf/78j0nS
V7/61Zsl+ac+9an7Lr300tskeffu3Ys//vGPv1HdNKWlpaVu5cqVA1auXDmgeh7Lli3b7/Of//xv
kiTxXr16bZo6deoZf/jDH86W5PX19f6rX/3qkrbXa+2atQ39+/Z/t5Akfvf/d/df7cnnCgBqwepX
5579k4sv85v+5m99zbLFH8/y2DEycDNXeczf4w3RtydJyhnt4CFDFx9++BEvtba26re//d1nJk++
99x77733U9U9vj/+8Y8/3bt37/XVrzvttNOmStKTTz55/G233XbJ/fffP/F3v/vdZzZs2NBl8ODB
bx5++OEv77///qv+4R/+4YeSdOedd1504YUX/mbKlClnvP7660Pr6uqa3V0vv/zy4X//93//05tv
vvlvp0yZMmny5MlnL1q0aFjbYrL58+eP+N3vfvfpP/3pT6e3tLRs7eS2ZcuWTvfcc8+nJ0+efM6C
BQuGS1KnTp2arr/++n845phjnnvvvfeSa6655seTJk168Pe///15y5Yt22/Tpk1dNm/e3GnOnDmH
/PznP//aBRdccP9//dd/fcbdddVVV91w8sknPzpx4sQHzz777PtbWlp09dVX33zVlVf/yxOPTzt+
0RuLhr32WuMR/fsPeLdYKum558utZQEA2XGpMm/q23qjd1TetL7TnX/3jed+cM6nm+Y++9ykPf39
S6WSSVJl17G2vdRTSV4oFPzXv/71BW2/Zvr06Uf27NlzS/V+Zlaqft2nP/3pe6v3a25uDtdcc80P
u3fv3qRtmfN7I0eOfH3o0KErGhoaduzf/pHezjvvvPulcrvXz372s79p+7k+ffps3nfffdfus88+
63r16tVc/fjAgQPXXXfddddVpxMkaf78+QdOnDjxoep9unTp4v3799/Yo0eP6mP2008//dGWlhYK
2QAgQ++82vipn150qf/r5Veka5Yt+kSWx46yG5lJSblL7J5/tVHZRlMnnHDC43fcccflTU1NXcys
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" />
</svg>

How to make loading animation in android xml

I would like to create an Animation with 3 dots (one Is bigger than the other two and have different color), this animation should loop at start center one should be bigger after that dot on the right should be bigger and change color.
I created this XML:
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
xmlns:android="http://schemas.android.com/apk/res/android">
<aapt:attr name="android:drawable">
<vector
android:width="300dp"
android:height="80dp"
android:viewportWidth="300"
android:viewportHeight="80">
<path
android:name="left_selected"
android:pathData="M30,44m-30,0a30,30 0,1 1,60 0a30,30 0,1 1,-60 0"
android:fillColor="#CBA818"/>
<path
android:name="center"
android:pathData="M150,40m-40,-0a40,40 0,1 0,80 -0a40,40 0,1 0,-80 -0"
android:fillColor="#757575"/>
<path
android:name="right"
android:pathData="M270,44m-30,-0a30,30 0,1 0,60 -0a30,30 0,1 0,-60 -0"
android:fillColor="#757575"/>
</vector>
</aapt:attr>
<target android:name="path">
<aapt:attr name="android:animation">
<set>
<objectAnimator
android:duration="217"
android:interpolator="#android:interpolator/fast_out_slow_in"
android:propertyName="pathData"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:valueFrom="..."
android:valueTo=..."
android:valueType="pathType" />
<objectAnimator
android:duration="144"
android:interpolator="#android:interpolator/fast_out_slow_in"
android:propertyName="pathData"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:startOffset="217"
android:valueFrom="..."
android:valueTo="..."
android:valueType="pathType" />
<objectAnimator
android:duration="239"
android:interpolator="#android:interpolator/fast_out_slow_in"
android:propertyName="pathData"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:startOffset="361"
android:valueFrom="..."
android:valueTo="..."
android:valueType="pathType" />
</set>
</aapt:attr>
</target>
</animated-vector>
How could I change a color of dot in animation tag? Is my way of thinking correct with this approach?

You can try this approach
XML:-
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/clCenterArrows"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#id/ivImage"
app:layout_constraintEnd_toEndOf="#id/ivImage"
app:layout_constraintStart_toStartOf="#id/ivImage"
app:layout_constraintTop_toTopOf="#id/ivImage">
<ImageView
android:id="#+id/ivArrows"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_tag_instruction_arrows"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/vTagCenter"
android:layout_width="#dimen/d12"
android:layout_height="#dimen/d12"
android:background="#drawable/rounded_fill_red"
app:layout_constraintBottom_toBottomOf="#id/ivArrows"
app:layout_constraintEnd_toEndOf="#id/ivArrows"
app:layout_constraintStart_toStartOf="#id/ivArrows"
app:layout_constraintTop_toTopOf="#id/ivArrows" />
<View
android:id="#+id/vAnim1"
android:layout_width="#dimen/d12"
android:layout_height="#dimen/d12"
android:background="#drawable/rounded_fill_red"
app:layout_constraintBottom_toBottomOf="#id/ivArrows"
app:layout_constraintEnd_toEndOf="#id/ivArrows"
app:layout_constraintStart_toStartOf="#id/ivArrows"
app:layout_constraintTop_toTopOf="#id/ivArrows" />
<View
android:id="#+id/vAnim2"
android:layout_width="#dimen/d12"
android:layout_height="#dimen/d12"
android:background="#drawable/rounded_fill_red"
app:layout_constraintBottom_toBottomOf="#id/ivArrows"
app:layout_constraintEnd_toEndOf="#id/ivArrows"
app:layout_constraintStart_toStartOf="#id/ivArrows"
app:layout_constraintTop_toTopOf="#id/ivArrows" />
</androidx.constraintlayout.widget.ConstraintLayout>
Kotlin:-
val runnableAnim = object : Runnable {
override fun run() {
vAnim1?.visibility = View.VISIBLE
vAnim2?.visibility = View.VISIBLE
vAnim1
?.animate()
?.scaleX(3f)
?.scaleY(3f)
?.alpha(0f)
?.setDuration(1000)
?.withEndAction {
kotlin.run {
vAnim1?.scaleX = 1f
vAnim1?.scaleY = 1f
vAnim1?.alpha = 1f
}
}
vAnim2
?.animate()
?.scaleX(3f)
?.scaleY(3f)
?.alpha(0f)
?.setDuration(700)
?.withEndAction {
kotlin.run {
vAnim2?.scaleX = 1f
vAnim2?.scaleY = 1f
vAnim2?.alpha = 1f
}
}
animationHandler.postDelayed(this, 1500)
}
}
runnableAnim.run()
This is the output of the animation

Android Animated Vector Drawable doesn't work properly

I have the following ImageView
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_header_toggle"
android:layout_width="28dp"
android:layout_height="28dp"
android:layout_marginEnd="10dp"
app:layout_constraintBottom_toBottomOf="#+id/text_header_name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/text_header_name"
android:src="#drawable/ic_header_off_to_on"
app:tint="?attr/colorPrimary"/>
and two animated drawables that I made through https://shapeshifter.design/
ic_header_off_to_on.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="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<group
android:name="group"
android:pivotX="12"
android:pivotY="12">
<path
android:name="path_1"
android:pathData="M 15.41 16.58 L 10.83 12 L 15.41 7.41 L 14 6 L 8 12 L 14 18 L 15.41 16.58 Z"
android:fillColor="#000"
android:strokeWidth="1"/>
</group>
</vector>
</aapt:attr>
<target android:name="group">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="rotation"
android:duration="300"
android:valueFrom="0"
android:valueTo="-90"
android:valueType="floatType"
android:interpolator="#android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
</animated-vector>
ic_header_on_to_off.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="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<group
android:name="group"
android:pivotX="12"
android:pivotY="12"
android:rotation="270">
<path
android:name="path_1"
android:pathData="M 15.41 16.58 L 10.83 12 L 15.41 7.41 L 14 6 L 8 12 L 14 18 L 15.41 16.58 Z"
android:fillColor="#000"
android:strokeWidth="1"/>
</group>
</vector>
</aapt:attr>
<target android:name="group">
<aapt:attr name="android:animation">
<objectAnimator
android:propertyName="rotation"
android:duration="300"
android:valueFrom="270"
android:valueTo="0"
android:valueType="floatType"
android:interpolator="#android:interpolator/fast_out_slow_in"/>
</aapt:attr>
</target>
</animated-vector>
and this code that I use to toggle the icons
val res = if (isExpanded) R.drawable.ic_header_off_to_on else R.drawable.ic_header_on_to_off
image_header_toggle.setImageResource(res)
(view.image_header_toggle.drawable as? AnimatedVectorDrawable)?.start()
image_header_toggle.setOnClickListener { isExpanded = !isExpanded }
The off_to_on animation seems to play nicely but the on_to_off one doesn't, the image simply gets replace.
It looks like this >_<

I just found this question and tried something out. A more elegant solution is to remove your Kotlin code with mine. This will achieve a smooth transition and you even can change the duration of it. Instead of needing 2 drawables you can just use one. If you are using Fragment instead of Activity, don't forget to set view.findViewById instead of findViewById:
class MainActivity : AppCompatActivity() {
private var isExpanded = true
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val imageView = findViewById<ImageView>(R.id.image_header_toggle)
imageView.setOnClickListener {
if (!isExpanded) {
imageView.animate().apply {
duration = 500
rotation(0f)
isExpanded = true}
}else{
imageView.animate().apply {
duration = 500
rotation(-90f)
isExpanded = false}
}
}
}
}

Android FloatingActionButton Speed Dial

I am currently working on an Android app in which I use a FloatingActionButton. I would like to use the speed dial to have multiple actions that spin/jump out of the action button as described in this page by Google on Android design, or as could be seen in an earlier version of the Keep app (sorry, but I can only post one link). I am using the Android Design Support library specifically version 23.1.1 (com.android.support:design:23.1.1). I already searched using Google and looked at the reference for the FloatingActionButton but couldn't find anything concerning the speed dial.
I would like to know if there is a way to easily achieve this using the default FloatingActionButton, or if I have to program all transitions/animations manually?
Additionally I would like to have little labels next to the buttons, describing the action, if possible.
Thank you in advance!

I'm here to add my 2 cents because this is where I landed after Googling for that exact title.
I hope it doesn't come too late to help someone like me.
First off, the solution comes from here, so is not mine. I just tried and it works nicely. So i thought i share with you in a single post rather have you go dig the code up from there.
The solution uses com.android.support:design:25.3.1 library so be sure to add that to build.gradle and it requires API 21 onwards.
The bad news is that it is composed from several small moving parts: 5 animators, 5 drawables plus the icons and layouts and of course, the code, the good news is that it works as it should, is highly customizable and doesn't require any coding outside MainActivity.
Some notes:
The big fab's image morphs between more and minus signs and rotates when tapped.
Buttons can have text, provided you put both the text and each small fab inside a LineaLayout and move the button id to the LinearLayout so it gets animated instead of the fab, but it requires code to hide and show the text when necessary.
This is the result:
So, the ingredients:
Drawables (res/drawable/).
animated_minus.xml
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportHeight="24"
android:viewportWidth="24"
android:width="24dp"
android:height="24dp">
<group android:name="plus_group" android:pivotX="12" android:pivotY="12">
<path
android:name="plus_path"
android:strokeColor="#android:color/white"
android:strokeWidth="3"
android:pathData="M12,0L12,24M0,12,L24,12" />
</group>
</vector>
animated_plus.xml
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/plus">
<target
android:animation="#animator/rotate_clockwise"
android:name="plus_group" />
<target
android:animation="#animator/plus_to_minus"
android:name="plus_path" />
</animated-vector>
fab_background.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item>
<shape android:shape="oval">
<solid android:color="?android:colorAccent" />
</shape>
</item>
</ripple>
minus.xml
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportHeight="24"
android:viewportWidth="24"
android:width="24dp"
android:height="24dp">
<group android:name="plus_group" android:pivotX="12" android:pivotY="12">
<path
android:name="plus_path"
android:strokeColor="#android:color/white"
android:strokeWidth="3"
android:pathData="M12,12L12,12M0,12,L24,12" />
</group>
</vector>
plus.xml
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportHeight="24"
android:viewportWidth="24"
android:width="24dp"
android:height="24dp">
<group android:name="plus_group" android:pivotX="12" android:pivotY="12">
<path
android:name="plus_path"
android:strokeColor="#android:color/white"
android:strokeWidth="3"
android:pathData="M12,0L12,24M0,12,L24,12" />
</group>
</vector>
Animators (res/animator/).
fab_state_list_animator.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:state_enabled="true">
<set>
<objectAnimator
android:propertyName="translationZ"
android:duration="100"
android:valueTo="3dp"
android:valueType="floatType" />
<objectAnimator
android:propertyName="elevation"
android:duration="0"
android:valueTo="5dp"
android:valueType="floatType" />
</set>
</item>
<!-- base state -->
<item android:state_enabled="true">
<set>
<objectAnimator
android:propertyName="translationZ"
android:duration="100"
android:valueTo="0"
android:startDelay="100"
android:valueType="floatType" />
<objectAnimator
android:propertyName="elevation"
android:duration="0"
android:valueTo="5dp"
android:valueType="floatType" />
</set>
</item>
<item>
<set>
<objectAnimator
android:propertyName="translationZ"
android:duration="0"
android:valueTo="0"
android:valueType="floatType" />
<objectAnimator
android:propertyName="elevation"
android:duration="0"
android:valueTo="0"
android:valueType="floatType" />
</set>
</item>
</selector>
minus_to_plus.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="pathData"
android:valueFrom="M12,0L12,24M12,12,L12,12"
android:valueTo="M12,0L12,24M0,12,L24,12"
android:valueType="pathType"
android:duration="#android:integer/config_mediumAnimTime" />
plus_to_minus.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="pathData"
android:valueFrom="M12,0L12,24M0,12,L24,12"
android:valueTo="M12,0L12,24M12,12,L12,12"
android:valueType="pathType"
android:duration="#android:integer/config_mediumAnimTime" />
rotate_anticlockwise.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="rotation"
android:valueFrom="90"
android:valueTo="0"
android:valueType="floatType"
android:duration="#android:integer/config_mediumAnimTime" />
rotate_clockwise.xml
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="90"
android:valueType="floatType"
android:duration="#android:integer/config_mediumAnimTime" />
Layouts. (res/layout/)
fab.xml. All fabs are declared here. Replace android:src with your own icon on the first 3 ImageButtons.
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:id="#+id/fab_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/activity_vertical_margin"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:clipChildren="false" >
<!-- Please note that the #id are defined the first time they're referenced from top to bottom -->
<ImageButton
android:id="#+id/fab_action_3"
style="#style/FloatingActionButton.Mini"
android:src="#drawable/ic_volume_up_white_24dp"
android:layout_above="#+id/fab_action_2"
android:layout_alignEnd="#+id/fab"
android:contentDescription="#null"
android:backgroundTint="#color/sa_gray"
android:width="24dp"
android:height="24dp"
android:onClick="fabAction3" />
<ImageButton
android:id="#id/fab_action_2"
style="#style/FloatingActionButton.Mini"
android:src="#drawable/ic_credit_card_white_24dp"
android:layout_above="#+id/fab_action_1"
android:layout_alignEnd="#id/fab"
android:contentDescription="#null"
android:backgroundTint="#color/sa_gray"
android:width="24dp"
android:height="24dp"
android:onClick="fabAction2" />
<ImageButton
android:id="#id/fab_action_1"
style="#style/FloatingActionButton.Mini"
android:src="#drawable/ic_add_shopping_cart_white_24dp"
android:layout_above="#id/fab"
android:layout_alignEnd="#id/fab"
android:contentDescription="#null"
android:backgroundTint="#color/sa_gray"
android:width="24dp"
android:height="24dp"
android:onClick="fabAction1" />
<ImageButton
android:id="#id/fab"
style="#style/FloatingActionButton"
android:src="#mipmap/ic_add_w"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:contentDescription="#null"
android:visibility="visible"
android:layout_marginTop="8dp" />
</RelativeLayout>
</merge>
And lastly.
The code (java//MainActivity.java)
a) Some declarations:
private static final String TAG = "Floating Action Button";
private static final String TRANSLATION_Y = "translationY";
private ImageButton fab;
private boolean expanded = false;
private View fabAction1;
private View fabAction2;
private View fabAction3;
private float offset1;
private float offset2;
private float offset3;
b) Delete the usual fab code on MainActivity's onCreate:
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
and replace it with:
final ViewGroup fabContainer = (ViewGroup) findViewById(R.id.fab_container);
fab = (ImageButton) findViewById(R.id.fab);
fabAction1 = findViewById(R.id.fab_action_1);
// insert onClickListener here
fabAction2 = findViewById(R.id.fab_action_2);
// insert onClickListener here
fabAction3 = findViewById(R.id.fab_action_3);
// insert onClickListener here
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
expanded = !expanded;
if (expanded) {
expandFab();
} else {
collapseFab();
}
}
});
fabContainer.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
#Override
public boolean onPreDraw() {
fabContainer.getViewTreeObserver().removeOnPreDrawListener(this);
offset1 = fab.getY() - fabAction1.getY();
fabAction1.setTranslationY(offset1);
offset2 = fab.getY() - fabAction2.getY();
fabAction2.setTranslationY(offset2);
offset3 = fab.getY() - fabAction3.getY();
fabAction3.setTranslationY(offset3);
return true;
}
});
c) Add supporting functions on MainActivity (animation code mostly and the 3 small fab's onClick methods):
private void collapseFab() {
fab.setImageResource(R.drawable.animated_minus);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(createCollapseAnimator(fabAction1, offset1),
createCollapseAnimator(fabAction2, offset2),
createCollapseAnimator(fabAction3, offset3));
animatorSet.start();
animateFab();
}
private void expandFab() {
fab.setImageResource(R.drawable.animated_plus);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(createExpandAnimator(fabAction1, offset1),
createExpandAnimator(fabAction2, offset2),
createExpandAnimator(fabAction3, offset3));
animatorSet.start();
animateFab();
}
private Animator createCollapseAnimator(View view, float offset) {
return ObjectAnimator.ofFloat(view, TRANSLATION_Y, 0, offset)
.setDuration(getResources().getInteger(android.R.integer.config_mediumAnimTime));
}
private Animator createExpandAnimator(View view, float offset) {
return ObjectAnimator.ofFloat(view, TRANSLATION_Y, offset, 0)
.setDuration(getResources().getInteger(android.R.integer.config_mediumAnimTime));
}
private void animateFab() {
Drawable drawable = fab.getDrawable();
if (drawable instanceof Animatable) {
((Animatable) drawable).start();
}
}
public void fabAction1(View view) {
Log.d(TAG, "Action 1");
Toast.makeText(this, "Go shopping!", Toast.LENGTH_SHORT).show();
}
public void fabAction2(View view) {
Log.d(TAG, "Action 2");
Toast.makeText(this, "Gimme money!", Toast.LENGTH_SHORT).show();
}
public void fabAction3(View view) {
Log.d(TAG, "Action 3");
Toast.makeText(this, "Turn it up!", Toast.LENGTH_SHORT).show();
}
d) Reference the fab.xml layout from res/layout/activity_main.xml
Delete the fab declaration:
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email" />
Replace with:
<include layout="#layout/fab" />
Last notes:
Feel free to scrap the onClick code for the fabs and replace it with
onClickListener. Those should go right where the comment that says
// insert onClickListener here. Just remember to delete the
onClick attribute for each fab in fab.xml file and get rid of
the last 3 functions in MainActivity (fabAction1, fabAction2
and fabAction3).
Most measures, dimensions, etc. I put them right in the code to avoid including even more files.
The code is not optimized on changed in any way.
I hope this helps someone and sorry for the wall of text.

I would like to know if there is a way to easily achieve this using the default FloatingActionButton
FAB from Design Library does not have this feature. You need to look for 3rd party FABs (there's a few on android-arsenal to choose from)

This library is implementing the Speed Dial from the Material Design guidelines:
https://github.com/leinardi/FloatingActionButtonSpeedDial

Categories

Resources