एंड्रॉइड में हार्ट (लव) आकार कैसे बनाएं?

एंड्रॉइड में वेक्टर ड्रॉएबल से हार्ट (दिल) आकार बनाना

यह ट्यूटोरियल दिखाता है कि एक सुंदर लाल हार्ट आकार वेक्टर XML में कैसे बनाएं - पसंदीदा, लाइक, स्वास्थ्य ऐप्स के लिए आदर्श।

चरण 1: नया प्रोजेक्ट बनाएं

Android Studio में File → New Project चुनें।

चरण 2: लेआउट (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_marginTop="30dp"
    tools:context=".MainActivity">
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/background" />
</LinearLayout>

चरण 3: वेक्टर ड्रॉएबल (drawable/background.xml)

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="https://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#E91E63"
        android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z" />
</vector>

सरल हार्ट पाथ

<!-- सरल हार्ट (24x24 व्यूपोर्ट) -->
<path
    android:fillColor="#E91E63"
    android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z" />

<!-- भरा हुआ हार्ट (सॉलिड) -->
<path android:fillColor="#FF0000" android:pathData="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />

<!-- आउटलाइन हार्ट -->
<path
    android:fillColor="@android:color/transparent"
    android:strokeColor="#E91E63"
    android:strokeWidth="2"
    android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z" />

ग्रेडिएंट हार्ट

<vector ...>
    <path android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z">
        <aapt:attr name="android:fillColor">
            <gradient
                android:type="linear"
                android:startColor="#FF6B6B"
                android:endColor="#EE5A24"
                android:startX="12" android:startY="4"
                android:endX="12" android:endY="20" />
        </aapt:attr>
    </path>
</vector>

एनिमेटेड हार्ट (लाइक एनिमेशन)

<!-- res/drawable/heart_beat.xml -->
<animated-vector xmlns:android="https://schemas.android.com/apk/res/android">
    <aapt:attr name="android:drawable">@drawable/heart</aapt:attr>
    <target android:name="heart_path">
        <aapt:attr name="android:animation">
            <set android:ordering="sequentially">
                <objectAnimator
                    android:propertyName="scaleX"
                    android:duration="150"
                    android:valueFrom="1.0" android:valueTo="1.3" />
                <objectAnimator
                    android:propertyName="scaleY"
                    android:duration="150"
                    android:valueFrom="1.0" android:valueTo="1.3" />
                <objectAnimator
                    android:propertyName="scaleX"
                    android:duration="150"
                    android:valueFrom="1.3" android:valueTo="1.0" />
                <objectAnimator
                    android:propertyName="scaleY"
                    android:duration="150"
                    android:valueFrom="1.3" android:valueTo="1.0" />
            </set>
        </aapt:attr>
    </target>
</animated-vector>

उपयोग केस

• लाइक/पसंदीदा बटन
• हेल्थ/फिटनेस ऐप्स (हार्ट रेट)
• डेटिंग/सोशल ऐप्स
• डोनेशन/चैरिटी ऐप्स
• वैलेंटाइन/स्पेशल इवेंट थीम

मटेरियल आइकन विकल्प

<!-- मटेरियल आइकन से -->
<ImageView android:src="@drawable/ic_favorite_24" ... />
<!-- भरा हुआ -->
<ImageView android:src="@drawable/ic_favorite_border_24" ... />
<!-- आउटलाइन -->

ऐप टेस्ट करें

चलाएं - लाल/गुलाबी हार्ट 100x100dp में केंद्रित दिखेगा।