Packt+ | Advance your knowledge in tech

You're reading from Android Studio 4.2 Development Essentials - Kotlin Edition

Product type Book

Published in Aug 2021

Publisher Packt

ISBN-13 9781803231549

Pages 804 pages

Edition 1st Edition

Languages

Kotlin

Concepts

Android Development

Author (1):

Neil Smyth

Table of Contents (94) Chapters

1. Introduction

2. Setting up an Android Studio Development Environment

3. Creating an Example Android App in Android Studio

4. Creating an Android Virtual Device (AVD) in Android Studio

5. Using and Configuring the Android Studio AVD Emulator

6. A Tour of the Android Studio User Interface

7. Testing Android Studio Apps on a Physical Android Device

8. The Basics of the Android Studio Code Editor

9. An Overview of the Android Architecture

10. The Anatomy of an Android Application

11. An Introduction to Kotlin

12. Kotlin Data Types,Variables and Nullability

13. Kotlin Operators and Expressions

14. Kotlin Flow Control

15. An Overview of Kotlin Functions and Lambdas

16. The Basics of Object Oriented Programming in Kotlin

17. An Introduction to Kotlin Inheritance and Subclassing

18. An Overview of Android View Binding

19. Understanding Android Application and Activity Lifecycles

20. Handling Android Activity State Changes

21. Android Activity State Changes by Example

22. Saving and Restoring the State of an Android Activity

23. Understanding Android Views, View Groups and Layouts

24. A Guide to the Android Studio Layout Editor Tool

25. A Guide to the Android ConstraintLayout

26. A Guide to Using ConstraintLayout in Android Studio

27. Working with ConstraintLayout Chains and Ratios in Android Studio

28. An Android Studio Layout Editor ConstraintLayout Tutorial

29. Manual XML Layout Design in Android Studio

30. Managing Constraints using Constraint Sets

31. An Android ConstraintSet Tutorial

32. A Guide to using Apply Changes in Android Studio

33. An Overview and Example of Android Event Handling

34. Android Touch and Multi-touch Event Handling

35. Detecting Common Gestures Using the Android Gesture Detector Class

36. Implementing Custom Gesture and Pinch Recognition on Android

37. An Introduction to Android Fragments

38. Using Fragments in Android Studio - An Example

39. Modern Android App Architecture with Jetpack

40. An Android Jetpack ViewModel Tutorial

41. An Android Jetpack LiveData Tutorial

42. An Overview of Android Jetpack Data Binding

43. An Android Jetpack Data Binding Tutorial

44. An Android ViewModel Saved State Tutorial

45. Working with Android Lifecycle-Aware Components

46. An Android Jetpack Lifecycle Awareness Tutorial

47. An Overview of the Navigation Architecture Component

48. An Android Jetpack Navigation Component Tutorial

49. An Introduction to MotionLayout

50. An Android MotionLayout Editor Tutorial

51. A MotionLayout KeyCycle Tutorial

52. Working with the Floating Action Button and Snackbar

53. Creating a Tabbed Interface using the TabLayout Component

54. Working with the RecyclerView and CardView Widgets

55. An Android RecyclerView and CardView Tutorial

56. A Layout Editor Sample Data Tutorial

57. Working with the AppBar and Collapsing Toolbar Layouts

58. An Android Studio Primary/Detail Flow Tutorial

59. An Overview of Android Intents

60. Android Explicit Intents – A Worked Example

61. Android Implicit Intents – A Worked Example

62. Android Broadcast Intents and Broadcast Receivers

63. An Introduction to Kotlin Coroutines

64. An Android Kotlin Coroutines Tutorial

65. An Overview of Android Services

66. Implementing an Android Started Service – A Worked Example

67. Android Local Bound Services – A Worked Example

68. Android Remote Bound Services – A Worked Example

69. An Android Notifications Tutorial

70. An Android Direct Reply Notification Tutorial

71. Foldable Devices and Multi-Window Support

72. An Overview of Android SQLite Databases

73. The Android Room Persistence Library

74. An Android TableLayout and TableRow Tutorial

75. An Android Room Database and Repository Tutorial

76. Accessing Cloud Storage using the Android Storage Access Framework

77. An Android Storage Access Framework Example

78. Video Playback on Android using the VideoView and MediaController Classes

79. Android Picture-in-Picture Mode

80. An Android Picture-in-Picture Tutorial

81. Making Runtime Permission Requests in Android

82. Android Audio Recording and Playback using MediaPlayer and MediaRecorder

83. Printing with the Android Printing Framework

84. An Android HTML and Web Content Printing Example

85. A Guide to Android Custom Document Printing

86. An Introduction to Android App Links

87. An Android Studio App Links Tutorial

88. A Guide to the Android Studio Profiler

89. An Android Biometric Authentication Tutorial

90. Creating, Testing and Uploading an Android App Bundle

91. An Overview of Android Dynamic Feature Modules

92. An Android Studio Dynamic Feature Tutorial

93. An Overview of Gradle in Android Studio

Index

51. A MotionLayout KeyCycle Tutorial

The previous chapters introduced and demonstrated the concepts of integrating animation into Android app user interfaces using the MotionLayout container combined with the features of the Android Studio MotionLayout editor. The chapter entitled “An Introduction to MotionLayout” briefly mentioned the cycle (KeyCycle) and time cycle (KeyTimeCycle) key frames and explained how these can be used to implement animations involving large numbers of repetitive state changes.

This chapter will cover cycle key frames in more detail before demonstrating how to make use of them in an example project using Android Studio and the Cycle Editor.

51.1 An Overview of Cycle Keyframes

