For more information on creating accessible views, see Making Applications Accessible in the Android Developers Guide. Content and code samples on this page are subject to the licenses described in the Content License. App Basics.
Build your first app. App resources. Resource types. App manifest file. Device compatibility. Multiple APK support. Tablets, large screens, and foldables. Build responsive UIs. Build for foldables. Getting started. Handling data. User input. Watch Face Studio. Health services. Creating watch faces. Android TV. Build TV Apps. Build TV playback apps. Help users find content on TV. Recommend TV content. Watch Next. Build TV games. Build TV input services. TV Accessibility. Android for Cars. Build media apps for cars.
Build navigation, parking, and charging apps for cars. Android Things. Supported hardware. Advanced setup.
Build apps. Create a Things app. Communicate with wireless devices. Configure devices. Interact with peripherals. Build user-space drivers. Manage devices. Create a build. Push an update. Chrome OS devices. App architecture. Architecture Components. UI layer libraries. View binding. Data binding library. Lifecycle-aware components. Paging Library. Paging 2. Data layer libraries. How-To Guides. Advanced Concepts.
Threading in WorkManager. App entry points. App shortcuts. App navigation. Navigation component. App links. Dependency injection. Core topics. App compatibility. Interact with other apps. Package visibility. Intents and intent filters. User interface. Add motion to your layout with MotionLayout. MotionLayout XML reference. Improving layout performance.
Custom view components. Look and feel. Splash screens. Override the onMeasure method to provide an accurate and efficient measurement of the view contents:. Add the following lines to the file:. This proves the reusability concept for the custom view. The first view has a happy state and the second view has a sad state. You will use both of them later to act as buttons with different themes and different happiness states, and. In order to receive the values of the XML attributes and to use them in the EmotionalFaceView class, update all the lines of code setting up the properties above onDraw to be:.
As you see in the previous screenshot, the happinessState still has no effect, and both of the EmotionalFaceView buttons are happy. This will reset the path and remove any old path before drawing a new path, to avoid drawing the mouth more than one time while Android calls the onDraw method again and again. You want to make the face happy or sad, according to the state, in drawMouth.
Replace the mouthPath drawing with the following lines of code:. Build and run the app, and you should see the top right button become a sad face, like the following screenshot:. You can let your user change the happiness state of the center emotional face view by clicking on the top left button to make it happy or by clicking on the top right button to make it sad. First, add the following line of code to the MainActivity import statements:. Kotlin Android Extensions provide a handy way for view binding by importing all widgets in the layout in one go.
This allows avoiding the use of findViewById , which is a source of potential bugs and is hard to read and support. You can save your view state in case there is any change in the device configuration, e. Build and run the app, change the happiness state to sad, and change the orientation of your device. The center face should remain sad after device rotation:.
You can download the completed project using the download button at the top or bottom of this tutorial. You can make your custom view even more interactive by detecting special gestures; check for more info here. Adding animation to your custom view can enhance the UX strongly. Check out Android Animation Tutorial with Kotlin. You can also learn more about drawable animation and Canvas and Drawables.
Feel free to share your feedback or ask any questions in the comments below or in the forums. The raywenderlich. Get a weekly digest of our tutorials and courses, and receive a free in-depth email course as a bonus! Learn iOS, Swift, Android, Kotlin, Dart, Flutter and more with the largest and highest-quality catalog of video courses and books on the internet.
Ahmed is an Android developer and an open source contributor with libraries like RichPath and Instacapture , always he wants to Arun is a Senior Android Engineer at Fueled. He is on an endless quest to learn the art of Clean Code.
Find him on Medium and He started as a web A raywenderlich. Start Reading. The Android platform has several View classes that cover many needs for a typical app. Prerequisites: This Android tutorial is all about custom views, so you need basic knowledge of Android programming and familiarity with Kotlin, Android Studio, and XML layouts. For this example we are computing the size of the ViewGroup using the framework's getDefaultSize method, which essentially returns the size provided by the MeasureSpec in all cases except when an exact size requirement is imposed by the parent.
ViewGroup has one more job during measurement, though; it must also tell all its child views to measure themselves. This will notify each child view that they must be measured to exactly the size we are giving them.
One method of dispatching these commands it to call the measure method of every child view, but there are also helper methods inside of ViewGroup to simplify this process. In our example here we are calling measureChildren , which applies the same spec to every child view for us. Of course, we are still required to mark our own dimensions as well, via setMeasuredDimension , before we return. With our fixed-size grid, this is pretty straightforward.
We can then call layout on the child view to set its left, right, top, and bottom position values. Notice that inside layout we can use the getMeasuredWidth and getMeasuredHeight methods on the view. These will always be valid at this stage since the measurement pass comes before layout, and this is a handy way to set the bounding box of each child.
TIP: Measurement and layout can be as simple or complex as you make it. It is easy to get lost attempting to handle every possible configuration change that may affect how you lay out child views. Stick to writing code for the cases your application will actually encounter. While ViewGroups don't generally draw any content of their own, there are many situations where this can be useful.
There are two helpful instances where we can ask ViewGroup to draw. The first is inside of dispatchDraw after super has been called. At this stage, child views have been drawn, and we have an opportunity to do additional drawing on top. In our example, we are leveraging this to draw the grid lines over our box views. The second is using the same onDraw callback as we saw before with View. Anything we draw here will be drawn before the child views, and thus will show up underneath them.
This can be helpful for drawing any type of dynamic backgrounds or selector states. If you wish to put code in the onDraw of a ViewGroup , you must also remember to enable drawing callbacks with setWillNotDraw false. Otherwise your onDraw method will never be triggered. This is because ViewGroups have self-drawing disabled by default. So back to attributes for a moment. What if the attributes we want to feed into the view don't already exist in the platform, and it would be awkward to try and reuse one for a different purpose?
In that case, we can define custom attributes inside of our style-able block.
0コメント