Essential Books

Creating Custom Views

suggest change

If you need a completely customized view, you’ll need to subclass View (the superclass of all Android views) and provide your custom sizing (onMeasure(...)) and drawing (onDraw(...)) methods:

  1. Create your custom view skeleton: this is basically the same for every custom view. Here we create the skeleton for a custom view that can draw a smiley, called SmileyView: 
public class SmileyView extends View {
    private Paint mCirclePaint;
    private Paint mEyeAndMouthPaint;

    private float mCenterX;
    private float mCenterY;
    private float mRadius;
    private RectF mArcBounds = new RectF();

    public SmileyView(Context context) {
        this(context, null, 0);
    }

    public SmileyView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SmileyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaints();
    }

    private void initPaints() {/* ... */}

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {/* ... */}

    @Override
    protected void onDraw(Canvas canvas) {/* ... */}
}
  1. Initialize your paints: the Paint objects are the brushes of your virtual canvas defining how your geometric objects are rendered (e.g. color, fill and stroke style, etc.). Here we create two Paints, one yellow filled paint for the circle and one black stroke paint for the eyes and the mouth: 
private void initPaints() {
    mCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mCirclePaint.setStyle(Paint.Style.FILL);
    mCirclePaint.setColor(Color.YELLOW);
    mEyeAndMouthPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mEyeAndMouthPaint.setStyle(Paint.Style.STROKE);
    mEyeAndMouthPaint.setStrokeWidth(16 * getResources().getDisplayMetrics().density);
    mEyeAndMouthPaint.setStrokeCap(Paint.Cap.ROUND);
    mEyeAndMouthPaint.setColor(Color.BLACK);
}
  1. Implement your own onMeasure(...) method: this is required so that the parent layouts (e.g. FrameLayout) can properly align your custom view. It provides a set of measureSpecs that you can use to determine your view’s height and width. Here we create a square by making sure that the height and width are the same: 
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int w = MeasureSpec.getSize(widthMeasureSpec);
    int h = MeasureSpec.getSize(heightMeasureSpec);

    int size = Math.min(w, h);
    setMeasuredDimension(size, size);
}

Note that onMeasure(...) must contain at least one call to setMeasuredDimension(..) or else your custom view will crash with an IllegalStateException.

  1. Implement your own onSizeChanged(...) method: this allows you to catch the current height and width of your custom view to properly adjust your rendering code. Here we just calculate our center and our radius: 
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    mCenterX = w / 2f;
    mCenterY = h / 2f;
    mRadius = Math.min(w, h) / 2f;
}
  1. Implement your own onDraw(...) method: this is where you implement the actual rendering of your view. It provides a Canvas object that you can draw on (see the official Canvas documentation for all drawing methods available). 
@Override
protected void onDraw(Canvas canvas) {
    // draw face
    canvas.drawCircle(mCenterX, mCenterY, mRadius, mCirclePaint);
    // draw eyes
    float eyeRadius = mRadius / 5f;
    float eyeOffsetX = mRadius / 3f;
    float eyeOffsetY = mRadius / 3f;
    canvas.drawCircle(mCenterX - eyeOffsetX, mCenterY - eyeOffsetY, eyeRadius, mEyeAndMouthPaint);
    canvas.drawCircle(mCenterX + eyeOffsetX, mCenterY - eyeOffsetY, eyeRadius, mEyeAndMouthPaint);
    // draw mouth
    float mouthInset = mRadius /3f;
    mArcBounds.set(mouthInset, mouthInset, mRadius * 2 - mouthInset, mRadius * 2 - mouthInset);
    canvas.drawArc(mArcBounds, 45f, 90f, false, mEyeAndMouthPaint);
}
  1. Add your custom view to a layout: the custom view can now be included in any layout files that you have. Here we just wrap it inside a FrameLayout: 
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.example.app.SmileyView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</FrameLayout>

Note that it is recommended to build your project after the view code is finished. Without building it you won’t be able to see the view on a preview screen in Android Studio.

After putting everything together, you should be greeted with the following screen after launching the activity containing the above layout:

Found a mistake? Have a question or improvement idea? Let me know.

Feedback about page:

Feedback:
Optional: your email if you want me to get back to you:

