Drawable resources are graphics or images that you place inside the res/drawable folder of your Android project.

Drawables are used for:

• Backgrounds
• Buttons
• Borders
• Icons
• Custom shapes
• Gradients
• Vector graphics

Android uses XML drawables to reduce PNG usage and create scalable UI.

---

1️⃣ Shape Drawables

A shape drawable is an XML file that defines a geometric shape such as:

• Rectangle
• Oval
• Line
• Ring

You can customize:

• Corners (rounded shape)
• Stroke (border)
• Color (solid fill)
• Padding
• Size

✔ Example: Rounded Button Background

📄 File: res/drawable/rounded_button.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#3F51B5"/>   <!-- Background color -->

    <corners android:radius="16dp"/>   <!-- Rounded corners -->

    <padding
        android:left="12dp"
        android:top="12dp"
        android:right="12dp"
        android:bottom="12dp"/>

    <stroke
        android:width="2dp"
        android:color="#303F9F"/>       <!-- Border -->
</shape>

📌 Usage in XML Layout:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Login"
    android:background="@drawable/rounded_button"/>

---

2️⃣ Gradient Drawables

A gradient drawable creates a smooth mix of two or more colors.

You can set:

• Gradient type: linear, radial, sweep
• Start color
• End color
• Angle
• Center position

✔ Example: Gradient Background

📄 File: res/drawable/gradient_bg.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:startColor="#FF5722"
        android:endColor="#FFC107"
        android:angle="45"/>

    <corners android:radius="12dp"/>
</shape>

📌 Usage:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/gradient_bg">
</LinearLayout>

✔ Example: Radial Gradient

<gradient
    android:type="radial"
    android:gradientRadius="300dp"
    android:startColor="#FF9800"
    android:endColor="#BF360C"/>

---

3️⃣ Vector Drawables

Vector Drawables are XML-based scalable images.

They replace PNG icons because:

• They scale without losing quality
• Smaller file size
• Work on all screen sizes
• Used heavily for icons (material icons)

✔ Example: Vector Drawable Icon

📄 File: res/drawable/ic_heart.xml

<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="#E91E63"
        android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 
                          2,8.5C2,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,3C19.58,3 22,5.42 
                          22,8.5c0,3.78 -3.4,6.86 
                          -8.55,11.54L12,21.35z"/>
</vector>

📌 Usage:

<ImageView
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:src="@drawable/ic_heart"/>

---

⭐ Differences Between Shape, Gradient & Vector Drawables

Drawable Type	Purpose	Example Use
Shape	Create geometric backgrounds	Buttons, cards, borders
Gradient	Blend colors smoothly	Backgrounds, login screen UI
Vector	Scalable icons/graphics	App icons, toolbar icons

---

📘 Summary

✔ Shape Drawable → Backgrounds, borders, rounded corners

✔ Gradient Drawable → Color transitions, modern UI backgrounds

✔ Vector Drawable → Icons & scalable graphics

All stored in res/drawable/