🎨 UI – Views & Layouts · Lesson 13
ImageView, Drawables & Resources
ImageView basics
Put images in res/drawable/ (lowercase names: banner.webp) and show them with ImageView. Always add contentDescription for screen readers (use @null for purely decorative images).
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 explained
| scaleType | What happens | Good for |
|---|---|---|
| centerCrop | Fills the view, crops the extra | Banners, thumbnails, avatars |
| fitCenter (default) | Whole image visible, may leave space | Logos, product photos |
| centerInside | Like fitCenter but never enlarges | Small icons |
| fitXY | Stretches to fill (distorts) | Rarely — avoid |
Vector icons (Asset Studio)
- 1Right-click res → New → Vector Asset
- 2Click the clip-art icon and search (e.g. "star")
- 3Name it ic_star → Next → Finish
- 4It appears in 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
Instead of image files, draw backgrounds in 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 and 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/
Changing images from Kotlin
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)
Common mistakes
- File name with capitals, spaces or hyphens (
Diwali-Banner.png) → build error. Usediwali_banner.png. - Huge 4000px photos in drawable → slow and
OutOfMemoryError. Resize to ~1080px and use WebP. fitXYon photos → stretched faces.- Hard-coding colours everywhere → define them once in colors.xml or the theme.
Summary
- ImageView +
src+scaleType(centerCrop for most photos). - Vector Asset for icons; shape and selector XML for backgrounds.
- Keep colours, sizes and texts in values/; qualifiers give Hindi, dark and tablet versions.
✅ Practice
Create a "Course card": a centerCrop banner, a round teacher photo, a green pill badge (shape drawable) with text "Live", and add a Hindi values-hi/strings.xml for the card title.
Frequently Asked Questions
Should I use PNG or vector icons?
Use vector drawables for icons — one small XML file looks sharp on every screen. Use WebP/PNG/JPG only for photos and complex artwork.
What is the difference between src and background?
src is the image content and respects scaleType. background fills the whole view behind the content and stretches.
How do I load an image from the internet?
Use an image library such as Glide or Coil. It downloads, caches and resizes images. See the Glide lesson.