Creating Custom Views:
* Creating Custom Views
* Creating Custom Views
* Adding attributes to views
* CustomView performance tips
* Creating a compound view
* Compound view for SVGVectorDrawable as drawableRight
* Make View with rounded corners
* Responding to Touch Events
Table Of Contents
0 Getting Started
1 Layouts
2 Gradle
3 RecyclerView onClickListeners
4 NavigationView
5 Intent
6 JSON handling with org.json
7 Android Studio
8 Resources
9 Data Binding Library
10 Exceptions
11 Getting Calculated View Dimensions
12 AsyncTask
13 SharedPreferences
14 Emulator
15 Material Design
16 Lint Warnings
17 Service
18 Storing Files in Internal and External Storage
19 WebView
20 Project SDK versions
21 RecyclerView
22 Google Maps
23 PorterDuff Mode
24 9-Patch images
25 Android NDK
26 RecyclerView Decorations
27 Camera 2 API
28 ViewPager
29 CardView
30 HttpURLConnection
31 SQLite
32 ADB Android Debug Bridge
33 ButterKnife
34 Supporting different screen resolutions
35 Glide
36 Retrofit2
37 Dialog
38 ACRA
39 GreenDAO
40 Formatting Strings
41 Notifications
42 AlarmManager
43 Fragments
44 Handler
45 Creating Custom Views
46 BroadcastReceiver
47 Activity
48 Snackbar
49 Runtime Permissions in API-23
50 Logging and using Logcat
51 VectorDrawable and AnimatedVectorDrawable
52 Tools Attributes
53 Toast
54 Interfaces
55 Animators
56 Location
57 Theme Style Attribute
58 The Manifest File
59 Parcelable
60 MediaPlayer
61 Multidex and the Dex Method Limit
62 Data Synchronization with Sync Adapter
63 Menu
64 Instant Run in Android Studio
65 Picasso
66 Bluetooth LE API
67 RoboGuice
68 Memory Leaks
69 Universal Image Loader
70 Volley
71 Widgets
72 Date and Time Pickers
73 Integrate Google Sign In
74 In-app billing
75 FloatingActionButton
76 ContentProvider
77 Dagger 2
78 Realm
79 Unit testing in Android with JUnit
80 Android Versions
81 Wi-Fi Connections
82 SensorManager
83 Localization with resources
84 ProgressBar
85 Custom Fonts
86 Vibration
87 Google Awarness APIs
88 Text to Speech (TTS)
89 UI Lifecycle
90 Spinner
91 Data Encryption / Decryption
92 Testing UI with Espresso
93 Writing UI tests
94 GreenRobot EventBus
95 OkHttp
96 Enhancing Performance Using Icon Fonts
97 Handling Depp Links
98 Canvas drawing using SurfaceView
99 Firebase
100 Crash Reporting Tools
101 Check Internet Connectivity
102 Facebook SDK
103 Unzip File
104 Android Places API
105 Creating your own libraries
106 Handling JSON with Gson
107 Device Display Metrics
108 TextView
109 ListView
110 Building Backwards Compatible Apps
111 Loader
112 ProGuard - Obfuscating and Shrinking your code
113 Detect Shake Event
114 Typedef Annotations
115 Capturing Screenshots
116 MVP Architecture
117 Orientation Changes
118 Xposed
119 Security
120 PackageManager
121 ImageView
122 Gesture Detection
123 Doze Mode
124 Android Sound and Media
125 SearchView
126 Camera and Gallery
127 Callback URL
128 Twitter APIs
129 SqlCipher integration
130 Drawables
131 Colors
132 ConstraintLayout
133 RenderScript
134 Fresco
135 Swipe to Refresh
136 AutoCompleteTextView
137 Installing apps with ADB
138 IntentService
139 AdMob
140 Implicit Intents
141 Publish to Play Store
142 Firebase Realtime Database
143 Image Compression
144 Email Validation
145 Keyboard
146 Button
147 TextInputLayout
148 Bottom Sheets
149 CoordinatorLayout and Behaviors
150 EditText
151 Paypal Gateway Integration
152 Firebase App Indexing
153 Firebase Crash Reporting
154 Displaying Google Ads
155 Vk SDK
156 Localized DateTime
157 Count Down Timer
158 Reading Barcode and QR codes
159 Otto Event Bus
160 TransitionDrawable
161 Port Mapping using Cling
162 Creating Overlay always-on-top Windows
163 ExoPlayer
164 Inter-app UI testing with UIAutomator
165 MediaSession
166 Speech to Text Conversion
167 FileProvider
168 Publish .aar file to Apache Archive with Gradle
169 XMPP
170 Authenticator
171 RecyclerView and LayoutManagers
172 AudioManager
173 Job Scheduling
174 Accounts and AccountManager
175 OpenCV
176 Split Screen Multi-Screen Activities
177 Threads
178 MediaStore
179 Time Utils
180 Touch Events
181 Fingerprint API
182 MVVM Architecture
183 BottomNavigationView
184 ORMLite
185 YouTube API
186 TabLayout
187 Retrofit2 with RxJava
188 DayNight Theme AppCompat
189 ShortcutManager
190 LruCache
191 Using Jenkins CI
192 Zip files
193 Vector Drawables
194 Fastlane
195 Define step value for RangeSeekBar
196 Getting started with OpenGL ES 2.0
197 Check Data Connection
198 Java Native Interface (JNI)
199 FileIO
200 Perfomance Optimization
201 Robolectric
202 Moshi
203 Strick Mode Policy
204 Internalization and localization
205 Retrolambda
206 SparseArray
207 Firebase Cloud Messaging
208 Shared Element Transitions
209 Android Things
210 VideoView
211 ViewFlipper
212 Dependency Injection with Dagger 2
213 Formatting phone numbers
214 Storing password securely
215 Android Kernel Optimization
216 Paint
217 AudioTrack
218 ProGuard
219 Create Android Custom ROMs
220 Java on Android
221 Pagination in RecyclerVi
222 Genymotion for Android
223 Handling touch and motion events
224 Creating Splash screen
225 ConstraintSet
226 CleverTap
227 Publish library to Maven repositories
228 ADB shell
229 Ping ICMP
230 AIDL
231 Using Kotlin
232 Autosizing TextView
233 Signing apps for release
234 Context
235 Activity Recognition
236 Secure SharedPreferences
237 Secure SharedPreferences
238 Bitmap Cache
239 Android x86 in VirtualBox
240 JCodec
241 Design Patterns
242 Okio
243 Google SignIn integration
244 TensorFlow
245 Game developmen
246 Notification Channel
247 Bluetooth Low Energy (LE)
248 Leak Canary
249 FuseView
250 SQLite using ContentValues
251 Enhancing Alert Dialogs
252 Hardware Button Events, Intents PTT
253 SpannableString
254 Looper
255 Optimized VideoView
256 Google Drive API
257 Animated AlertDialog Box
258 Annotation Processor
259 SyncAdapter with periodically do sync of data
260 Singleton Class for Toast Message
261 Fastjson
262 Android Architecture Components
263 Jackson
264 Play Store
265 Loading Bitmaps Effectively
266 Getting system font names
267 Smartcard
268 Convert vietnamese string to english
269 Contributors