Top 10 Fitbit phone setting (companion) examples with code and screenshots

5 min readOct 13, 2021

--

Awesome settings with images for setting different kind of elements on mobile settings for a fitbit app.

Screen shot from website https://my-fitbit.github.io/ showing how my fitbit apps look on various fitbit devoces — https://my-fitbit.github.io/

You might have this question: Who are you to write on fitbit app development ?

Well I will keep my answer simple and to the point, scoping to this article.

I am a part time developer who managed to design, develop and deliver multiple fitbit apps and clock faces

I have been developing fitbit app’s since 2019 ( when fitbit was not a part of Google)

You can Explore all my aps on my website https://my-fitbit.github.io/ or on fitbit’s offical app store page

So lets get started…

This article is straightforward.
I have listed top 9 Phone settings with Code and screen shots and 1 advanced ( Bonus) !
All of these do not depend upon type of fitbit watch you may use or develop
These are super helpful to save time while you are building next awesome fitbit app or a clockface. Both as a developer or for fun.

1. Fitbit app companion (mobile) setting to set background color

Screen showing options to set background color of fitbit app — Fig: setting to set background color of fitbit

github code to create setting on phone to set background color for fitbit app

2. Section with Text Box ( user taps to enter text box) with labels and link

Step 1 : User click’s on Tap to enter text

Step 1 : User click’s on Tap to enter text — Step 1 : User click’s on Tap to enter text

Step 2: User is presented a text entry area ( you can say text box) with a label “less is more..” to enter text of their choice

Step 2: User is presented a text entry area — Step 2: User is presented a text entry area

github code to show Section with Text Box on phone to fitbit user

3. Display a Text Image row

That contains :
Icon : An image of your choice.
Label : A message you want to display
Sublabel: Text with Link , such as donation in this case PayPal

Fig. Display a Text Image row ( paypal donation) — Fig. Display a Text Image row ( paypal donation)

github code to display a Text Image row. on phone to fitbit user

4. Text Message with alignment

align right | left | center
bold | italic
bold and center

Fig showing Text Message with various alignment and bold italic options — Fig. Text Message with alignment, bold, italic options

github code to show Text Message with alignment on phone to fitbit user

5. Slider with auto display value selected

Step 1: Display a default value ( you can set this for user)

Fig. Display slider with default value — Fig. Display slider with default value

Step 2: User scrolls it to 15 and you update “15” as a value in display

Fig. User scrolls slider to to value = 15 — Fig. User scrolls slider to to value = 15

github code to show Slider with auto display value on phone to fitbit user

6. Input Text with auto complete option

1. Tap on Text Input box with a label

1. Tap on Text Input box with a label

2. Display text input option to user

2. Display text input option to user

3. Start typing o

3. Start typing o

4. Continue typing on.. and show user all matching options

4. Continue typing on.. and show user all matching options — 4. Continue typing on.. and show user all matching options

5. Next time onwards it may show all options as per device size

5. Next time onwards it may show all options as per device size

github code to showInput Text with auto complete option on phone to fitbit user

7. Select option (only one)

Step 1. User Taps to go for selection

Fig. Tap to select option

Step 2. User selects option (only one)

Fig. Select option (only one)

github code to show Select option (only one) on phone to fitbit user

8. Select option (multiple)

1. User click “Item Name” to add an item to the list of items

User click “Item Name” to add an item to the list of items

2. User is displayed text box to enter text

2. User is displayed text box to enter text

3. User starts auto typing and all matching options are displayed

3. User starts auto typing and all matching options are displayed

4. User selects “one hundred”

4. User selects “one hundred”

5. User tries to add another option to selection “one ”

5. User tries to add another option to selection “one “ — 5. User tries to add another option to selection “one ”

6. User is displayed all selected options

6. User is displayed all selected options

7. User clicks Edit to modify selection

7. User clicks Edit to modify selection — 7. User clicks Edit to modify selection

8. User removes a selection (one hundred)

8. User removes a selection (one hundred)

9. After editing user clicks Done

9. After editing user clicks Done

github code to show Select option (multiple) on phone to fitbit user

9. Upload Image from phone to fitbit watch

1. User clicks to upload an image from phone settings

1. User clicks to upload an image from phone settings

2. User pics and edit’s the image ( crop image based upon image Width and image Height settings) for example: 300 x300 is for fitbit ionic

2. User pics and edit’s the image

3. After uploading and editing show a thumbnail of image on phone settings

github code to show option to Upload Image from phone to fitbit watch

__ Advanced

10. Using functions / methods to updated text on phone settings (display) itself

Updated text on phone settings display using functions logic

github code to show functions / methods to updated text on phone settings page itself

_________________________ #free

Feel free to download my free apps and clockface

https://my-fitbit.github.io/

_#free_________________________

Millan K

Written by Millan K

Quality Enthusiast, human at heart ❤️ . I write about life in tech and tech in life.I follow me ➡️ #QualityWithMillan or https://QualityWithMillan.github.io

Help
Status
About
Careers
Blog
Privacy
Terms
Text to speech
Teams