Free tutorials & notes in Hindi & English · Clean code examples 🧰 मुफ़्त PDF और फ़ोटो टूल्स →
🎨 UI – Views और Layouts  ·  Lesson 13

ImageView, Drawables और Resources

ImageView basics

Images res/drawable/ में रखें (lowercase names: banner.webp) और ImageView से दिखाएँ। Screen readers के लिए हमेशा contentDescription दें (सिर्फ़ सजावटी images के लिए @null)।

XML
<ImageView
    android:id="@+id/ivBanner"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:contentDescription="@string/banner_desc"
    android:scaleType="centerCrop"
    android:src="@drawable/banner" />

<!-- round avatar with Material ShapeableImageView -->
<com.google.android.material.imageview.ShapeableImageView
    android:layout_width="72dp"
    android:layout_height="72dp"
    android:scaleType="centerCrop"
    android:src="@drawable/avatar"
    app:shapeAppearanceOverlay="@style/CircleImage" />
XML – circle shape style
<!-- res/values/themes.xml -->
<style name="CircleImage">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>

scaleType समझें

scaleTypeक्या होता हैकिसके लिए
centerCropView भरता है, extra कटता हैBanners, thumbnails, avatars
fitCenter (default)पूरी image दिखती है, जगह बच सकती हैLogos, product photos
centerInsidefitCenter जैसा पर कभी बड़ा नहीं करताछोटे icons
fitXYभरने के लिए stretch (बिगाड़ता है)बहुत कम — बचें
9:41▮▮ 85%centerCrop⋮🖼️भरता है, किनारे कटे9:41▮▮ 85%fitCenter⋮🖼️पूरी image, bars
एक ही image, अलग scaleType

Vector icons (Asset Studio)

  1. 1res पर right-click → New → Vector Asset
  2. 2Clip-art icon पर click करके search करें (जैसे "star")
  3. 3नाम ic_star → Next → Finish
  4. 4यह res/drawable/ic_star.xml में आ जाता है
हज़ारों Material icons free
XML – vector drawable
<!-- res/drawable/ic_star.xml (created by Asset Studio) -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:tint="?attr/colorControlNormal"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="@android:color/white"
        android:pathData="M12,17.27L18.18,21l-1.64,-7.03L22,9.24l-7.19,-0.61L12,2 9.19,8.63 2,9.24l5.46,4.73L5.82,21z" />
</vector>

<!-- use it and colour it -->
<ImageView
    android:layout_width="32dp"
    android:layout_height="32dp"
    android:src="@drawable/ic_star"
    app:tint="#F59E0B" />

Shape drawables

Image files की जगह backgrounds XML में बनाएँ: rounded corners, borders, gradients।

XML – shapes
<!-- res/drawable/bg_badge.xml – rounded pill with border -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#DCFCE7" />
    <stroke android:width="1dp" android:color="#16A34A" />
    <corners android:radius="999dp" />
    <padding android:left="10dp" android:right="10dp" android:top="4dp" android:bottom="4dp" />
</shape>

<!-- res/drawable/bg_gradient.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient android:angle="135" android:startColor="#16A34A" android:endColor="#0EA5E9" />
    <corners android:radius="16dp" />
</shape>

<!-- usage -->
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_badge"
    android:text="New" />

Selectors (pressed state)

XML – selector
<!-- res/drawable/bg_option.xml – different look when pressed -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape><solid android:color="#BBF7D0" /><corners android:radius="12dp" /></shape>
    </item>
    <item>
        <shape><solid android:color="#F1F5F9" /><corners android:radius="12dp" /></shape>
    </item>
</selector>

colors, dimens और strings

XML – values resources
<!-- res/values/colors.xml -->
<resources>
    <color name="brand">#16A34A</color>
    <color name="text_muted">#64748B</color>
</resources>

<!-- res/values/dimens.xml -->
<resources>
    <dimen name="screen_padding">16dp</dimen>
    <dimen name="card_radius">14dp</dimen>
</resources>

<!-- res/values/strings.xml -->
<resources>
    <string name="greeting">Good morning</string>
</resources>

<!-- res/values-hi/strings.xml  (Hindi – picked automatically on Hindi phones) -->
<resources>
    <string name="greeting">सुप्रभात</string>
</resources>

Resource qualifiers: Hindi, dark, tablet

📁 res/
  values/strings.xml          # default (English)
  values-hi/strings.xml       # Hindi phones
  values-night/themes.xml     # dark mode
  layout/activity_main.xml    # phones
  layout-sw600dp/activity_main.xml  # tablets (≥600dp)
  📁 drawable-nodpi/  mipmap-anydpi-v26/
Android हर device के लिए best folder अपने आप चुनता है

Kotlin से images बदलना

Kotlin
binding.ivBanner.setImageResource(R.drawable.banner_diwali)     // from res/drawable
binding.ivStar.setColorFilter(ContextCompat.getColor(this, R.color.brand))
binding.ivBanner.isVisible = showBanner                          // androidx.core.view.isVisible

val padding = resources.getDimensionPixelSize(R.dimen.screen_padding)
val greeting = getString(R.string.greeting)

आम गलतियाँ

  • File name में capitals, spaces या hyphens (Diwali-Banner.png) → build error। diwali_banner.png use करें।
  • Drawable में 4000px की बड़ी photos → धीमा और OutOfMemoryError। ~1080px पर resize करके WebP use करें।
  • Photos पर fitXY → खिंचे हुए चेहरे।
  • हर जगह colours hard-code करना → colors.xml या theme में एक बार define करें।

सारांश

  • ImageView + src + scaleType (ज़्यादातर photos के लिए centerCrop)।
  • Icons के लिए Vector Asset; backgrounds के लिए shape और selector XML।
  • Colours, sizes और texts values/ में; qualifiers से Hindi, dark और tablet versions।
✅ Practice

"Course card" बनाइए: centerCrop banner, गोल teacher photo, "Live" text वाला green pill badge (shape drawable), और card title के लिए Hindi values-hi/strings.xml जोड़िए।

अक्सर पूछे जाने वाले प्रश्न (FAQ)

PNG use करें या vector icons?
Icons के लिए vector drawables use करें — एक छोटी XML file हर screen पर sharp दिखती है। WebP/PNG/JPG सिर्फ़ photos और complex artwork के लिए।
src और background में क्या फ़र्क है?
src image content है और scaleType मानता है। background content के पीछे पूरा view भरता है और stretch होता है।
Internet से image कैसे load करें?
Glide या Coil जैसी image library use करें। यह images download, cache और resize करती है। Glide lesson देखें।
← Android Tutorial (Kotlin)
🔗

Share this topic with a friend

यह topic किसी दोस्त को भेजें

Found it useful? Send it to a classmate learning the same thing.

अच्छा लगा? जो दोस्त यही सीख रहा है, उसे भेज दीजिए।

अगला topicCheckBox, RadioButton, Switch और Chips आपकी प्रगति: 13 / 43 (30%) · Lesson 14 / 43 आगे बढ़ें →

यह lesson कैसा लगा?

आपकी राय से हम content और बेहतर बनाते हैं।

अपना review और सुझाव लिखें (वैकल्पिक)

Review approve होने के बाद आपका नाम और शहर इसके साथ public दिख सकते हैं। Email या phone न लिखें।

▶ CodingEasily on YouTube

Video से सीखें – आसान Hindi में

चुनी हुई video: RDBMS भाग 3 – Class XI Commerce IT

▶ Channel subscribe करें