If you are not read yet the part-02 blog then first of all you read and implement part-01 visit CLICK HERE. Because this blog linked with part-02

In this blog, we can learn and create Facebook, Google, and Phone Authentication icons which is help to sign in with third-party applications.

First, we have to create an XML layout under a drawable folder named facebook. After that below Facebook code paste in your project.

IF YOU NOT UNDERSTAND THEN CLICK HERE

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">

<path
android:fillColor="@color/purple_700"
android:pathData="M15.997 3.985h2.191v-3.816c-0.378-0.052-1.678-0.169-3.192-0.169-3.159 0-5.323 1.987-5.323 5.639v3.361h-3.486v4.266h3.486v10.734h4.274v-10.733h3.345l0.531-4.266h-3.877v-2.939c0.001-1.233 0.333 -2.077 2.051-2.077z" />
</vector>

Now, we have to create a Google Icon process that will the same as the above process. You can create one more XML layout to insert google icon code-named google which is given below.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="512dp"
android:height="512dp"
android:viewportWidth="512"
android:viewportHeight="512">
<path
android:fillColor="#59C36A"
android:pathData="M420.7 450.7c-44.4 37.5 -101.999 61.3 -164.7 61.3 -93.3 0 -175.201 -51.4 -219.6 -126.4l16.622 -76.622 73.678 -13.678c17.1 55.199 68.699 95.7 129.3 95.7 29.399 0 56.7 -9.3 79.2 -25.8l70.8 10.8z" />
<path
android:fillColor="#00A66C"
android:pathData="M420.7 450.7l-14.7 -74.7 -70.8 -10.8c-22.5 16.5 -49.801 25.8 -79.2 25.8v121c62.701 0 120.3 -23.8 164.7 -61.3z" />
<path
android:fillColor="#FFDA2D"
android:pathData="M121 256c0 13.799 2.1 26.999 5.7 39.3l-90.3 90.3c-22.5 -37.8 -36.4 -82.201 -36.4 -129.6 0 -47.401 13.9 -91.8 36.4 -129.6l72.473 12.473 17.827 77.827c-3.6 12.299 -5.7 25.499 -5.7 39.3z" />
<path
android:fillColor="#4086F4"
android:pathData="M512 256c0 77.999 -36.099 147.9 -91.3 194.7l-85.5 -85.5c17.399 -12.601 32.1 -29.401 41.7 -49.2h-120.9c-8.401 0 -15 -6.601 -15 -15v-90c0 -8.401 6.599 -15 15 -15h236.8c7.2 0 13.5 5.099 14.7 12.299 3 15.601 4.5 31.8 4.5 47.701z" />
<path
android:fillColor="#4175DF"
android:pathData="M376.901 316c-9.6 19.799 -24.302 36.599 -41.7 49.2l85.499 85.5c55.201 -46.8 91.3 -116.7 91.3 -194.7 0 -15.901 -1.5 -32.1 -4.501 -47.701 -1.199 -7.2 -7.5 -12.299 -14.7 -12.299h-236.799v120z" />
<path
android:fillColor="#FF641A"
android:pathData="M424.9 71.499c0.3 4.2 -1.5 8.101 -4.2 11.1l-64.2 63.9c-5.099 5.4 -13.499 6 -19.499 1.5 -23.702 -17.699 -51.602 -26.999 -81.001 -26.999 -60.601 0 -112.2 40.499 -129.3 95.7l-90.3 -90.3c44.399 -75 126.3 -126.4 219.6 -126.4 59.7 0 117.9 22 163.5 60.399 3.3 2.701 5.1 6.9 5.4 11.1z" />
<path
android:fillColor="#F03800"
android:pathData="M337 147.999c6 4.501 14.399 3.9 19.499 -1.5l64.2 -63.9c2.701 -2.999 4.501 -6.899 4.2 -11.1s-2.1 -8.399 -5.4 -11.1c-45.599 -38.399 -103.799 -60.399 -163.499 -60.399v121c29.399 0 57.299 9.3 81 26.999z" />
</vector>

And Last, we have to create a Phone Icon process that will the same as the above process. You can create one more XML layout to insert google icon code-named phone which is given below.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="513.64dp"
android:height="513.64dp"
android:viewportWidth="513.64"
android:viewportHeight="513.64">
<path
android:fillColor="@color/purple_700"
android:pathData="M499.66 376.96l-71.68 -71.68c-25.6 -25.6 -69.12 -15.359 -79.36 17.92c-7.68 23.041 -33.28 35.841 -56.32 30.72c-51.2 -12.8 -120.32 -79.36 -133.12 -133.12c-7.68 -23.041 7.68 -48.641 30.72 -56.32c33.28 -10.24 43.52 -53.76 17.92 -79.36l-71.68 -71.68c-20.48 -17.92 -51.2 -17.92 -69.12 0l-48.64 48.64c-48.64 51.2 5.12 186.88 125.44 307.2c120.32 120.32 256 176.641 307.2 125.44l48.64 -48.64C517.581 425.6 517.581 394.88 499.66 376.96z" />
</vector>

Now, remaining code will be available in Part-04 CLICK HERE


0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *