Skip to content

Commit 4752519

Browse files
Further improvements.
1 parent 27b171c commit 4752519

File tree

4 files changed

+36
-34
lines changed

4 files changed

+36
-34
lines changed

content/learning-paths/smartphones-and-mobile/build-android-selfie-app-using-mediapipe-multimodality/2-app-scaffolding.md

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,18 @@ Before you start coding, here are some useful tips:
3232
2. Select **Empty Views Activity** in the **Phone and Tablet** gallery as Figure 1 shows, then select **Next**.
3333
![Empty Views Activity.png alt-text#center](images/2/empty%20project.png "Figure 1: Select Empty Views Activity.")
3434

35-
3. Choose a project name, and select the default configurations as Figure 2 shows. Make sure that the **Language** field is set to **Kotlin**, and **Build configuration language** is set to **Kotlin DSL**.
35+
3. Choose a project name, and select the default configurations as Figure 2 shows.
36+
37+
Make sure that the **Language** field is set to **Kotlin**, and the **Build configuration language** field is set to **Kotlin DSL**.
3638
![Project configuration.png alt-text#center](images/2/project%20config.png "Figure 2: Project Configuration.")
3739

38-
## Introduce CameraX dependencies
40+
## Add CameraX dependencies
3941

4042
[CameraX](https://developer.android.com/media/camera/camerax) is a Jetpack library, built to help make camera app development easier. It provides a consistent, easy-to-use API that works across the vast majority of Android devices with great backward-compatibility.
4143

42-
1. Wait for Android Studio to sync project with Gradle files, this might take several minutes.
44+
1. Wait for Android Studio to sync project with Gradle files. This might take several minutes.
4345

44-
2. Once the project is synced, navigate to `libs.versions.toml` in your project's root directory as Figure 3 shows. This file serves as the version catalog for all dependencies used in the project.
46+
2. Once the project is synced, navigate to `libs.versions.toml` in your project's root directory. See Figure 3. This file serves as the version catalog for all dependencies that the project uses.
4547

4648
![Version Catalog.png alt-text#center](images/2/dependency%20version%20catalog.png "Figure 3: Version Catalog.")
4749

@@ -84,7 +86,7 @@ camera-view = { group = "androidx.camera", name = "camera-view", version.ref = "
8486
}
8587
```
8688

87-
2. You should see that a notification appears, as Figure 4 shows. Click **Sync Now** to sync your project.
89+
2. You should see that a notification appears. See Figure 4. Click **Sync Now** to sync your project.
8890

8991
![Gradle sync.png alt-text#center](images/2/gradle%20sync.png "Figure 4: Gradle Sync.")
9092

content/learning-paths/smartphones-and-mobile/build-android-selfie-app-using-mediapipe-multimodality/3-camera-permission.md

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,15 @@ weight: 3
66
layout: learningpathall
77
---
88

9-
## Run the app on your device
9+
### Connect your device to your machine with a USB data cable
1010

11-
In this section, you will learn how to run the app on your device.
12-
13-
#### Connect your device to your machine with a USB data cable
14-
15-
If this is your first time running and debugging Android apps, follow the guidance on the Android Developer website [Set up a device for development](https://developer.android.com/studio/run/device#setting-up), and check that you have completed these steps:
11+
If this is your first time running and debugging Android apps, follow the guidance on the Android Developer website. See [Set up a device for development](https://developer.android.com/studio/run/device#setting-up), and check that you have completed these steps:
1612

17-
1. You have followed the instructions [Enable USB debugging on your device](https://developer.android.com/studio/debug/dev-options#Enable-debugging) from the Android Developer website.
13+
1. You have followed the instructions [Enable USB debugging on your device](https://developer.android.com/studio/debug/dev-options#Enable-debugging).
1814

19-
2. You have confirmed that you have enabled USB debugging by tapping **OK** on your device when the **Allow USB debugging** dialog appears, and that you have checked **Always allow from this computer**, as Figure 6 shows.
15+
2. You have confirmed that you have enabled USB debugging by tapping **OK** on your device when the **Allow USB debugging** dialog appears, and that you have checked **Always allow from this computer**. See Figure 6.
2016

21-
![AllowUSBDebugging.jpg alt-text#center](https://ftc-docs.firstinspires.org/en/latest/_images/AllowUSBDebugging.jpg) "Figure 6: Allow USB Debugging."
17+
![AllowUSBDebugging.jpg #center](https://ftc-docs.firstinspires.org/en/latest/_images/AllowUSBDebugging.jpg "Figure 6: Allow USB Debugging.")
2218

2319

2420
3. Make sure that your device model name and SDK version correctly show up in the top-right toolbar.
@@ -36,13 +32,13 @@ If this is your first time running and debugging Android apps, follow the guidan
3632
2024-11-20 11:43:03.408 2709-3807 PackageManager pid-2709 E Permission android.permission.CAMERA isn't requested by package com.example.holisticselfiedemo
3733
```
3834

39-
6. This is the expected behavior from having not yet correctly configured the app's [permissions](https://developer.android.com/guide/topics/permissions/overview). Android OS restricts this app's access to camera features due to privacy constraints.
35+
This is the expected behavior from having not yet correctly configured the app's permissions. See[Permissions](https://developer.android.com/guide/topics/permissions/overview) on the Android Developer website. Android OS restricts the app's access to camera features due to privacy constraints.
4036

41-
#### Request camera permission at runtime
37+
### Request camera permission at runtime
4238

4339
1. Navigate to `manifest.xml` in your `app` sub-project's `src/main` path.
4440

45-
Declare the camera hardware and set the permissions by inserting the following lines into the `<manifest>` element. Ensure that it is declared outside and above the `<application>` element.
41+
Declare the camera hardware, and set the permissions by inserting the following lines into the `<manifest>` element, ensuring that it is declared outside and above the `<application>` element:
4642

4743
```xml
4844
<uses-feature
@@ -52,7 +48,7 @@ If this is your first time running and debugging Android apps, follow the guidan
5248
```
5349

5450
2. Navigate to `strings.xml` in your `app` sub-project's `src/main/res/values` path.
55-
Insert the following lines of text resources, which you will use at a later stage.
51+
Insert the following lines of text resources, which you will use at a later stage:
5652

5753
```xml
5854
<string name="permission_request_camera_message">Camera permission is required to recognize face and hands</string>
@@ -77,8 +73,8 @@ If this is your first time running and debugging Android apps, follow the guidan
7773
}
7874
```
7975

80-
5. Add a condition check in `onCreate()` wrapping `setupCamera()` method, to request camera
81-
permission on runtime.
76+
5. Add a condition check in on the `onCreate()` wrapping `setupCamera()` method, to request camera
77+
permission on runtime:
8278

8379
```kotlin
8480
if (!hasPermissions(baseContext)) {
@@ -117,14 +113,16 @@ If this is your first time running and debugging Android apps, follow the guidan
117113
}
118114
```
119115

120-
#### Verify camera permission
116+
### Verify camera permission
121117

122118
1. Rebuild and run the app. Now you should see a dialog pop up requesting camera permissions.
123119

124-
2. Depending on your Android OS version, tap **Allow** or **While using the app**(). Then you should see your own face in the camera preview. Good job!
120+
2. Depending on your Android OS version, tap **Allow** or **While using the app**().
121+
122+
You should then see your own face in the camera preview. Good job!
125123

126124
{{% notice Tip %}}
127-
You might need to restart the app to observe the permission change take effect.
125+
You might need to restart the app to ensure that the permission change takes effect.
128126
{{% /notice %}}
129127

130128
In the next section, you will learn how to integrate MediaPipe vision solutions.

content/learning-paths/smartphones-and-mobile/build-android-selfie-app-using-mediapipe-multimodality/4-introduce-mediapipe.md

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,14 @@ MediaPipe Tasks provides the core programming interface of the MediaPipe Solutio
1414

1515
1. Navigate to `libs.versions.toml` and append the following line to the end of the `[versions]` section.
1616

17-
This defines the version of MediaPipe library that you will be using.
17+
This defines the version of MediaPipe library that you will be using:
1818

1919
```toml
2020
mediapipe-vision = "0.10.15"
2121
```
2222

2323
{{% notice Note %}}
24-
Ensure that you use this version and not newer versions as they might introduce bugs and unexpected behavior.
24+
Ensure that you use this particular version, and not later versions as they might produce unexpected behavior.
2525
{{% /notice %}}
2626

2727
2. Append the following lines to the end of the `[libraries]` section. This declares MediaPipe's vision dependency:
@@ -42,7 +42,7 @@ In this app, you will use MediaPipe's [Face Landmark Detection](https://ai.googl
4242

4343
Choose one of the two options below that aligns best with your learning needs.
4444

45-
### Basic approach: manual download
45+
### 1. Basic approach: manual download
4646

4747
Download the following two files, then move them into the default asset directory `app/src/main/assets`:
4848

@@ -56,15 +56,17 @@ https://storage.googleapis.com/mediapipe-models/gesture_recognizer/gesture_recog
5656
You might need to create an `assets` directory if you do not have one already.
5757
{{% /notice %}}
5858

59-
### Advanced approach: configure prebuild download tasks
59+
### 2. Advanced approach: configure prebuild download tasks
6060

61-
Gradle does not come with a convenient [Task](https://docs.gradle.org/current/userguide/tutorial_using_tasks.html) type to manage downloads, so you will use the [gradle-download-task](https://github.com/michel-kraemer/gradle-download-task) dependency.
61+
As Gradle does not come with a convenient [Task](https://docs.gradle.org/current/userguide/tutorial_using_tasks.html) type to manage downloads, you will need to use the [gradle-download-task](https://github.com/michel-kraemer/gradle-download-task) dependency.
6262

6363
1. Navigate to `libs.versions.toml`. Then:
6464

6565
* Append `download = "5.6.0"` to the `[versions]` section, and append `de-undercouch-download = { id = "de.undercouch.download", version.ref = "download" } to `[plugins]` section.
6666

67-
2. Navigate to `build.gradle.kts` in your project's `app` directory. Then append `alias(libs.plugins.de.undercouch.download)` to the `plugins` block. This enables the _Download_ task plugin in this `app` subproject.
67+
2. Navigate to `build.gradle.kts` in your project's `app` directory. Then:
68+
69+
* Append `alias(libs.plugins.de.undercouch.download)` to the `plugins` block. This enables the _Download_ task plugin in this `app` subproject.
6870

6971
3. Insert the following lines between the `plugins` block and the `android` block to define the constant values, including the asset directory path and the URLs for both models:
7072

@@ -99,7 +101,7 @@ tasks.named("preBuild") {
99101
1. Sync the project again.
100102

101103
{{% notice Tip %}}
102-
Refer to [this section](2-app-scaffolding.md#enable-view-binding) if you need help.
104+
See the previous section [Set up the Development Environment](2-app-scaffolding.md#enable-view-binding), as a reminder on how to do this.
103105
{{% /notice %}}
104106

105107
2. Now you should see both model asset bundles in your `assets` directory, as shown below:
@@ -110,7 +112,7 @@ Refer to [this section](2-app-scaffolding.md#enable-view-binding) if you need he
110112

111113
Example code is already implemented for ease of use based on [MediaPipe's sample code](https://github.com/google-ai-edge/mediapipe-samples/tree/main/examples).
112114

113-
Simply create a new file `HolisticRecognizerHelper.kt` placed in the source directory along with `MainActivity.kt`, then copy and paste the code below into it.
115+
Simply create a new file called `HolisticRecognizerHelper.kt`, and place it in the source directory along with `MainActivity.kt`, then copy-and-paste the code below into it:
114116

115117
```kotlin
116118
package com.example.holisticselfiedemo
@@ -435,9 +437,9 @@ data class GestureResultBundle(
435437
```
436438

437439
{{% notice Info %}}
438-
The scope of this Learning Path is limited to the recognition of at most one person with two hands in the camera using the MediaPipe vision solutions.
440+
The scope of this Learning Path is limited to the recognition of one person with two hands in the camera using the MediaPipe vision solutions.
439441

440-
If you do want to experiment with a greater number of people, change the `FACES_COUNT` constant to a different value.
442+
If you would like to experiment with a greater number of people, change the `FACES_COUNT` constant to a higher value.
441443
{{% /notice %}}
442444

443445
In the next section, you will connect the dots from this helper class to the UI layer through a ViewModel.

content/learning-paths/smartphones-and-mobile/build-android-selfie-app-using-mediapipe-multimodality/_index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ minutes_to_complete: 120
66
who_is_this_for: This is an introductory topic for mobile application developers interested in learning how to build an Android selfie application with Modern MediaPipe Multimodal AI, Kotlin flows, and CameraX, using the Modern Android Development (MAD) architecture design.
77

88
learning_objectives:
9-
- Architect a modern Android app focussing on the UI layer.
9+
- Architect a modern hands-free selfie Android app with MediaPipe.
1010
- Leverage lifecycle-aware components within the Model-View-ViewModel (MVVM) architecture.
1111
- Combine MediaPipe's face landmark detection and gesture recognition for integration in a multimodel selfie solution.
1212
- Use JetPack CameraX to access camera features.

0 commit comments

Comments
 (0)