🎨 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 | क्या होता है | किसके लिए |
|---|---|---|
| centerCrop | View भरता है, extra कटता है | Banners, thumbnails, avatars |
| fitCenter (default) | पूरी image दिखती है, जगह बच सकती है | Logos, product photos |
| centerInside | fitCenter जैसा पर कभी बड़ा नहीं करता | छोटे icons |
| fitXY | भरने के लिए stretch (बिगाड़ता है) | बहुत कम — बचें |
Vector icons (Asset Studio)
- 1res पर right-click → New → Vector Asset
- 2Clip-art icon पर click करके search करें (जैसे "star")
- 3नाम ic_star → Next → Finish
- 4यह res/drawable/ic_star.xml में आ जाता है
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/
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.pnguse करें। - 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 देखें।
