Skip to content

Instantly share code, notes, and snippets.

@alexjlockwood
Last active December 11, 2018 19:30
Show Gist options
  • Save alexjlockwood/2d163aa6138a7f8894d76991456a9f68 to your computer and use it in GitHub Desktop.
Save alexjlockwood/2d163aa6138a7f8894d76991456a9f68 to your computer and use it in GitHub Desktop.
VectorDrawable definitions for play, pause, and record icons with additional group transformations
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="48dp"
android:height="48dp"
android:viewportHeight="12"
android:viewportWidth="12">
<!-- Rotate the canvas, then translate, then scale, then draw the pause icon. -->
<group android:scaleX="1.5" android:pivotX="6" android:pivotY="6">
<group
android:rotation="90" android:pivotX="6" android:pivotY="6"
android:translateX="2">
<!-- This path draws two green stroked vertical pause bars. -->
<path
android:name="pause_path"
android:pathData="M 4,2.5 L 4,9.5 M 8,2.5 L 8,9.5"
android:strokeColor="#0F9D58"
android:strokeWidth="2"/>
</group>
</group>
</vector>
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="48dp"
android:height="48dp"
android:viewportHeight="12"
android:viewportWidth="12">
<!-- Translate the canvas, then rotate, then scale, then draw the play icon. -->
<group android:scaleX="1.5" android:pivotX="6" android:pivotY="6">
<group android:rotation="90" android:pivotX="6" android:pivotY="6">
<group android:translateX="2">
<!-- This path draws an orange triangular play icon. -->
<path
android:name="play_path"
android:fillColor="#FF9800"
android:pathData="M 4,2.5 L 4,9.5 L 9.5,6 Z"/>
</group>
</group>
</group>
</vector>
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="48dp"
android:height="48dp"
android:viewportHeight="12"
android:viewportWidth="12">
<!-- Scale the canvas, then rotate, then translate, then draw the record icon. -->
<group android:translateX="2">
<group
android:rotation="90"
android:scaleX="1.5"
android:pivotX="6"
android:pivotY="6">
<!-- This path draws a red circle. -->
<path
android:name="record_path"
android:fillColor="#DB4437"
android:pathData="M 2,6 C 2,3.79 3.79,2 6,2 C 8.21,2 10,3.79 10,6 C 10,8.21 8.21,10 6,10 C 3.79,10 2,8.21 2,6"/>
</group>
</group>
</vector>
@Shobaky
Copy link

Shobaky commented Oct 17, 2018

that causes the image to be clipped :/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment