book

Head First Android Development, 3rd Edition

by Dawn Griffiths, David Griffiths

November 2021

Beginner to intermediate

930 pages

21h 46m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Authors of Head First Android Development
Table of Contents (the real thing)
How to use this book: Intro
Who is this book for?Who should probably back away from this book?We know what you’re thinkingWe know what your brain is thinkingMetacognition: thinking about thinkingHere’s what WE didHere’s what YOU can do to bend your brain into submissionRead meThe truly awesome technical review teamAcknowledgmentsO’Reilly Online Learning
1. Getting Started: Diving In
Welcome to AndroidvilleActivities define what the app doesLayouts define what each screen looks likeThere may be extra files tooActivities and layouts form the backbone of your appHere’s what we’re going to doAndroid Studio: your development environmentYou need to install Android StudioInstall Android StudioLet’s build a basic appHow to build the app1. Create a new project2. Select a project template3. Configure your projectYou’ve created your first Android projectDissecting your new projectThe folder structure includes different types of filesIntroducing the key files in your projectEdit code with the Android Studio editorsThe code editorThe design editorThe story so farHow to run the app on a physical device1. Enable USB debugging on your device2. Set up your computer to detect the device3. Use a USB cable to plug your device into your computer4. Run the appHow to run the app on a virtual deviceCreate an Android Virtual Device (AVD)Open the Android Virtual Device ManagerSelect the hardwareSelect a system imageVerify the AVD configurationThe virtual device gets createdRun the app on the AVDCompile, package, deploy, run Test DriveWhat just happened?Let’s refine the appThe app has one activity and one layoutThe activity controls what the app doesThe layout controls the app’s appearanceWhat’s in the layout?The design editorThe code editoractivity_main.xml has two elementsUpdate the text displayed in the layoutWhat the code does Test DriveYour Android Toolbox
2. Building Interactive Apps: Apps That Do Something
Let’s build a Beer Adviser appHere’s what we’re going to doCreate the projectWe’ve created a default activity and layoutA closer look at the design editorAdd a button using the design editorChanges in the design editor are reflected in the XMLactivity_main.xml has a new buttonButtons and text views are subclasses of the same Android View classA closer look at the layout codeThe <LinearLayout> elementThe <Button> elementThe <TextView> elementLet’s update the layout XMLThe XML changes are reflected in the design editor Test DriveThere are warnings in the layout……because there’s hardcoded textPut text in a String resource fileAndroid Studio helps you extract String resourcesExtract the String resourceA String resource has been added to strings.xmlactivity_main.xml uses the String resourceYou also can extract String resources manuallyAdd and use a new String resource Test DriveAdd values to the spinnerAdding an array resource is similar to adding a StringAdd the string-array to strings.xmlGet the spinner to display the array’s valuesThe full code for activity_main.xml Test DriveWe need to make the app interactiveWhat the MainActivity code looks likeA button can listen for on-click events……using an OnClickListenerGet a reference to the button……and call its setOnClickListener methodPass a lambda to the setOnClickListener methodHow to edit a text view’s textHow to get the spinner’s valuePool PuzzlePool Puzzle SolutionThe updated code for MainActivity.ktWhat happens when you run the code Test DriveAdd the getBeers() methodActivity MagnetsActivity Magnets SolutionThe full code for MainActivity.ktWhat happens when you run the code Test DriveYour Android Toolbox
3. Layouts: Being a layout
It all starts with a layoutAndroid has different types of layoutUse the best layout for your screen designLet’s build a linear layoutCreate a new projectHow to define a linear layoutOrientation can be vertical or horizontalUse padding to add space to the layout’s edgesThe layout code so farAn edit text lets you enter textAdd views to the layout XMLMake a view streeeeetch by adding weightHow to add weight to one viewHow to add weight to multiple viewsThe gravity attribute controls the position of a view’s contentsValues you can use with the android:gravity attributeLayout MagnetsLayout Magnets SolutionThe story so farlayout-gravity controls the position of a view within a layoutMore values you can use with the android:layout-gravity attributeUse margins to add space between viewsThe full linear layout code Test DriveBE the LayoutBE the Layout SolutionYour activity code tells Android which layout it usesThe layout’s views are inflated into objectsLayout inflation: an exampleA frame layout stacks its viewsCreate a new projectHow to define a frame layoutAdd an image to your projectA frame layout stacks views in the order they appear in the layout XML Test DriveAll layouts are a type of ViewGroup……and a ViewGroup is a type of ViewA scroll view inserts a vertical scrollbarHow to add a scroll view Test DriveYour Android Toolbox
4. Constraint Layouts: Draw Up a Blueprint
Nested layouts revisitedNesting layouts comes at a priceIntroducing the constraint layoutYou design constraint layouts VISUALLYConstraint layouts are part of Android JetpackHere’s what we’re going to doCreate a new projectUse Gradle to include Jetpack librariesThe project build.gradle needs a Google repository lineThe app build.gradle includes the constraint layout’s libraryLet’s add a constraint layout to activity_main.xmlShow the layout in the blueprintAdd a button to the blueprintPosition views using constraintsWe’ll add a horizontal constraint to the buttonAdd a vertical constraint tooUse opposing constraints to center viewsYou can delete constraints you no longer needRemove constraints with the constraint widgetYou can use it to add margins tooChanges to the blueprint appear in the XMLViews can have bias Test DriveYou can change a view’s sizeMake the view just big enoughMatch the view’s constraintsBE the ConstraintBE the Constraint SolutionMost layouts need multiple viewsAdd a second button to the blueprintYou can connect views to other viewsYou can align views tooAlign views using guidelinesGuidelines have a fixed positionCreate a movable barrierLet’s build a layout that uses a barrierAdd a horizontal barrierPlace the barrier beneath the viewsConstrain a button under the barrierThe full code for activity_main.xml Test DriveUse a chain to control a linear group of viewsWe’re going to create a horizontal chainThe chain will use three buttonsAlign the views we’re going to chainCreate the horizontal chainThere are different styles of chainSpread spaces out views between the blueprint’s edgesSpread inside moves the first and last view to the edgesPacked moves the views together Test DriveA flow is like a multi-line chainHow to add a flowYou can control the flow’s appearanceUse “chain” to create a multi-line chainUse “aligned” to line up the viewsThe full code for activity_main.xml Test DriveYour Android Toolbox
5. The Activity Lifecycle: Being an Activity
How do activities really work?Introducing the Stopwatch appCreate a new projectAdd String resources for the text labelsThe layout includes a Chronometer viewThe full code for activity_main.xmlThe activity code controls the stopwatchThe Chronometer’s key properties and methodsThe base propertyThe start() methodThe stop() methodThe full code for MainActivity.ktWhat happens when you run the app Test DriveBut there’s just one problem…What happens when the app runsRotating the screen changes the device configurationAn activity’s statesThe activity lifecycle: from create to destroyYour activity inherits the lifecycle methodsSave the current state in a BundleAdd values using put methodsRetrieve values using get methodsSave the state using onSaveInstanceState()Restore the state using onCreate()The updated MainActivity.kt codeWhat happens when you run the app Test DriveActivity MagnetsActivity Magnets SolutionThere’s more to an activity’s life than create and destroyStart, stop, and restartThe visible lifecycleWe need to implement two more lifecycle methodsImplement onStop() to pause the stopwatchRestart the stopwatch when the app becomes visibleThe updated MainActivity.kt codeWhat happens when you run the app Test DriveWhat if an activity is only partially visible?The foreground lifecyclePause the stopwatch if the activity’s pausedThe complete MainActivity.kt codeWhat happens when you run the app Test DriveYour handy guide to the activity lifecycle methodsBE the ActivityBE the Activity SolutionYour Android Toolbox
6. Fragments and Navigation: Finding Your Way
Most apps need more than one screenEach screen is a fragmentWelcomeFragmentMessageFragmentEncryptFragmentNavigate between screens using the Navigation componentHere’s what we’re going to doCreate a new projectAdd some String resourcesAdd WelcomeFragment to the projectWhat fragment code looks likeFragment code looks similar to activity codeThe fragment’s onCreateView() methodInflate the fragment’s layout, and return itFragment layout code looks like activity layout codeYou display a fragment in a FragmentContainerViewUpdate the activity_main.xml codeThe full code for MainActivity.ktWhat the code does Test DrivePool PuzzlePool Puzzle SolutionCreate MessageFragmentUpdate MessageFragment’s layoutUpdate MessageFragment.ktUse the Navigation component to navigate between fragmentsUse Gradle to add the Navigation component to your projectAdd a version number to the project build.gradle fileAdd a dependency to the app build.gradle fileCreate a navigation graphAdd fragments to the navigation graphConnect fragments using an actionEvery action needs a unique IDNavigation graphs are XML resourcesAdd a navigation host to the layout using a FragmentContainerViewAdd a NavHostFragment to activity_main.xmlWe need to navigate between the fragmentsAdd an OnClickListener to the buttonFragment OnClickListener code is a little differentGet a navigation controllerTell it where to navigate with an actionThe full code for WelcomeFragment.ktWhat happens when the app runs Test DriveYour Android Toolbox
7. Safe Args: Passing Information
The Secret Message app navigates between fragmentsMessageFragment needs to pass the message to a new fragmentHere’s what we’re going to doCreate EncryptFragment……and update its layoutUpdate EncryptFragment.ktAdd EncryptFragment to the navigation graphThe updated nav_graph.xml codeMessageFragment needs to navigate to EncryptFragment Test DriveAdd Safe Args to the build.gradle filesAdd a classpath to the project build.gradle fileAdd the plug-in to the app build.gradle fileEncryptFragment needs to accept a String argumentThe updated nav_graph.xml codeMessageFragment needs to pass a message to EncryptFragmentYou can pass arguments to navigation actionsSafe Args generates Directions classesUse a Directions class to add arguments to actionsUpdate the MessageFragment.kt codeEncryptFragment needs to get the argument’s valueUse an Args class to retrieve argumentsWe need to encrypt the messageThe full code for EncryptFragment.ktWhat happens when the app runs Test DriveNavigation MagnetsNavigation Magnets SolutionWhat if the user wants to go back?We could change the back behaviorWelcome to the back stackA back stack scenarioUse the navigation graph to pop fragments off the back stackThe updated nav_graph.xml code Test DriveBE the Safe Args Plug-inBE the Safe Args Plug-in SolutionYour Android Toolbox

8. Navigation ui: Going Places
Different apps, different structuresAndroid includes navigation UI componentsAn app barThe bottom navigation barA navigation drawerHow the CatChat app will workHere’s what we’re going to doCreate a new projectA default app bar gets added……by applying a themeThe CatChat app will use a Material themeThe app build.gradle file needs a Material library dependencyApply a theme in AndroidManifest.xmlDefine styles in style resource filesStyles can override theme colorsColor resource files define a set of colorsReplace the default app bar with a toolbarRemove the default app bar using a themeA toolbar is a type of ViewAdd the toolbar to activity_main.xmlWhere did the app name go?Set the toolbar as MainActivity’s app bar Test DriveLet’s use the toolbar to navigateHow toolbar navigation will workCreate InboxFragmentCreate HelpFragmentWe’ll use the Navigation component to navigate to HelpFragmentAdd a version number to the project build.gradle fileAdd dependencies to the app build.gradle fileAdd the fragments to a navigation graphAdd a navigation host to activity_main.xmlSpecify items in the toolbar with a menu resource fileLet’s add a Help item to the menuonCreateOptionsMenu() adds menu items to the toolbarRespond to menu item clicks with onOptionsItemSelected()We need to configure the toolbarConfigure the toolbar using an AppBarConfigurationThe full code for MainActivity.ktWhat happens when the app runs Test DriveBE the MenuBE the Menu SolutionMost types of UI navigation work with the Navigation componentHow the bottom navigation bar will workCreate SentItemsFragmentAdd SentItemsFragment to the Navigation graphThe bottom navigation bar needs a new menu resource fileA bottom navigation bar is a type of ViewThe full code for activity_main.xmlLink the bottom navigation bar to the navigation controllerThe updated code for MainActivity.kt Test DriveA navigation drawer lets you display many navigation itemsLet’s replace the bottom navigation bar with a navigation drawerNavigation drawers deconstructedThe drawer gets its items from a menuAdd the support section……as a separate submenuHighlight the selected item with groupsThe full code for menu_main.xmlCreate the navigation drawer’s headerAdd the image file……and update the nav_header.xml codeHow to create a navigation drawerThe full code for activity_main.xmlWe’ve added a navigation drawer to the layoutConfigure the toolbar’s drawer icon……and link the drawer to the navigation controllerThe full code for MainActivity.kt Test DriveLayout MagnetsLayout Magnets SolutionYour Android Toolbox
9. Material Views: A Material World
Material is used throughout AndroidvilleThe Bits and Pizzas appHere’s what we’ll doCreate the Bits and Pizzas projectAdd a Material library dependency to the app build.gradle fileCreate OrderFragmentDisplay OrderFragment in MainActivity’s layoutReplace the default app bar with a toolbarFragments don’t have a setSupportActionBar() methodWe’ve added the toolbar…now what?We want the toolbar to respond to scrollsThe coordinator layout coordinates animations between viewsThe app bar layout enables toolbar animationTell the toolbar how to respond to scroll eventsA nested scroll view makes layout content scrollableThe full code for fragment_order.xml Test DriveBE the LayoutBE the Layout SolutionLet’s create a collapsing toolbarHow to create a plain collapsing toolbarHow to add an image to a collapsing toolbarAdd a restaurant image drawableThe full code for fragment_order.xml Test DriveLayout MagnetsWe need to build OrderFragment’s main contentChoose a pizza type using a radio buttonRadio buttons are a type of compound buttonA chip is a type of flexible compound buttonAdd multiple chips to a chip groupUse isChecked to find out if a chip is checkedA FAB is a floating action buttonYou can anchor a FAB to a collapsing toolbarWe need to build OrderFragment’s layoutThe full code for fragment_order.xml Test DriveLet’s make the FAB respond to clicksAdd an OnClickListener to the FABFind out if a pizza type has been selectedA toast is a simple pop-up messageAdd a toast to the FAB OnClickListenerDisplay the pizza order in a snackbarSnackbars can have actionsThe snackbar code for the pizza orderThe full code for OrderFragment.kt Test DrivePool PuzzlePool Puzzle SolutionLayout Magnets SolutionYour Android Toolbox
10. View Binding: Bound Together
Behind the scenes of findViewById()findViewById() looks for a view in the view hierarchyThere’s a downside to findViewById()View binding to the rescueView binding is safer and more efficient than findViewById()Here’s how we’ll use view bindingThe Stopwatch app revisitedEnable view binding in the app build.gradle fileEnabling view binding generates code for each layoutHow to add view binding to an activityUse the binding property to interact with viewsThe layout codeThe activity codeThe full code for MainActivity.ktWhat the code does Test DriveActivity MagnetsFragments can use view binding too (but the code’s a little different)Let’s implement view binding in the Bits and Pizzas appEnable view binding for Bits and PizzasBinding classes are generated for every layoutFragment view binding code is a little differentActivities can access views from onCreate()Fragments can access views from onCreateView() to onDestroyView()What fragment view binding code looks like_binding refers to the binding object…...and the binding property provides non-null access to itThe full code for OrderFragment.kt Test DriveActivity Magnets SolutionYour Android Toolbox
11. View Models: Model Behavior
Configuration changes revisitedThere are other problems, tooIntroducing the view modelWhy use a view model?What the guessing game will doHow the app will be structuredHere’s what we’re going to doCreate the Guessing Game projectUpdate the project build.gradle file……and update the app build.gradle file tooThe Guessing Game app has two fragmentsCreate GameFragment……and then create ResultFragmentHow navigation should workCreate the navigation graphUpdate the navigation graphDisplay the current fragment in MainActivity’s layoutUpdate GameFragment’s layoutWhat GameFragment needs to doThe GameFragment.kt codeUpdate ResultFragment’s layoutWe also need to update ResultFragment.ktThe ResultFragment.kt codeWhat happens when the app runs Test DriveThe game loses state when the screen rotatesA view model holds business logicAdd a view model dependency to the app build.gradle file……and create a view modelThe full code for GameViewModel.ktCreate a GameViewModel objectUse a ViewModelProvider to create view modelsThe updated code for GameFragment.ktWhat happens when the app runs Test DriveBE the View ModelWe’ve added a view model for GameFragmentResultFragment needs a view model tooResultViewModel needs to hold the resultWe need to link ResultViewModel to ResultFragmentA view model factory creates view modelsCreate the ResultViewModelFactory classUse the factory to create the view modelThe updated code for ResultFragment.ktWhat happens when the app runs Test DriveView Model MagnetsView Model Magnets SolutionBE the View Model SolutionYour Android Toolbox
12. Live Data: Leaping into Action
The Guessing Game app revisitedThe fragments decide when to update viewsLet the view model say when a value’s changedHere’s what we’re going to doAdd a live data dependency to the app build.gradle fileGameViewModel and GameFragment need to use live dataWhich view model properties should use live data?Live data objects use a value propertyThe value property can be nullThe full code for GameViewModel.ktThe fragment observes the view model properties and reacts to changes.The full code for GameFragment.ktWhat happens when the app runs Test DriveFragments can update GameViewModel’s propertiesKeep your privates privateThe full code for GameViewModel.ktWhat happens when the app runs Test DriveGameFragment still includes game logicMake GameViewModel decide when the game is overPool PuzzlePool Puzzle SolutionThe full code for GameViewModel.ktMake GameFragment observe the new propertyWhat happens when the app runsFragment MagnetsFragment Magnets Solution Test DriveYour Android Toolbox
13. Data Binding: Building Smart Layouts
Back to the Guessing Game appThe fragments update the views in their layoutsWe can make the views update themselves insteadHere’s what we’re going to doEnable data binding in the app build.gradle fileResultFragment updates the text in its layoutHow we’ll implement data binding1. Add <layout> and <data> elements2. Set the layout’s data binding variable3. Use the layout’s data binding variable to access the view modelThe full code for fragment_result.xmlThe full code for ResultFragment.ktWhat happens when the app runs Test DriveLayout MagnetsLayout Magnets SolutionGameFragment can use data binding tooAdd <layout> and <data> elements to fragment_game.xmlUse the data binding variable to set the layout’s textTwo of the views need to show extra textString resources revisitedString resources can have argumentsAdd two new String resources to strings.xmlThe layout can pass parameters to String resourcesThe full code for fragment_game.xmlWe need to set the gameViewModel variableWe also need to make the data binding use live dataThe full code for GameFragment.ktWhat happens when the app runs Test DriveYou can use data binding to call methodsAdd finishGame() to GameViewModel.ktUse data binding to make a button call a method when clickedThe full code for fragment_game.xmlWhat happens when the app runs Test DrivePool PuzzleFireside ChatsWe can switch off view bindingSwitch off view binding in the app’s build.gradle file Test Drive Binding-Cross Binding-Cross SolutionPool Puzzle SolutionYour Android Toolbox
14. Room Databases: Room with a View
Most apps need to store dataApps can persist data using a databaseHow the app will be structuredRoom is a database library that sits on top of SQLiteRoom apps are usually structured using MVVMHere’s what we’re going to doCreate the Tasks projectAdd a variable to the project build.gradle file……and update the app build.gradle file, tooCreate TasksFragmentUpdate TasksFragment.ktUpdate fragment_tasks.xmlDisplay TasksFragment in MainActivity’s layout……and check the MainActivity.kt codeHow Room databases are created1. A database class2. Data classes for the tables3. Interfaces for data accessWe’ll store tasks data in a tableYou define tables with an annotated data classCreate the Task data classSpecify a table name with @EntitySpecify the primary key with @PrimaryKeySpecify column names with @ColumnInfoThe full code for Task.ktUse an interface to specify data operationsCreate the TaskDao interfaceUse @Dao to mark the interface for data accessUse @Insert to insert a recordUse @Update to update a recordUse @Delete to delete a recordUse @Query for everything elseThe full code for TaskDao.ktCreate a TaskDatabase abstract classAnnotate the class with @DatabaseAdd properties for any DAO interfacesCreate and return an instance of the databaseThe full code for TaskDatabase.ktMVVM revisitedWe’ve completed all the Model code……so let’s move on to the ViewModelCreate TasksViewModelDatabase operations can run in slooooow-mooooWe’ll use coroutines to run data access code in the background1. Mark TaskDao’s methods with suspend2. Launch the insert() method in the backgroundTasksViewModel needs a view model factoryCreate TasksViewModelFactoryTasksViewModelFactory needs a TaskDaoThe TaskDatabase code has a TaskDao propertyThe updated code for TasksFragment.ktTasksFragment can use data bindingWe’ll use data binding to insert a recordSet TasksViewModel’s newTaskName propertyCall TasksViewModel’s addTask() methodThe full fragment_tasks.xml codeThe full TasksFragment.kt codeWhat happens when the code runs Test DriveTasksFragment needs to display recordsUse getAll() to get all tasks from the databaseA LiveData<List<Task>> is a more complex typeUse Transformations.map() to transform live data objectsLet’s update the TasksViewModel codeWe’ll bind the tasksString property to the layout’s text viewWe need to make the layout respond to live data updatesThe full TasksFragment.kt codeWhat happens when the code runs Test Drive Mixed Messages Mixed Messages SolutionYour Android Toolbox
15. Recycler Views: Reduce, Reuse, Recycle
What the Tasks app currently looks likeWe can turn the list into a recycler viewWhy use a recycler view?Recycler views get their data from an adapterHere’s what we’re going to doAdd a recycler view dependency to the app build.gradle fileTell the recycler view how to display each item……by defining a layout fileThe adapter adds data to the recycler viewCreate the adapter fileTell the adapter what data it should work withOverride the getItemCount() methodDefine the adapter’s view holderOverride the onCreateViewHolder() methodAdd data to the layout’s viewThe full code for TaskItemAdapter.ktThe adapter code is completeWe need to display the recycler viewHow to add a recycler view to a layoutThe full code for fragment_tasks.xmlTell the recycler view to use the adapterThe updated code for TasksFragment.ktWe’ve added a recycler view to TasksFragment’s layoutWe’ll make TasksFragment add task data to TaskItemAdapterUpdate the TasksViewModel.kt codeTasksFragment needs to update TaskItemAdapter’s data propertyThe full code for TasksFragment.ktWe’ve finished writing all the recycler view codeWhat happens when the code runs Test DriveAdapter MagnetsAdapter Magnets SolutionRecycler views are very flexibleRecycler view 2.0Add a card view dependency to the app build.gradle fileHow to create a card viewThe full code for task_item.xmlThe adapter’s view holder needs to work with the new layout codeThe full code for TaskItemAdapter.ktWhat the recycler view looks like so farThe layout manager galleryDisplay items in a horizontal rowUse GridLayoutManager to display items in a gridArrange items in a staggered gridUpdate fragment_tasks.xml to arrange items in a gridWhat happens when the code runs Test DrivePool PuzzlePool Puzzle SolutionYour Android Toolbox
16. Diffutil and Data Binding: Life in the Fast Lane
The recycler view displays task data correctly……but when the data’s updated, the recycler view jumpsThe Tasks app revisitedHow the recycler view gets its dataThe data property’s setter calls notifyDataSetChanged()notifyDataSetChanged() redraws the entire listTell the recycler view what needs to changeDiffUtil works out differences between listsHere’s what we’re going to doWe need to implement DiffUtil.ItemCallbackCreate TaskDiffItemCallback.ktA ListAdapter accepts a DiffUtil.ItemCallback argumentWe can simplify the rest of TaskItemAdapter’s codeThe updated code for TaskItemAdapter.ktPopulate the ListAdapter’s list……using submitList()The updated code for TasksFragment.ktWhat happens when the code runs Test DriveBE the ListAdapterRecycler views can use data bindingHow we’ll implement data bindingAdd a data binding variable to task_item.xmlThe layout gets inflated in the adapter’s view holder codeUse the binding class to inflate the layoutSet the layout’s data binding variable to a TaskThe full code for TaskItemAdapter.ktUse data binding to set the layout’s viewsThe full code for task_item.xmlWhat happens when the code runs Test DriveAdapter MagnetsAdapter Magnets SolutionBE the ListAdapter SolutionYour Android Toolbox
17. Recycler View Navigation: Pick a Card
Recycler views can be used for navigationHow the Tasks app is currently structuredWe’re going to make the recycler view navigate to a new fragmentHere’s what we’re going to doMake each item clickableWhere should we create the toast?We’ll make TasksFragment pass the toast code in a lambdaHow the code will workThe full code for TaskItemAdapter.ktWe’ll pass a lambda to TaskItemAdapterThe full code for TasksFragment.ktWhat happens when the code runs Test DriveAdapter MagnetsAdapter Magnets SolutionWe want to use the recycler view to navigate to a new fragmentUpdate the project build.gradle file……then update the app build.gradle fileCreate EditTaskFragment……and create a navigation graphUpdate the navigation graphAdd a NavHostFragment to MainActivity’s layoutMake TasksFragment navigate to EditTaskFragmentAdd a new property to TasksViewModelAdd methods to update the new propertyThe full code for TasksViewModel.ktMake TasksFragment navigate to EditTaskFragmentCall onTaskClicked() when the user clicks a taskNavigate to EditTaskFragment when navigateToTask gets updatedThe full code for TasksFragment.ktMake EditTaskFragment display the task IDWe also need to update EditTaskFragment.ktThe full code for EditTaskFragment.ktWhat happens when the code runs Test DriveWe want to use EditTaskFragment to update task recordsUse TaskDao to interact with database recordsWe’ll create a view model to access TaskDao’s methodsCreate EditTaskViewModelThe view model needs to get a task record……and include methods to update and delete the taskEditTaskViewModel will tell EditTaskFragment when to navigateThe full code for EditTaskViewModel.ktEditTaskViewModel needs a view model factoryCreate EditTaskViewModelFactoryfragment_edit_task.xml needs to display the taskWe need to update EditTaskFragment.kt tooThe full code for EditTaskFragment.ktWhat happens when the code runs Test DriveYour Android Toolbox
18. Jetpack Compose: Compose Yourself
UI components don’t have to be ViewsWe’re going to build a Compose appHere’s what we’re going to doCreate a new Compose projectConfigure the projectCompose projects have no layout filesWhat Compose activity code looks likeCompose activities extend ComponentActivityUse a Text composable to display textUse composables in composable functionsCall the Hello composable from setContent()Most UIs have multiple composablesYou can arrange composables using Row or ColumnThe full code for MainActivity.kt Test DriveYou can preview composable functionsAdd MainActivityPreview to MainActivity.ktPreview composables with the Design or Split optionPool PuzzlePool Puzzle SolutionLet’s make the app convert temperaturesAdd a MainActivityContent composable functionDisplay the header image……with an Image composableAdd an Image to MainActivity.ktLet’s display the temperature text Test DriveUse a Button composable to add a buttonLet’s write a ConvertButton composable functionWe need to pass a lambda to ConvertButtonWe need to change the value of TemperatureText’s argumentUse remember to store celsius in memoryThe full code for MainActivity.ktWhat happens when the app runs Test DriveCompose MagnetsCompose Magnets SolutionLet the user enter a temperatureWe’ll use a TextField composableAdd a TextField to a composable functionCall the function in MainActivityContentThe full code for MainActivity.ktWhat happens when the app runs Test DriveWe’ll tweak the app’s appearanceAdd padding to the Column composableYou can center composables in Columns or RowsCenter all of a Column’s contentCenter the content of a single RowApplying themes: revisitedHow to apply a theme to composablesAndroid Studio includes extra theme codeHow to apply the themeThe full code for MainActivity.kt Test DriveBE ComposeBE Compose SolutionYour Android Toolbox
19. Integrating Compose with views: Perfect Harmony
You can add composables to View-based UIsThe Guessing Game app revisitedThe Guessing Game app structureHere’s what we’re going to doUpdate the project build.gradle file……and update the app build.gradle file, tooWe’ll replace ResultFragment’s views with composablesA ComposeView lets you add composables to a layoutWe’ll add a ComposeView to fragment_result.xmlAdd composables using Kotlin codeAdd a composable function for the fragment’s contentReproduce the Start New Game buttonReproduce ResultFragment’s TextViewThe updated code for ResultFragment.kt Test DriveWe need to remove ResultFragment’s views……and update ResultFragment.ktonCreateView() returns the UI’s root viewReturn a ComposeView for Compose UIsThe full code for ResultFragment.ktWe can delete fragment_result.xmlWhat happens when the app runs Test DrivePool PuzzleNext we’ll make GameFragment use composables tooWe’ll add a ComposeView to fragment_game.xmlAdd a composable function for GameFragment’s contentReproduce the Finish Game buttonReproduce the EditText with a TextFieldReproduce the Guess buttonThe updated code for GameFragment.kt Test DriveWe’ll display the incorrect guesses in a Text composableRespond to LiveData using observeAsState()Create an IncorrectGuessesText composable functionRun IncorrectGuessesText from GameFragmentContentCompose MagnetsCompose Magnets SolutionThe updated code for GameFragment.kt Test DriveRemove views from GameFragment.ktDelete fragment_game.xmlWe can also switch off data binding Test DrivePool Puzzle SolutionYour Android ToolboxLeaving townIt’s been great having you here in Androidville
A. Leftovers: The Top Ten Things (we didn’t cover)
1. Sharing data with other appsSharing data with Android’s intent resolverSharing data with the Android Sharesheet2. WorkManagerUse WorkManager to schedule deferrable tasks3. Dialogs and notificationsUse dialogs to prompt the user for a decisionNotifications appear outside the app’s UI4. Automated testingUnit testsInstrumented testsAn instrumented test example5. Supporting different screen sizesProvide alternate layoutsUse a SlidingPaneLayout6. More Compose featuresThe Compose ViewModel libraryCompose constraint layout libraryThe Compose Navigation component7. Retrofit8. Android Game Development Kit9. CameraX10. Publishing your appPreparing your app for releaseReleasing your app
Index

Content preview from Head First Android Development, 3rd Edition

Chapter 19. Integrating Compose with views: Perfect Harmony

You get the best results when things work together.

So far, you’ve learned how to build a UI using views or composables. But what if you want to use both? In this chapter, you’ll find out how to get the best of both worlds by adding composables to a View-based UI. You’ll discover techniques for making composables work with view models. You’ll even find out how to make them respond to LiveData updates. By the end of the chapter, you’ll have all the tools you need to use composables with views, or even migrate to a pure Compose UI.

You can add composables to View-based UIs

In the previous chapter, you learned how to implement a Compose UI by building a brand new Temperature Converter app. Instead of adding views to a layout file, you created the UI by calling composables in the activity’s Kotlin code.

There are times, however, when you might want to use views and composables in the same UI. This may be because you want to use components that are only available as views or composables, for example, or you want to migrate parts of your app to Compose.

The great news is that you can add composables to a UI that’s defined in a layout file. We’ll show you how this is done by taking the Guessing Game app we created earlier in the book, and migrating it to Compose.

The Guessing Game app revisited

As we’re sure you remember, ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Head First Android Development, 2nd Edition

Publisher Resources

ISBN: 9781492076513Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design