Clearly, position keyframes can be used to add intermediate state changes into the animation timeline. While this works well for small numbers of state changes, it would be cumbersome to implement in larger quantities. To make a button shake 50 times when tapped to indicate that an error occurred, for example, would involve the manual creation of 100 position keyframes to perform small clockwise and anti-clockwise rotations. Similarly, to implement a bouncing effect on a view as it moves across the screen would be an equally time consuming task.

For situations where state changes need to be performed repetitively, MotionLayout includes the Cycle and Time Cycle keyframes. Both perform the same tasks, with the exception that KeyCycle frames are based on frame positions within an animation path, while KeyTimeCycles are time-based in cycles per second (Hz).

Using these KeyCycle frames, the animation timeline is essentially divided up into subsections...

51.2 Using the Cycle Editor

Although not particularly complicated, it can take some time to get the exact cycle configuration you need by directly editing XML KeyCycle entries in the MotionScene file. In recognition of this fact, the Android engineers at Google have developed the Cycle Editor. This is a separate Java-based utility that is not yet part of Android Studio. The Cycle Editor allows you to visually design and test cycle key frame sets.

The Cycle Editor tool is provided in the form of a Java archive (jar) file which will require that the Java runtime be installed on your development system. Steps to install Java will vary depending on your operating system.

Once you have Java installed, the CycleEditor.jar file can be downloaded from the following URL:

https://github.com/googlesamples/android-ConstraintLayoutExamples/releases/download/1.0/CycleEditor.jar

Once downloaded, open a command-prompt or terminal window, change directory to the location of the jar file...

51.3 Creating the KeyCycleDemo Project

Select the Create New Project quick start option from the welcome screen and, within the resulting new project dialog, choose the Empty Activity template before clicking on the Next button.

Enter KeyCycleDemo into the Name field and specify com.ebookfrenzy.keycycledemo as the package name. Before clicking on the Finish button, change the Minimum API level setting to API 26: Android 8.0 (Oreo) and the Language menu to Kotlin.

With the layout editor in Design mode and the activity_main.xml file open, right-click on the ConstraintLayout entry and select the Convert to MotionLayout menu option:

Figure 51-7

After making the selection, click on the Convert button in the confirmation dialog.

51.4 Configuring the Start and End Constraints

The objective of this tutorial is to animate the movement of a button from one side of the device screen to the other including KeyCycle effects that cause the view to also move up and down along the Y-axis. The first step is to configure the start and end constraints.

With the activity_main.xml file loaded into the MotionLayout editor, select and delete the default TextView widget. Make sure the Motion Layout box (marked E in Figure 51-9 below) is selected before dragging and dropping a Button view from the palette so that it is centered vertically and positioned along the left-hand edge of the layout canvas:

Figure 51-8

To configure the constraints for the start point, select the start constraint set entry in the editor window (marked A in Figure 51-9):

Figure 51-9

Next, select the button entry within the ConstraintSet list (B). With the button entry still selected, click on the edit button (C) and select Create...

51.5 Creating the Cycles

The next step is to use the Cycle Editor to generate the cycle key frames for the animation. With the Cycle Editor running, refer to the control panel shown in Figure 51-12 below:

Figure 51-12

Using the menu marked A, change the property to be modified from rotation to translationY.

Next, use the KeyCycle control (B) to select cycle 0 so that changes made elsewhere in the panel will be applied to the first cycle. Move the Period slider to 1 and the translationY slider to 60 as shown in Figure 51-13 (refer to the XML panel to see the precise setting for the translationY value as you move the slider):

Figure 51-13

To see the changes so far in the graph, select the File -> Parse XML menu option. Using the values listed in Table 51-1, configure the settings for KeyFrames 1 through 4 (keeping in mind that you have already configured the settings in the KeyCycle 0 column):

...

51.6 Previewing the Animation

The cycle-based animation may now be previewed from within the Cycle Editor tool. Start the animation running by clicking on the play button (marked A in Figure 51-15). To combine the cycles with horizontal movement, change the second menu (B) from Stationary to West to East. Also, take some time to experiment with the time and linearity settings (C and D).

Figure 51-15

51.7 Adding the KeyFrameSet to the MotionScene

Within the Cycle Editor, highlight and copy the KeyCycle elements from the XML panel and paste them into the Transition section of the res -> xml -> activity_main_scene.xml file within Android Studio so that they are placed between the existing KeyFrameSet markers. Note also the increased duration setting and the addition of an OnClick handler to initiate the animation:

<Transition

motion:constraintSetEnd="@+id/end"

motion:constraintSetStart="@id/start"

motion:duration="7000">

<KeyCycle

motion:framePosition="0"

motion:motionTarget="@+id/button"

...

51.8 Summary

Cycle key frames provide a useful way to build frame animations that involve potentially large numbers of state changes that match wave patterns. As outlined in this chapter, the process of generating these cycle key frames can be eased significantly by making use of the Cycle Editor application.

The rest of the chapter is locked

You have been reading a chapter from

Android Studio 4.2 Development Essentials - Kotlin Edition

Published in: Aug 2021 Publisher: Packt ISBN-13: 9781803231549

A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.

Unlock this book and the full library FREE for 7 days

Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of

Start free trial

Renews at £13.99/month. Cancel anytime}

Authors (1)

Neil Smyth

Neil Smyth has over 25 years of experience in the IT industry, including roles in software development and enterprise-level UNIX and Linux system administration. In addition to a bachelor's degree in information technology, he also holds A+, Security+, Network+, Project+, and Microsoft Certified Professional certifications and is a CIW Database Design Specialist. Neil is the co-founder and CEO of Payload Media, Inc. (a technical content publishing company), and the author of the Essentials range of programming and system administration books.

See other products by Neil Smyth