Filter
-
Content Type
-
Category
Mobile/Wearable
Visual Display
Digital Appliance
Platform
Recommendations
Filter
tutorials foldable, mobile
blogdue to the large variety of android devices, supporting multiple screen sizes and display modes is an essential part of modern android application development. a responsive and adaptable ui provides a seamless user experience for people using the application on different devices, such as phones, foldables, and tablets. this article offers some tips and tricks for developing adaptable applications that support features specific to foldable and large screen devices: displaying widgets and applications on the cover screen adapting applications to flex mode adapting applications to multi-window mode display widgets and applications on the cover screen using good lock one of the biggest strengths of android devices is customization. with good lock, users can customize one ui to cater to their individual needs, such as adding widgets to the cover screen. in august 2023, samsung released the galaxy z flip5, a foldable smartphone with a cover screen display. the 3.4-inch cover screen can be used to provide the user direct access to the most important information and functionality of their applications. it also offers new opportunities for customization and personalization. the cover screen is designed to display customizable widgets, such as clocks, wallpapers, notification lists, and calendars. for basic information about creating android widgets, see create a simple widget. you can also create widgets for your application that can be displayed on the cover screen. for example, if you are developing a messaging application, you can enhance your application by creating a widget that displays recent or unread messages on the cover screen. to enable displaying your widget on the galaxy z flip5 cover screen (also called the flex window): create a new xml resource file inside your application's res/xml folder. paste the following code to configure your widget's display for the flex window:<samsung-appwidget-provider display="sub_screen"> </samsung-appwidget-provider> in your project's manifest file, add the metadata for the xml file you just created inside the <receiver> element for your application widget:<meta-data android:name="com.samsung.android.appwidget.provider" android:resource="@xml/samsung_meta_info_sample_widget" /> in the xml file containing the metadata for your application widget, change the attributes of your widget to these recommended values:<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android" android:initiallayout="@layout/test_widget" android:minheight="352dp" android:minwidth="339dp" android:resizemode="vertical|horizontal" android:widgetcategory="keyguard"> </appwidget-provider> when the application is installed, your widget appears on the list of cover screen widgets on the device. the user can display the widget on the flex window by going to settings > cover screen > widgets and selecting the widget from the list. to learn more about widget development for the cover screen, see the develop a widget for flex window code lab. although the cover screen is primarily meant for widgets, users can also use the multistar application in good lock to launch full applications on the cover screen. to launch an application on the cover screen: install good lock from galaxy store. in the good lock application, go to life up > multistar > i ♡ galaxy foldable > launcher widget. from the list, select the application you want to launch on the cover screen and tap enable launcher widget. it is vital that your applications can adapt to small screens as much as large screens. the next two sections briefly summarize how to adapt your applications to both flex mode and multi-window mode. adapt your application to flex mode constraint layout is recommended for implementing responsive ui in your applications. constraint layout gives you a flat view hierarchy, avoiding troublesome nested views. you can assign a relative size and distance between viewgroups, so the components scale based on the device that the application is running on. let's say you want to create an application that displays a list of pictures in the middle of the screen, equally spaced. to do this, you can use guidelines, which are virtual guides that help you to align views. to add guidelines and adapt your ui to it: in android studio, go to helpers > guideline(horizontal) or guideline(vertical) and drag guidelines onto your layout. change the value of app:layout_constraintguide_begin from a static value to a percentage value. align your views to the new guidelines by constraining them to the guidelines. for more information on implementing layouts using guidelines and a demonstration, see design a single responsive layout for foldable phones using android guidelines. you can also use android's jetpack windowmanager library, which supports various form factors, including multi-window, to provide support for flex mode in your application: add the following dependencies to the application's build.gradle file: implementation "androidx.window:window:1.0.0" implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.6.1" set a lifecycle-aware task that can obtain window layout information from the windowlayoutinfo object. the checkandupdatestate() function is used to update your ui. pass the newlayoutinfo object to this function and make the appropriate changes. lifecyclescope.launch(dispatchers.main) { lifecycle.repeatonlifecycle(lifecycle.state.started) { windowinfotracker.getorcreate(this @mainactivity) .windowlayoutinfo(this @mainactivity) .collect { newlayoutinfo -> checkandupdatestate(newlayoutinfo) } } } the windowlayoutinfo object contains a displayfeatures object that contains the current state of your application. the displayfeatures object also contains the foldingfeature interface, which describes device states and orientations specific to foldable devices: if the displayfeatures object is null, the device is closed or folded. if foldingfeature.state is half_opened and foldingfeature.orientation is vertical, the device is a galaxy flip device in flex mode. if foldingfeature.state is half_opened and foldingfeature.orientation is horizontal, the device is a galaxy fold device in flex mode. if foldingfeature.state is flat, the device is fully open. for more information about adapting your ui for various device states and orientations, see make your app fold aware. to configure your application for the current window size, whether it is portrait, landscape, folded, unfolded, multi-window or any other mode, override the onconfigurationchanged() function and retrieve the current window size from the windowmetricscalculator interface. override fun onconfigurationchanged(newconfig: configuration) { super.onconfigurationchanged(newconfig) val windowmetrics = windowmetricscalculator.getorcreate() .computecurrentwindowmetrics(this@mainactivity) val bounds = windowmetrics.getbounds() ... } to learn more about implementing flex mode in an existing android project, see implement flex mode on a video player in code lab. adapt your application to multi-window mode multi-window mode and app continuity are key foldable device features that contribute to a more versatile and user-friendly experience. they enhance multitasking capabilities and overall usability of applications across multiple form factors. multi-window mode enables using two or more applications simultaneously on the same screen. applications can also be used in pop-up view, as a movable pop-up on top of another open application. to implement support for multi-window mode and app continuity: add the following attributes to the <activity> element in your androidmanifest.xml file: android:configchanges="screensize|smallestscreensize|screenlayout" android:resizeableactivity="true" adding these flags to the configchanges attribute accounts for every relevant device configuration change, creating a more foldable-aware ui. setting resizeableactivity to true allows the activity to be launched in split-screen and pop-up mode. to remember the application state before configuration changes, you need to use lifecycle-aware components: you can save your previous application state in a bundle inside the onsaveinstancestate() function as key-value pairs. you can then check if a saved application state exists inside the oncreate() function. if the savedinstancestate bundle is null, there is no saved application state. if it is not null, you can retrieve the previous application state and update the ui accordingly. for more information, see foldable adaptation essentials: app continuity and multi-window handling. alternatively, you can use viewmodels. a viewmodel allows you to store the application's ui state, and also provides access to its core business logic. to create a viewmodel, create a separate class that extends the viewmodel class and initialize mutablestate objects that can store the state. create an instance of your viewmodel in your activity's oncreate() function and use it to update your ui elements. for more information, see how to update your apps for foldable displays. if you do not want to support multi-window mode in your application, you can simply set resizeableactivity to false in the <activity> element inside the androidmanifest.xml file. conclusion this article describes some key practices for creating a responsive and adaptable ui for your application, such as enabling cover screen widgets and implementing flex mode and multi-window mode. following these practices ensures a versatile and user-friendly experience on foldable android devices, enhancing multitasking capabilities and the overall usability of applications across various form factors. related content foldables and large screens develop a widget for flex window implement flex mode on a video player galaxy z documentation
Samiul Hossain
Learn Code Lab
codelabcustomize styles of a watch face with watch face studio objective learn how to easily customize the style of a watch face using the customization editor in watch face studio know how to make your watch face respond to your step count using conditional lines overview watch face studio is a graphic authoring tool that enables you to create watch faces for wear os it offers a simple and intuitive way to add images and components, and to configure the watch movement without any coding watch face studio supports watch faces for the galaxy watch4 or newer version, and other watch devices that run on the same platform the style in watch face studio allows you to modify the style of the selected layer you can define image styles and theme color palettes that the user can choose from to customize their watch the customization editor in wfs enables you to refine, organize, name, and preview the styles you have defined for the watch conditional lines let you show and hide components on your watch face and control the behavior of the components use conditional lines to change the look of your watch face in response to certain conditions, such as the time and event, such as unread notifications set up your environment you will need the following watch face studio galaxy watch4 or newer smart watch running on wear os3 or higher sample project here is a sample project for this code lab download it and start your learning experience! style customization sample project 385 30 kb start your project download the sample project file, and click open project in watch face studio locate the downloaded sample project, and then click open add styles to the watch hands and index styles can be added for image-based layers such as icons, index, and hand component layers the watch face supports up to 10 image styles in the style tab, add a file of the same type as the existing image in the layer select the watch hand named min_hand click on the style tab click the + button to add more minute hands simply select the first three images repeat the previous steps for the hour hand and index create style sets go to the style tab and click on customization editor select min_hand, hour_hand, and index_line merge these by using right-click on your mouse change the name of the style sets using text id click on text id of the previously merged style set then, click the add new button set the id name to id_time and the default value to time then, click ok now, you can change the name of your style set click again on the text id and search for the id name that you just set here, the name and default value for your style set are changed finally, repeat the same thing for the background merge the other components to make a single background using the text id, change the name of the style set to id_background and the default value to background modify the theme color palette the theme color palette is a set of colors that you can use on a specific design component each palette can have up to three colors the watch face supports up to 30 theme colors here, you add a new set of colors for the month component go to the style tab under the theme color palette, click the + button choose a color from the palette you can change the other two colors by clicking on the color box preview your watch face using customization editor at this point, you have created custom styles for the watch hands and index, background, and color you can use the run pane and customization editor to preview how the watch face looks like when changing different styles open the run pane in a separate window and click customization editor in the customization editor, you can see the three tabs background, color, and time go to each tab and preview the different custom styles that you’ve created use conditional lines for step count use the conditional lines to make the step count on your watch face respond to certain conditions here, you want to show different images depending on the step count percentage 0% to 20%, 21% to 80%, and 81% to 100% click on the + button and select steps as a conditional line click on the steps icon to view the default conditional lines for all components select the sc_initial component then, double-click on the layer of its conditional line a warning prompts you that any existing conditional lines will be overwritten, simply click ok now, you can start changing the conditional line for the sc_initial component drag the start of the bar to 0% and drag the end of the bar to 20% this sets the condition that the sc_initial image visually appears on the watch face when the step percentage is from 0% to 20% for the sc_moderate component, set the conditional line from 21% to 80%, and for the sc_good component, set it from 81% to 100% this makes the sc_moderate and sc_good images to visually appear on the mentioned step count percentages tipread apply conditional lines on watch faces to know more about conditional line test the watch face in the run pane, click the preview watch face icon and you can run the created watch face with different custom designs to test your watch face, you need to connect a watch device to the same network as your computer in watch face studio, select run on device select the connected watch device you want to test with if your device is not detected automatically, click scan devices to detect your device or enter its ip address manually by clicking the + button noteto run the watch face successfully, you may need to configure its always-on display to avoid any error when you run it on your watch for more details about testing your watch faces, click here you're done! congratulations! you have successfully achieved the goal of this code lab now, you can create a watch face using style and conditional lines in watch face studio by yourself! if you face any trouble, you may download this file style customization complete project 425 73 kb to learn more about watch face studio, visit developer samsung com/watch-face-studio
Learn Code Lab
codelabutilize the add to samsung wallet service for digital cards notescenes in the demo video are simulated and does not represent any real-world conditions or outcomes objective learn how to use the add to samsung wallet service so that users can store digital contents, such as boarding passes, tickets, and coupons, to their samsung wallet app partnership request to create, manage, and monitor performance of wallet cards with the samsung wallet partners site, you must become an official samsung partner once done, you can fully utilize this code lab you can learn more by visiting samsung wallet partner onboarding process, here in samsung developers overview samsung wallet is an application that securely stores essential items such as boarding passes, tickets, and coupons, making them easily accessible from anywhere with this app, users can access various partner wallet cards in one place, simply by swiping up from the bottom of the screen the add to samsung wallet service provides interfaces for users to conveniently add digital content to samsung wallet here are examples of the supported wallet cards boarding pass journey information such as flights, trains, and buses can be provided as notifications, allowing easy retrieval when checking in by configuring server synchronization, updates to journey information such as gate changes, schedule changes, or cancellations can be received by the users ticket notifications about events and additional information, including benefits, can be provided based on real-time utilization of performances, sports games, movies, and admission tickets, status updates related to expiration and availability can be provided gift card gift card, also referred to as a prepaid card, provides real-time balance and transaction history loyalty loyalty cards function as membership credentials, managing membership information through these cards, loyalty points can be administered and redeemed id id cards can fulfill identification verification purposes, such as identity cards, employee cards, and licenses physical documents can be represented through wallet cards, and near field communication nfc -based authentication can be provided reservation reservation cards can contain diverse online booking details, including rental cars, restaurants, and accommodations ongoing reservation information can be managed as a journey pay as you go pay as you go cards allow users to register services that can be charged and utilized according to their preference for convenient use generic card generic cards enable users to create customized cards by selecting preferred card template layouts and designing elements notedepending on your country or region, some card types are not supported if you need assistance, please contact us at developer samsung com/dashboard/support the image below shows the process of managing wallet cards for more information, refer to manage wallet cards set up your environment you will need the following latest version of samsung wallet app from galaxy store samsung galaxy device that supports samsung wallet access to samsung wallet partners site internet browser, such as chrome openssl intellij idea or any java ide optional start the onboarding process partners can manage wallet cards and monitor performance with the samsung wallet partners site to join as partner generate a private key and certificate signing request csr using the openssl command you can follow the instructions in security factors notea private key enables encryption and is the most important component of certificates while csr, which is a necessary factor to obtain a signed certificate, includes the public key and additional information like organization and country proceed to register in the samsung wallet partners site using your samsung account follow the samsung wallet partner onboarding process upload the generated csr for data encryption in encryption setting management section after registration, you will receive a welcome email noteupon receiving the certificates via email, be sure to keep the information safe from exposure and only use them for the following purposes signed certificate used along with the private key to sign data samsung certificate used to encrypt card data and validate authentication tokens in server api headers create a wallet card follow the steps below to create a wallet card in samsung wallet partners site click the wallet cards menu and choose create wallet card fill out the general information form with the details of the wallet card in wallet card template, choose a card type and sub type select the design type and click done you can choose from various types of wallet card templates optimized for partners after inputting all necessary details, click save to set the wallet card status to draft launch the wallet card you can launch and request activation of the card by clicking the launch button upon agreeing to proceed, the launch button text changes to launched and the card status becomes verifying add the card to samsung wallet using the test tool open a web browser on your computer or galaxy mobile device, and go to the following link partner walletsvc samsung com/addtowallettest go to add to wallet tab and click choose key file to upload your private key in the select card dropdown menu, select the created card to display the card details and populate sample data navigate to the form tab and modify the card data as desired notethe structure for configuring wallet cards follows the defined specification you can refer to the full list of card-specific attributes specification scroll down to the bottom of the page and click the add to samsung wallet button click done when a preview of the card shows on your mobile screen with a message indicating that the card has been added to your wallet once the card is added to your samsung wallet app, you can check its details by clicking on it noteyou can also go to the playground tab and add cards to the samsung wallet app even without creating a card on the wallet partners site update the status of the added card if a server api info partner get card data and partner send card state is registered in the wallet card, real-time updates of the user's registered cards can be provided notefor more information, see server interaction modify and update the card's status by utilizing the push notification feature of the test tool navigate to the push notification tab ensure that the correct private key is uploaded and the same card as in the add to wallet tab is selected copy the ref id value from the add to wallet tab and paste it into ref id field in the push notification tab in the status field, enter one of the following card states expired, redeemed, held, suspended, or deleted the current state is set to active then, click the request push notification button check the card in the samsung wallet app to confirm the change tokenize card data and implement the add to samsung wallet button to your service optional notethis step is optional, but if you want to learn how to integrate the add to samsung wallet button into your services like an android app, web app, or email, you can follow these steps the samsung wallet partners site provides generated add to samsung wallet scripts for each wallet card you create you can simply copy and paste these scripts into your partner apps web and android or include them in emails/mms messages to implement the add to wallet button, follow these steps go to the [add to wallet script guide] section of the card you created click show to view the available scripts and then copy the appropriate script for your service develop a program that can generate tokenized card data cdata the cdata represents the actual content of the wallet card and comes in different formats depending on the card type you can check the cdata generation sample code for reference the cdata is derived from the card data, which is in json format for testing purposes, you can utilize the generated json from the test tool follow the implementing atw button guide to determine where to incorporate the generated cdata and gain further insights into this process you're done! congratulations! you have successfully achieved the goal of this code lab topic now, you can utilize the add to samsung wallet service by yourself! to learn more about samsung wallet, visit developer samsung com/wallet
Learn Code Lab
codelabapply conditional lines on watch faces objective learn how to create a watch face that responds to time and notification using conditional lines in watch face studio overview watch face studio is a graphic authoring tool that enables you to create and design watch faces for watches running on wear os it offers a simple and intuitive way to add images and components, and to configure the watch movement without any coding watch face studio supports watch faces for the galaxy watch4 or newer version, and other watch devices that run on the same platform conditional lines in watch face studio lets users easily control components and its behaviors on watch faces you can make your watch faces change dynamically based on time, step-count, or battery using conditional lines now, with the latest version of watch face studio, you can also set conditional lines based from events such as low battery, unread notification, or scenarios without any events set up your environment you will need the following watch face studio latest version galaxy watch4 or newer any supported wear os watch sample project here is a sample project for this code lab download it and start your learning experience! conditional lines sample project 2 43 mb start your project download the sample project file, and click open project in watch face studio locate the downloaded file, then click open apply conditional lines based on time using conditional lines in watch face studio, your watch face can visually change its design based on the time of the day here, you can change the background image of the watch face based on certain time intervals by setting the timeline condition of two background images, named background_day and background_night click the show/hide timeline icon to show the frame area notice that there's a default conditional line based on time for every component each conditional line is represented by a bar in the timeline and you can adjust it using the slider at the end of the bar collapse the background group containing the two background images in the timeline area of background_day, click on its bar and hover your mouse at the start of the bar drag the start of the bar to 06 00 00h and drag the end of the bar to 18 00 00h this sets the condition that background_day visually appears on the watch face from 6 00 am until 6 00 pm tipto quickly navigate on the timeline, hold shift + mouse scroll learn more about keyboard shortcuts, by referring to this guide next, for background_night, set the first time condition from 00 00 00h to 06 00 00h by dragging its bar respectively at the start of 18 00 00h, double-click at the timeline area to create a 2nd bar at that specific time drag the end of the bar to 00 00 00h, at the rightmost part of the timeline this makes background_night to appear conditionally from 6 00 pm until 6 00am on your watch face now, it's time to check if your watch face responds correctly based on the time of the day click show/hide run button to open the run panel in watch face studio move the time control slider from 06 00 00h to 18 00 00h and the watch face should show background_day as its background similarly, check if the watch face changes its background to background_night when the time is from 18 00 00h to 06 00 00h set the unread notification event make your watch face change dynamically based on a specific device event in this step, add an event for unread notifications on notification_envelope, an animation component included in the sample project click + or add conditional line and select event noteto remove conditional line icons such as the battery, steps, 12h/ 24h, or event, simply right-click on it and select remove click show/hide event to start configuring the event-based conditional line for notification_envelope on the notification_envelope layer, double-click on the event frame in the warning window, click ok in this case, all existing conditional frames for this layer are deleted afterward, a bar is created for the event-based conditional line noteeach layer responds to only one type of condition next, drag the bar from no event to unread notification noteno event is used if there is no condition set on either battery low or unread notification events check if the notification_envelope animation component appears on your watch face whenever there's an unread notification click play run preview and move the unread notification slider in the run panel when the unread notification is set to a value of 1 or more, the animation component should visually appear on your watch face test the watch face to test your watch face, you need to connect a watch device to the same network as your computer in watch face studio, select run on device select the connected watch device you want to test with if your device is not detected automatically, click scan devices to detect your device or enter its ip address manually by clicking the + button notethe always-on display is already set in the project to run the watch face successfully, you may need to configure its always-on display to avoid any error when you run on device you're done! congratulations! you have successfully achieved the goal of this code lab now, you can use conditional lines in watch face studio, all by yourself! if you're having trouble, you may download this file conditional lines complete project 2 43 mb to learn more about watch face studio, visit developer samsung com/watch-face-studio
Learn Code Lab
codelabtest edge drivers using smartthings test suite objective learn how to identify and resolve issues when deploying edge drivers using smartthings test suite overview smartthings test suite is a tool for testing iot device integrations within the smartthings platform this solution provides a seamless certification process, allowing developers of smartthings hub connected devices to submit their products for certification without the need for manual testing this accelerates the certification timeline and offers a more cost-effective path to certifying these devices the key feature of this self-testing tool is it contains an automated testing suite that covers critical certification criteria, ranging from functionality to performance tests the tool also provides real-time feedback that gives detailed information on the device's compliance status, allowing for quick identification and resolution of any issues lastly, it has an intuitive and user-friendly interface that ensures a seamless experience for developers of all levels set up your environment you will need the following host pc running on windows 10 or higher or ubuntu 20 04 x64 visual studio code latest version recommended devices connected on the same network android mobile device with smartthings app installed with android 10 or higher smartthings station or smartthings hub onboarded with samsung account smartthings v4 multipurpose sensor or lightify tunable white 60 light bulb notemake sure that your devices are connected to your smartthings app sample code here is a sample code for this code lab download it and start your learning experience! test suite sample code 185 4 kb install smartthings cli you need to install smartthings cli as this is the main tool for developing apps and drivers for smartthings edge drivers to install smartthings cli, open a web browser and download the smartthings msi installer from the latest release notefor other operating systems, download the appropriate zipped binary and install it on your system path open the smartthings cli setup in the downloaded file, then click next accept the license agreement terms, then click next select the destination path for installation and click next to begin the installation process, click install notethe windows installer may display a warning titled windows protected your pc to continue the installation, click more info > run anyway complete the setup by clicking finish to verify if smartthings cli is installed correctly, open the command prompt and run this command smartthings --version view and run available commands for smartthings cli with this command smartthings --help for a full list of commands, visit the smartthings cli commands notethe smartthings cli supports an automatic login flow that launches a browser window, prompting the user to log in with samsung account and grant the cli permissions to access the user's account start your project after downloading and extracting the sample code containing the project files, click file > open folder in visual studio code to open it locate the sample code file directory and click select folder once finished, the project files are seen on the explorer menu configure custom edge drivers open your command prompt or terminal and follow the corresponding instructions depending on your device availability make sure that the path directory in your cli contains the project file smartthings multipurpose sensor in the terminal, type the following command to build and upload your edge driver package to the smartthings cloud smartthings edge drivers package drivers/codelab-zigbee-contact create a new channel for your edge driver and enter the following channel details smartthings edge channels create channel name smartthings test suite demo channel description channel for sdc2024 channel terms of service url www smartthings com enroll your hub in your newly created channel and select the corresponding channel and hub smartthings edge channels enroll assign your driver to the created channel smartthings edge channels assign install the created edge driver from your channel to your own hub smartthings edge drivers install confirm that the correct version of the driver is present in your hub smartthings edge drivers installed select the edge driver for this device smartthings edge drivers switch lightify tunable white 60 bulb in the terminal, type the following command to build and upload your edge driver package to the smartthings cloud smartthings edge drivers package drivers/codelab-zigbee-switch create a new channel for your edge driver and enter the following channel details smartthings edge channels create channel name smartthings test suite demo channel description channel for sdc2024 channel terms of service url www smartthings com enroll your hub in your newly created channel and select the corresponding channel and hub smartthings edge channels enroll assign your driver to the created channel smartthings edge channels assign install the created edge driver from your channel to your own hub smartthings edge drivers install confirm that the correct version of the driver is present in your hub smartthings edge drivers installed select the edge driver for this device smartthings edge drivers switch test your device on your web browser, go to smartthings test suite, login to your samsung account and follow the corresponding instructions depending on your device availability smartthings multipurpose sensor on the test suite, look for your device, click menu icon > prepare new test under the compatible capabilities, select all capabilities except for battery, and click start during the test execution, perform the indicated user actions for every test case if there are any it might cause incorrect test results if user actions are not performed tipyou may view the real-time sensor states of the device in the smartthings mobile app view the test summary after the test it returns a failed test that you are going to resolve in the next step lightify tunable 60 white bulb on the test suite, look for your device, click menu icon > prepare new test under the compatible capabilities, select all capabilities after you've selected the capabilities, click start warningduring the test execution, observe the behavior of the bulb it might cause incorrect test results if automated tests are interrupted view the test summary after the test it returns a failed test that you are going to resolve in the next step resolve test failures smartthings multipurpose sensor the test logs contain basic information about the test results and specific test cases, providing technical context to users for efficient troubleshooting download the test logs by navigating to the bottom page of the test summary > show full test details > download log to understand the test logs, its structure follows this schema {execution timestamp} device node path node type [node state] {execution message} in the downloaded test log, two test cases failed with the following error [failed] initialize states following states were not set correctly [contact any other state than "open" on main contactsensor] [failed] send command and validate some events didn't happen [contact "closed" on main contactsensor] some states aren't final [contact "closed" on main contactsensor] in the first error log, it appears that the test suite cannot change the device's state to anything other than an open state in the second error log, the test suite tries to change its state to closed, but to no avail it is confirmed in the capability definition that the contact sensor has only two states open and closed therefore, the device is constantly in an open state and unable to change to a closed state with these information, you can start troubleshooting by going to drivers > codelab-zigbee-contact > multi-sensor > init lua and look for incorrect code implementation with these keywords open, closed, contactsensor it can be seen in the zone_status_change_handler and zone_status_handler functions that there are code blocks on comment this might be a result of someone developing this code have changed this part of code for debugging and forgot to uncomment this part uncomment this code block from zone_status_change_handler function if not device preferences["certifiedpreferences garagesensor"] then contactsensor_defaults ias_zone_status_change_handler driver, device, zb_rx end uncomment this code block from zone_status_handler function if not device preferences["certifiedpreferences garagesensor"] then contactsensor_defaults ias_zone_status_attr_handler driver, device, zone_status, zb_rx end remove this line of code from zone_status_change_handler and zone_status_handler functions device emit_event_for_endpoint zb_rx address_header src_endpoint_value, capabilities contactsensor contact open save the file and update the driver by invoking the same cli commands that were also used during the configuration of custom edge drivers smartthings edge drivers package drivers/codelab-zigbee-contact smartthings edge channels assign smartthings edge drivers install again, go to smartthings test suite, select your device, click menu > prepare new test ensure that all compatible capabilities are selected, with the exception for battery again, start the test and perform indicated user actions for every test case if there are any now, all tests are passed! lightify tunable white 60 bulb the test logs contain basic information about the test results and specific test cases, providing technical context to users for efficient troubleshooting download the test logs by navigating to the bottom page of the test summary > show full test details > download log to understand the test logs, its structure follows this schema {execution timestamp} device node path node type [node state] {execution message} in the downloaded test log, one test case failed with the following error [failed] send command and validate some events didn't happen [colortemperature maximum 7500k on main colortemperature] some states aren't final [colortemperature maximum 7500k on main colortemperature] in the error log, it directs to an issue for setting an incorrect maximum colortemperature value the configuration on your edge driver is set to 7500k you can start to troubleshoot by looking for the bulb's color temperature rating either from the device packaging or the device manufacturer website with these information, you can start troubleshooting by going to drivers > codelab-zigbee-switch > profiles > rgbw-bulb yml and look for lines that declares the colortemperature value change the colortemperature range declaration range [ 2700, 6500 ] save the file and update the driver by invoking the same cli commands that were also used during the configuration of custom edge drivers smartthings edge drivers package drivers/codelab-zigbee-switch smartthings edge channels assign smartthings edge drivers install again, go to smartthings test suite, select your device, click menu > prepare new test under the compatible capabilities, select all capabilities again, start the test and perform indicated user actions for every test case if there are any now, all tests are passed! you're done! congratulations! you have successfully achieved the goal of this code lab now, you can test your edge driver for smartthings devices using smartthings test suite! if you're having trouble, you may download this file test suite complete code 184 6 kb to learn more about smartthings test suite, visit smartthings edge architecture smartthings developer console
Learn Code Lab
codelabimplement flex mode on an unreal engine game objective learn how to implement flex mode on an unreal engine game using android jetpack windowmanager and raw java native interface jni overview the flexible hinge and glass display on galaxy foldable devices, such as the galaxy z fold4 and galaxy z flip4, let the phone remains propped open while you use apps when the phone is partially folded, it will go into flex mode apps will reorient to fit the screen, letting you watch videos or play games without holding the phone for example, you can set the device on a flat surface, like on a table, and use the bottom half of the screen to navigate unfold the phone to use the apps in full screen mode, and partially fold it again to return to flex mode to provide users with a convenient and versatile foldable experience, developers need to optimize their apps to meet the flex mode standard set up your environment you will need the following epic games launcher with unreal engine 4 or later visual studio or any source code editor samsung galaxy foldable device galaxy z fold2, z fold3, or newer galaxy z flip, z flip3, or newer remote test lab if physical device is not available requirements samsung account java runtime environment jre 7 or later with java web start internet environment where port 2600 is available create and set up your project after launching unreal engine from the epic games launcher, follow the steps below to start your project in the select or create new project window, choose games as a new project category and click next select third person as template, then click next to proceed noteyou can implement flex mode on any template or existing projects and use this code lab activity as a reference in the project settings window, set the following type of project c++ target platform mobile / tablet performance characteristics scalable 3d or 2d real-time raytracing raytracing disabled include an additional content pack no starter content project name tutorial_project click create project wait for the engine to finish loading and open the unreal editor once the project is loaded, go to edit > project settings > platforms > android click the configure now button if the project is not yet configured for the android platform then, proceed with the following apk packaging and build settings a apk packaging set target sdk version to 30 set orientation to full sensor change the maximum supported aspect ratio to 2 8 aspect ratio of galaxy z fold3 in decimal to prevent black bars from appearing on the cover display leave it if your game does not need to use the cover display enable use display cutout region?, to prevents black bars at the edge of the main screen otherwise, leave it unchecked b build disable support opengl es3 1 and enable support vulkan notecurrently, there is a problem with opengl es and the split-screen system being investigated the only option right now is to turn off opengl es and use vulkan instead enable native resize event the resize event of a game when switching between displays is disabled in the engine by default however, this behavior can be easily enabled by setting android enablenativeresizeevent=1 in the deviceprofile currently, the only way to create a profile for foldable devices is by creating a specific rule for each device to save time in this code lab, enable the native resize event for all android devices instead locate and open the tutorial_project > config folder in file explorer inside the config folder, create a new folder named android create a new file called androiddeviceprofiles ini and open this file in a text editor, such as visual studio copy below deviceprofile code to the newly created androiddeviceprofiles ini file [deviceprofiles] +deviceprofilenameandtypes=android,android [android deviceprofile] devicetype=android baseprofilename= +cvars=r mobilecontentscalefactor=1 0 +cvars=slate absoluteindices=1 +cvars=r vulkan delayacquirebackbuffer=2 +cvars=r vulkan robustbufferaccess=1 +cvars=r vulkan descriptorsetlayoutmode=2 ; don't enable vulkan by default specific device profiles can set this cvar to 0 to enable vulkan +cvars=r android disablevulkansupport=1 +cvars=r android disablevulkansm5support=1 ; pf_b8g8r8a8 +cvars=r defaultbackbufferpixelformat=0 +cvars=android enablenativeresizeevent=1 ; previewallowlistcvars and previewdenylistcvars are arrays of cvars that are included or excluded from being applied in mobile preview ; if any previewallowlistcvars is set, cvars are denied by default previewallowlistcvars=none this is a copy of the default android deviceprofile from the existing basedeviceprofiles ini file but with the enabled nativeresizeevent console variable cvars notethis step is not required when you only want to implement flex mode yet, it's recommended, to allow applications to run seamlessly from main to cover display without stretching and squashing the game, by enabling the nativeresizeevent create a new plugin and import the foldablehelper foldablehelper is a java file that you can use in different projects it provides an interface to the android jetpack windowmanager library, enabling application developers to support new device form factors and multi-window environments before proceeding, read how to use jetpack windowmanager in android game dev and learn the details of how foldablehelper uses windowmanager library to retrieve information about the folded state of the device flat for normal mode and half-opened for flex mode , window size, and orientation of the fold on the screen download the foldablehelper java file here foldablehelper java 5 64 kb to import the foldablehelper java file to the project, follow the steps below go to edit > plugins in the unreal editor click the new plugin button and select blank to create a blank plugin in the name field, type foldables_tutorial and click the create plugin button in file explorer, locate and open tutorial_project > plugins folder go to plugins > foldables_tutorial > source> foldables_tutorial > private and create a new folder called java copy the foldablehelper java file into java folder open the tutorial_project sln file in visual studio in the same private folder path, add a new filter called java right-click on the java filter and click add > existing item locate the foldablehelper java file, then click add to include this java file in the build modify java activity to use foldablehelper unreal plugin language upl is a simple xml-based language created by epic games for manipulating xml and returning strings using upl, you can utilize the foldablehelper java file by modifying the java activity and related gradle files as follows in visual studio, right-click on source > foldables_tutorial folder, then click add > new item > web > xml file xml create an xml file called foldables_tutorial_upl xml ensure that the file location is correct before clicking add in the newly created xml file, include the foldablehelper java file in the build by copying the java folder to the build directory <root xmlns android="http //schemas android com/apk/res/android"> <prebuildcopies> <copydir src="$s plugindir /private/java" dst="$s builddir /src/com/samsung/android/gamedev/foldable" /> </prebuildcopies> set up the gradle dependencies in the build gradle file by adding the following in the xml file <buildgradleadditions> <insert> dependencies { implementation filetree dir 'libs', include ['* jar'] implementation "org jetbrains kotlin kotlin-stdlib-jdk8 1 6 0" implementation "androidx core core 1 7 0" implementation "androidx core core-ktx 1 7 0" implementation "androidx appcompat appcompat 1 4 0" implementation "androidx window window 1 0 0" implementation "androidx window window-java 1 0 0" } android{ compileoptions{ sourcecompatibility javaversion version_1_8 targetcompatibility javaversion version_1_8 } } </insert> </buildgradleadditions> next, modify the gameactivity <gameactivityimportadditions> <insert> <!-- package name of foldablehelper --> import com samsung android gamedev foldable foldablehelper; </insert> </gameactivityimportadditions> <gameactivityoncreateadditions> <insert> foldablehelper init this ; </insert> </gameactivityoncreateadditions> <gameactivityonstartadditions> <insert> foldablehelper start this ; </insert> </gameactivityonstartadditions> <gameactivityonstopadditions> <insert> foldablehelper stop ; </insert> </gameactivityonstopadditions> </root> gameactivityimportadditions adds the com samsung android gamedev foldable foldablehelper into the gameactivity with the existing imports gameactivityoncreateadditions adds the code to the oncreate method inside the gameactivity gameactivityonstartadditions adds the code to the onstart method inside the gameactivity gameactivityonstopadditions adds the code to the onstop method inside the gameactivity save the xml file then, ensure that the engine uses the upl file by modifying the foldables_tutorial build cs script, located in the same folder as the foldables_tutorial_upl xml file after the dynamicallyloadedmodulenames addrange call, add the following if target platform == unrealtargetplatform android { additionalpropertiesforreceipt add "androidplugin", moduledirectory + "\\foldables_tutorial_upl xml" ; } this means that the game engine will use the upl file if the platform is android otherwise, the foldablehelper won’t work implement a storage struct the next thing to implement is a struct, the native version of java’s foldablelayoutinfo class to store the data retrieved from the java code using a struct, do the following in content browser of unreal editor, right-click on c++ classes > add/import content then, click new c++ class select none for the parent class and click next name the new class as foldablelayoutinfo assign it to the foldables_tutorial plugin then, click create class delete the created foldablelayoutinfo cpp file and only keep its header file in the header file called foldablelayoutinfo h, set up a struct to store all needed data from the windowmanager #pragma once #include "core h" enum efoldstate { undefined_state, flat, half_opened }; enum efoldorientation { undefined_orientation, horizontal, vertical }; enum efoldocclusiontype { undefined_occlusion, none, full }; struct ffoldablelayoutinfo { efoldstate state; efoldorientation orientation; efoldocclusiontype occlusiontype; fvector4 foldbounds; fvector4 currentmetrics; fvector4 maxmetrics; bool isseparating; ffoldablelayoutinfo state efoldstate undefined_state , orientation efoldorientation undefined_orientation , occlusiontype efoldocclusiontype undefined_occlusion , foldbounds -1, -1, -1, -1 , currentmetrics -1, -1, -1, -1 , maxmetrics -1, -1, -1, -1 , isseparating false { } }; implement jni code to implement jni, create a new c++ class with no parent and name it foldables_helper assign the class to the same plugin, then modify the c++ header and source files as follows in the created header file foldables_helper h , include foldablelayoutinfo h #include "foldablelayoutinfo h" then, declare a multicast_delegate to serve as a listener for passing the data from the java implementation to the rest of the engine declare_multicast_delegate_oneparam fonlayoutchangeddelegate, ffoldablelayoutinfo ; lastly, set up the methods and member variables class foldables_tutorial_api ffoldables_helper { public static void init ; static bool haslistener; static fonlayoutchangeddelegate onlayoutchanged; }; moving to the source file foldables_helper cpp , set up the definitions for the methods and member variables created in the header file bool ffoldables_helper haslistener = false; fonlayoutchangeddelegate ffoldables_helper onlayoutchanged; void ffoldables_helper init { haslistener = true; } now, in the same source file, create the native version of the onlayoutchanged function created in the foldablehelper java file since the java onlayoutchanged function only works on android, surround the function with an #if directive to ensure that it compiles only on android #if platform_android #endif within this directive, copy the code below to use the jni definition of the java onlayoutchanged function extern "c" jniexport void jnicall java_com_samsung_android_gamedev_foldable_foldablehelper_onlayoutchanged jnienv * env, jclass clazz, jobject jfoldablelayoutinfo { create the ffoldablelayoutinfo to store the data retrieved from java ffoldablelayoutinfo result; retrieve the field ids of the foldablelayoutinfo and rect objects created in the java file //java foldablelayoutinfo field ids jclass jfoldablelayoutinfocls = env->getobjectclass jfoldablelayoutinfo ; jfieldid currentmetricsid = env->getfieldid jfoldablelayoutinfocls, "currentmetrics", "landroid/graphics/rect;" ; jfieldid maxmetricsid = env->getfieldid jfoldablelayoutinfocls, "maxmetrics", "landroid/graphics/rect;" ; jfieldid hingeorientationid = env->getfieldid jfoldablelayoutinfocls, "hingeorientation", "i" ; jfieldid stateid = env->getfieldid jfoldablelayoutinfocls, "state", "i" ; jfieldid occlusiontypeid = env->getfieldid jfoldablelayoutinfocls, "occlusiontype", "i" ; jfieldid isseparatingid = env->getfieldid jfoldablelayoutinfocls, "isseparating", "z" ; jfieldid boundsid = env->getfieldid jfoldablelayoutinfocls, "bounds", "landroid/graphics/rect;" ; jobject currentmetricsrect = env->getobjectfield jfoldablelayoutinfo, currentmetricsid ; //java rect object field ids jclass rectcls = env->getobjectclass currentmetricsrect ; jfieldid leftid = env->getfieldid rectcls, "left", "i" ; jfieldid topid = env->getfieldid rectcls, "top", "i" ; jfieldid rightid = env->getfieldid rectcls, "right", "i" ; jfieldid bottomid = env->getfieldid rectcls, "bottom", "i" ; retrieve the current windowmetrics and store it in the ffoldablelayoutinfo as an fintvector4 // currentmetrics int left = env->getintfield currentmetricsrect, leftid ; int top = env->getintfield currentmetricsrect, topid ; int right = env->getintfield currentmetricsrect, rightid ; int bottom = env->getintfield currentmetricsrect, bottomid ; // store currentmetrics rect to fvector4 result currentmetrics = fintvector4{ left, top, right, bottom }; do the same for the other variables in the java foldablelayoutinfo // maxmetrics jobject maxmetricsrect = env->getobjectfield jfoldablelayoutinfo, maxmetricsid ; left = env->getintfield maxmetricsrect, leftid ; top = env->getintfield maxmetricsrect, topid ; right = env->getintfield maxmetricsrect, rightid ; bottom = env->getintfield maxmetricsrect, bottomid ; //store maxmetrics rect to fvector4 result maxmetrics = fintvector4{ left, top, right, bottom }; int hingeorientation = env->getintfield jfoldablelayoutinfo, hingeorientationid ; int state = env->getintfield jfoldablelayoutinfo, stateid ; int occlusiontype = env->getintfield jfoldablelayoutinfo, occlusiontypeid ; bool isseparating = env->getbooleanfield jfoldablelayoutinfo, isseparatingid ; // store the values to an object for unreal result orientation = tenumasbyte<efoldorientation> hingeorientation + 1 ; result state = tenumasbyte<efoldstate> state + 1 ; result occlusiontype = tenumasbyte<efoldocclusiontype> occlusiontype + 1 ; result isseparating = isseparating; // boundsrect jobject boundsrect = env->getobjectfield jfoldablelayoutinfo, boundsid ; left = env->getintfield boundsrect, leftid ; top = env->getintfield boundsrect, topid ; right = env->getintfield boundsrect, rightid ; bottom = env->getintfield boundsrect, bottomid ; // store maxmetrics rect to fvector4 result foldbounds = fintvector4{ left, top, right, bottom }; broadcast the result via the onlayoutchanged delegate for use in the engine if ffoldables_helper haslistener { ue_log logtemp, warning, text "broadcast" ; ffoldables_helper onlayoutchanged broadcast result ; } } create a player controller and two ui states this section focuses on adding a player controller and creating two user interface ui states for flat and flex modes these objects are needed for the flex mode logic implementation following are the steps to add a player controller and create two ui states add a new player controller blueprint in content browser, go to content > thirdpersoncpp and right-click on blueprints > add/import content > blueprint class pick player controller as its parent class rename it as flexplayercontroller notethe flexplayercontroller added is generic and can be replaced by your custom player controller in an actual project add a new c++ class with actor component as its parent class name it as foldables_manager and assign it to the foldables_tutorial plugin click the create class button open the flexplayercontroller blueprint by double-clicking it click open full blueprint editor attach the actor component to the flexplayercontroller in the left pane, click add component, then find and select the foldables_manager next, create a pair of userwidget classes for the ui layouts needed flat mode ui for the full screen or normal mode; and flex mode ui for split-screen in add c++ class window, select the show all classes checkbox find and pick userwidget as the parent class then, click next name the new user widget as flatui and attach it to the plugin click next repeat the process but name the new user widget as flexui you might get an error when trying to compile stating that the userwidget is an undeclared symbol to fix this, open the foldables_tutorial build cs file, and in the publicdependencymodulenames addrange call, add "inputcore" and "umg" to the list create a pair of blueprints made from subclasses of these two user widgets right-click on content and create a new folder called foldui inside the newly created folder, right-click to add a new blueprint class in all classes, choose flatui and click the select button rename the blueprint as bp_flatui in the same folder, repeat the process but choose the flexui class and rename the blueprint as bp_flexui double-click on bp_flatui and bp_flexui, then design your two uis like below to visualize switching between flat and flex mode flat ui flex ui notethis code lab activity does not cover the steps on how to create or design ui if you want to learn about how to create your own game design in unreal engine 4, refer to unreal motion graphics ui designer guide implement the flex mode logic after creating the flexplayercontroller and the two ui states bp_flatui and bp_flexui , you can now implement flex mode logic in the foldables_manager open the foldables_manager h and include the necessary c++ header files #pragma once #include "coreminimal h" #include "components/actorcomponent h" #include "engine h" #include "flatui h" #include "flexui h" #include "foldables_helper h" #include "foldables_manager generated h" remove the line below to save a little bit of performance as this component doesn't need to tick public // called every frame virtual void tickcomponent float deltatime, eleveltick ticktype, factorcomponenttickfunction* thistickfunction override; set up the functions needed in foldables_manager the constructor, a function to create the ui widgets the implementation of onlayoutchanged delegate public // sets default values for this component's properties ufoldables_manager ; void createwidgets ; protected // called when the game starts virtual void beginplay override; protected void onlayoutchanged ffoldablelayoutinfo foldablelayoutinfo ; then, set up the variables needed references to the flat and flex ui classes references to the flat and flex ui objects mark the pointers as uproperty to ensure that garbage collection does not delete the objects they point to tsubclassof<uuserwidget> flatuiclass; tsubclassof<uuserwidget> flexuiclass; uproperty class uflatui* flatui; uproperty class uflexui* flexui; finally, define a new private function restoreflatmode , to disable flex mode and return to normal mode private void restoreflatmode ; moving over to foldables_manager cpp, implement the constructor using the constructorhelpers, find the ui classes and set the variables to store these classes also, set the bcanevertick to false to prevent the component from ticking and remove the code block of tickcomponent function // sets default values for this component's properties ufoldables_manager ufoldables_manager { primarycomponenttick bcanevertick = false; static constructorhelpers fclassfinder<uflatui> flatuibpclass text "/game/foldui/bp_flatui" ; static constructorhelpers fclassfinder<uflexui> flexuibpclass text "/game/foldui/bp_flexui" ; if flatuibpclass succeeded { flatuiclass = flatuibpclass class; } if flexuibpclass succeeded { flexuiclass = flexuibpclass class; } } next, set up the beginplay function to link the delegate to the onlayoutchanged function, to initialize the foldables_helper, and to create the widgets ready for use in the first frame // called when the game starts void ufoldables_manager beginplay { super beginplay ; ffoldables_helper onlayoutchanged adduobject this, &ufoldables_manager onlayoutchanged ; ffoldables_helper init ; createwidgets ; } set up the createwidgets function to create the widgets using the ui classes acquired in the constructor add the flatui widget to the viewport, assuming the app opens in normal mode until it receives the foldablelayoutinfo void ufoldables_manager createwidgets { flatui = createwidget<uflatui> aplayercontroller* getowner , flatuiclass, fname text "flatui" ; flexui = createwidget<uflexui> aplayercontroller* getowner , flexuiclass, fname text "flexui" ; flatui->addtoviewport ; } afterward, create the onlayoutchanged function, which will be called via a delegate inside this function, check whether the device’s folded state is half_opened if so, check whether the orientation of the fold is horizontal void ufoldables_manager onlayoutchanged ffoldablelayoutinfo foldablelayoutinfo { //if state is now flex if foldablelayoutinfo state == efoldstate half_opened { if foldablelayoutinfo orientation == efoldorientation horizontal { notefor this third person template, splitting the screen vertically isn’t ideal from a user experience ux point of view for this code lab activity, split the screen only on the horizontal fold top and bottom screen if you want it vertically, you need to use the same principle in the next step but for the x-axis instead of the y-axis you must also ensure that you have a flex ui object for the vertical layout if the device is both on flex mode and horizontal fold, change the viewport to only render on the top screen using the normalized position of the folding feature then in an asynctask on the game thread, disable the flatui and enable the flexui however, if the device is on normal mode, then return to flat ui using restoreflatmode function //horizontal split float foldratio = float foldablelayoutinfo foldbounds y / foldablelayoutinfo currentmetrics w - foldablelayoutinfo currentmetrics y ; gengine->gameviewport->splitscreeninfo[0] playerdata[0] sizex = 1 0f; gengine->gameviewport->splitscreeninfo[0] playerdata[0] sizey = foldratio; asynctask enamedthreads gamethread, [=] { if flatui->isinviewport { flatui->removefromparent ; } if !flexui->isinviewport { flexui->addtoviewport 0 ; } } ; } else { restoreflatmode ; } } else { restoreflatmode ; } } reverse the flex mode implementation logic to create the restoreflatmode function by setting the viewport to fill the screen, then disable the flexui and enable the flatui void ufoldables_manager restoreflatmode { gengine->gameviewport->splitscreeninfo[0] playerdata[0] sizex = 1 0f; gengine->gameviewport->splitscreeninfo[0] playerdata[0] sizey = 1 0f; asynctask enamedthreads gamethread, [=] { if !flatui->isinviewport { flatui->addtoviewport 0 ; } if flexui->isinviewport { flexui->removefromparent ; } } ; } set up a game mode and attach the flexplayercontroller the game mode defines the game rules, scoring, and any game-specific behavior set up the game mode in unreal editor by creating a blueprint class in the content > thirdpersoncpp > blueprints folder pick game mode base as the parent class and rename it as flexgamemode double-click on flexgamemode in the drop-down menu next to player controller class, choose the flexplayercontroller lastly, go to edit > project settings > project > maps & modes and select flexgamemode as the default gamemode build and run the app go to edit > package project > android to build the apk ensure that the android development environment for unreal is already set up to your computer noteif the build failed due to corrupted build tools, consider downgrading the version to 30 or lower using the sdk manager or, simply rename d8 bat to the name of the missing file dx bat in sdk path > build-tools > version number directory and, in lib folder of the same directory, rename d8 jar to dx jar after packaging your android project, run the game app on a foldable galaxy device and see how the ui switches from normal to flex mode if you don’t have any physical device, you can also test it on a remote test lab device tipwatch this tutorial video and know how to easily test your app via remote test lab you're done! congratulations! you have successfully achieved the goal of this code lab now, you can implement flex mode in your unreal engine game app by yourself! if you're having trouble, you may download this file flex mode on unreal complete code 20 16 mb to learn more, visit www developer samsung com/galaxy-z www developer samsung com/galaxy-gamedev
Learn Code Lab
codelabadd samsung in-app purchase service to your app objective learn how to integrate samsung in-app purchase iap service into your app so that users can purchase digital consumable and non-consumable items within the app registered in the galaxy store overview the samsung in-app purchase iap service offers developers a robust solution for handling digital purchases within mobile apps it ensures a smooth and secure experience when purchasing digital goods or items, managing subscriptions, or dealing with refunds and consumed items the iap sdk makes integrating the iap functionality into your app simple, allowing you to configure iap settings, retrieve item details, offer and sell items, and manage purchased items effortlessly to successfully sell in-app items, follow these four basic steps download and integrate the samsung iap sdk into your application request for commercial seller status in the samsung galaxy store seller portal upload your application’s binary file in the seller portal add in-app items to your app in-app items can be categorized into three types consumable, non-consumable, and subscription consumable these items can be used only once and can be repurchased multiple times by the app user non-consumable non-consumable items can be used any number of times and cannot be repurchased subscription with subscription items, app users can access them any number of times throughout the duration of their subscription for more information, go to samsung iap set up your environment you will need the following android studio latest version recommended samsung iap sdk latest version samsung galaxy device android 6 0 or higher samsung galaxy store seller portal commercial seller account sample code here is a sample code for you to start coding in this code lab download it and start your learning experience! in-app purchase turbobike sample code 1 3 mb start your project in android studio, click open to open an existing project locate the downloaded android project turbobike_blank_code from the directory and click ok register the app and its items in the seller portal to register the sample app along with the in-app items in the samsung galaxy store seller portal, follow these steps sign in using your commercial seller account in android studio, modify the package name of the sample app navigate to app > kotlin + java > com example turbobike view, and in the mainactivity java file, refactor the application name turbobike from the package name com example turbobike for all directories notethe package name com example turbobike is already registered in the seller portal to avoid any conflicts, rename it with a different package name build the apk from android studio and upload the binary to the seller portal once the testing process is complete and the app functions smoothly as intended, return to this step and upload the final apk file under the in app purchase tab, add three items named bike, booster, and fuel these are item ids of the in-app items created in the sample app where the bike is a non-consumable item, while both booster and fuel are consumable items when adding the bike item, uncheck this item can be purchased multiple times checkbox refer to the step-by-step guide for detailed instructions lastly, add a licensed tester to enable purchasing within the app edit your seller portal profile and include your samsung account in the license test field on the test device, sign in with the same samsung account initialize the samsung iap sdk before using the samsung iap sdk library, certain configurations are necessary, which are already applied in the sample code provided the samsung-iap-6 3 0 aar library is added to the app > libs folder, and included as a dependency in the module-level build gradle file dependencies { … implementation filetree dir 'libs', include ['* aar'] } these necessary permissions are already added in the androidmanifest xml file com samsung android iap permission billing to connect to iap and enable in-app item registration in seller portal android permission internet because iap uses the internet <uses-permission android name="com samsung android iap permission billing" /> <uses-permission android name="android permission internet" /> go to mainactivity java and in the oncreate function, create an instance of the samsung iap sdk to utilize the functionalities it offers set the operating mode to operation_mode_test to purchase items without payment and enable only licensed testers to test without incurring charges iaphelper = iaphelper getinstance getapplicationcontext ; iaphelper setoperationmode helperdefine operationmode operation_mode_test ; notebefore submitting the app for beta testing or release, change the operating mode to operation_mode_production get the list of all items owned by the user the getownedlist function returns a list of items that the user has previously purchased, including consumable items that have not been reported as consumed non-consumable items subscription items that are in free trial and active state call the getownedlist function from the iaphelper class also, check if there are any consumable items in the returned list and call the handleconsumableitems function with the purchase id of each consumable item iaphelper getownedlist iaphelper product_type_all, new ongetownedlistlistener { @override public void ongetownedproducts @nonnull errorvo errorvo, @nonnull arraylist<ownedproductvo> arraylist { if errorvo geterrorcode == iaphelper iap_error_none { for ownedproductvo item arraylist { if item getisconsumable { // consume the purchased item handleconsumableitems item getpurchaseid ; } } } else { log d "getownedproducts failed ", errorvo tostring ; } } } ; notecall getownedlist whenever launching the application to check for unconsumed items or subscription availability report consumable items as consumed mark the consumable items returned from getownedlist and those successfully purchased with startpayment as consumed by calling the consumepurchaseditems function iaphelper consumepurchaseditems itemid, new onconsumepurchaseditemslistener { @override public void onconsumepurchaseditems @nonnull errorvo errorvo, @nonnull arraylist<consumevo> arraylist { if errorvo geterrorcode == iaphelper iap_error_none { toast maketext getapplicationcontext ,"consumed successfully now you can purchase another item ", toast length_short show ; } else { toast maketext getapplicationcontext , "consume failed " + errorvo geterrorstring , toast length_short show ; } } } ; this makes the items available for repurchase, regardless of whether they are used or not in the sample app, consumable items cannot be used and it only stores the total count of the items purchased get item details to retrieve information about some or all in-app items registered to the app, use the getproductsdetails function by specifying an item id such as bike or booster, you can fetch details for a particular in-app item to obtain information about all in-app items available in the seller portal for the user, pass an empty string "" as the argument iaphelper getproductsdetails "bike, booster, fuel", new ongetproductsdetailslistener { @override public void ongetproducts @nonnull errorvo errorvo, @nonnull arraylist<productvo> arraylist { if errorvo geterrorcode == iaphelper iap_error_none { for productvo item arraylist { if item getitemid equals itemid { // set product details value to ui product settext "product name " + item getitemname ; price settext "product price " + item getitempricestring ; currency settext "currency " + item getcurrencycode ; // click continue button to purchase dialogbutton setonclicklistener dialogbtnlistener ; } } } else { toast maketext getapplicationcontext , "getproductdetails failed " + errorvo geterrorstring , toast length_short show ; } } } ; handle item purchase and payment process to initiate a purchase and complete the payment transaction process, use the startpayment function the result of the purchase is specified in the onpaymentlistener interface, which includes the detailed purchase information purchasevo in case of a successful transaction if there's an error during the payment process, an error code -1003 indicates that the non-consumable item is already purchased for further information on error responses, refer to the documentation on response codes iaphelper startpayment itemid, string valueof 1 , new onpaymentlistener { @override public void onpayment @nonnull errorvo errorvo, @nullable purchasevo purchasevo { if errorvo geterrorcode == iaphelper iap_error_none { log d "purchaseid " , purchasevo getpurchaseid ; // non-consumable item, can purchase single time if itemid equals "bike" { purchasebikebtn settext "already purchased" ; } // consumable item, can purchase multiple time else if itemid equals "booster" { handleconsumableitems purchasevo getpurchaseid ; // update booster count in ui boostercount+=1; boostercountertv settext "⚡ "+boostercount+" ev" ; }else if itemid equals "fuel" { handleconsumableitems purchasevo getpurchaseid ; // update fuel count in ui fuelcount+=1; fuelcountertv settext "⛽ "+ fuelcount+" ltr" ; } }else { // non-consumable item, already purchase if errorvo geterrorcode == -1003 { purchasebikebtn settext "already purchased" ; } } } } ; upon successfully purchasing a consumable item, the consumepurchaseditems function is called through the handleconsumableitems function the total number of purchased boosters and fuel is displayed on the app ui using the boostercountertv settext and fuelcountertv settext methods respectively run the app after building the apk, install the app on a samsung galaxy device test the app by making purchases the turbo bike can only be bought once, while either the booster or fuel can be purchased multiple times after purchasing in-app items, the app shows that the bike has already been purchased along with the number of boosters and fuel bought you're done congratulations! you have successfully achieved the goal of this code lab now, you can integrate samsung iap sdk into your application by yourself! if you are having trouble, you may download this file in-app purchase turbobike complete code 1 3 mb to learn more about developing apps with samsung iap sdk, visit developer samsung com/iap
Learn Code Lab
codelabcreate a watch face using tag expressions objective learn how to create a watch face that responds based on the date, time, step count, heart rate, and battery level using tag expressions in watch face studio in this code lab, you will create a basic watch face with complications such as step count, heart rate, and battery level later, you will improve its functionalities and make it visually dynamic using tag expressions overview watch face studio is a graphic authoring tool that enables you to create watch faces for wear os it offers a simple and intuitive way to add images and components, and to configure the watch movement without any coding watch face studio supports watch faces for the galaxy watch4 or newer version, and other watch devices that run on the same platform tag expressions are conditions in watch face studio that allows you to customize watch face through dynamic configuration of its movement and data set up your environment you will need the following watch face studio galaxy watch4 or newer any supported wear os watch start your project create a new project and input project name a blank studio will show upon clicking ok add analog hands and index watch face studio allows you to add components like text, image, shape, analog hands, and index in a watch face for your watch to have the look and feel of an analog watch, add the following components time > index time > analog hands > minute time > analog hands > hour notethe index and watch hand images used in this code lab are no longer included in the latest version of the watch face studio however, you can choose a design for the index and watch hands from available images in the resources folder you can also create and add your own design you will see that the hands move automatically and in sync with the device time select all the newly added components and click group rename the group as group_analogtime use a progress bar for seconds a component like a progress bar can be used to show how much of the process is completed and how much is left in this step, you will use it to show how far or close the next minute is to use a progress bar as seconds click add component and select progress bar rename the component to seconds move seconds behind group_analogtime in properties of seconds, do the following a adjust the dimension width and height to 395 b align the component to the center c drag the background slider to 0% d make sure that the type is a circular progress bar; otherwise change it e in range setting, change value to 0 and click tags beside it to open the tags window f type in [sec] it means that the value from 0 will increment as the value of the second increases g set max value to 59 since it is the maximum value of [sec] notein this scenario, the progress bar disappears in the canvas as the preview only uses the base value, which is 0 however, the component is still present in run format and position a digital clock in this step, you will learn how grouping works and affects its components you will also learn how to format the date and time using tags to format and position a digital clock, you need to add a digital clock > time twice rename them as hour and minute, respectively add a digital clock > date and rename the component as date put them in one group and rename it as group_digitaltime go to the properties of hour and change the text appearance to 80 do the same for minute adjust the text size of date to 15 adjust the y placements of the individual components to look like the image below when you change a certain component, it won’t affect other components in the group format hour to only show the time in hour a go to its properties and click the tags button in text field b replace text field value with [hour_0_23_z] to show the current hour with leading zero do the same for minute but replace the text field value with [min_z] to show the current minute in an hour with leading zero go to group_digitaltime placement properties and align it horizontally after that, place it to the left you will see the components adjusted as a group utilize health features and battery level watch face studio also allows you to utilize data like step count, heart rate, and battery level follow the steps below to show these real-time data using tags on texts or progress bar battery level add a circular progress bar and rename the component as battery level drag the background slider to 0% go to value properties replace the value with 0 and, in tags, input or choose [batt_per] to use the current battery percentage as the value add a circle complication slot and rename it as battery icon complications are a set of components that can be handled as one group set the type to fixed and change the default provider to watch battery select short text as complication type and choose icon + text for layout select and move battery level and battery icon together to the bottom right heart rate add a circular progress bar and rename the component as heart rate drag the background slider to 0% go to value properties replace the value with 0 and, in tags, input or choose [hr] to use heart rate as value set the max value to 240 since it's the maximum heart rate a person can have add a text component and rename it as heart rate label in the text field, input heart rate and change the text size to 12 change the y placement to 195 add another text component and rename it as heart rate text in the text field, input [hr] and change the text size to 30 group heart rate, heart rate label, and heart rate text together rename the group as group_heartrate move the group_heartrate placement to the center right step count add a circular progress bar and rename the component as step count drag the background slider to 0% go to value properties replace the value with 0 and, in tags, input or choose [sc_per] to use the current percentage to the goal of step count add a circle complication slot and rename it as step count text set the type to fixed and change the default provider to step count select short text as complication type and choose text + title for layout it will now show "steps" as title and step count as text place the step count text in the center horizontally select and move step count and step count text together to the top right select group_digitaltime, group_batterylevel, group_heartrate, group_stepcount, battery icon, and step count text drag them behind group_analoghands and seconds by doing this, the analog hands would overlap the components make use of tag expressions you already have three progress bars that show data of battery level, heart rate, and step count this time, you will make these features more functional by changing the progress bars' color to red using tag expressions tag expressions are conditions that allow you to change the rotation, placement, behavior, and opacity of a component based on tag values it can alter your watch face's appearance dynamically as the tag value changes tag expressions support different types of operators – arithmetic, relational, logical, and ternary for this step, you will apply tag expressions on the color opacity but first, you will have to duplicate all the circular progress bars seconds, battery level, heart rate, and step count move all the duplicates to a new group called group_colorchange make sure that group_colorchange is behind all other groups change individual component’s color to #ffffff or white duplicate this group and rename it as group_background move it behind group_colorchange drag the background slider to 16% and remove tags in the value properties of each component of group_background change group_colorchange color to #ff001e or red group_colorchange will be used as components underneath when you set the opacity of the main components to 0 using tag expressions group_background will serve as gap fillers of each progress bar below are conditions that will trigger the opacity of the main components to become 0 and reveal the duplicated red components change the color of the battery level to red if the battery level is equal to or less than 20% go to group_batterylevel and select battery level navigate to color properties check if the color opacity value is 100 this will serve as the base value in tags, input [batt_per]<=20?-100 0 to subtract 100 from the base value of opacity if the battery level is equal to or less than 20 otherwise, the base opacity value remains the same in the run pane, adjust the device > watch battery to 20% or less, and you will see how the color will change to red change the color of step count to red if the goal hasn't been reached yet and the time is already 18 00 6 00 pm or beyond go to group_stepcount and select step count navigate to color properties check if the color opacity value is 100 this will serve as the base value in tags, input [sc]<[sc_goal] * [hour_0_23]>=18 ?-100 0 to subtract 100 from the base value of opacity if the step count is less than the goal, and if the value of hour in a day is 18 or beyond otherwise, the base opacity value remains the same play with the time control bar in the run pane and health > steps data to see how the color will change from blue to red change the color of the heart rate and seconds to red if the heart rate is below or above the normal go to group_heartrate and select heart rate navigate to color properties check if the color opacity value is 100 this will serve as the base value in tags, input [hr]<60 + [hr]>100 ?-100 0 to subtract 100 from the base value of opacity if the heart rate is below or above the normal 60-100 otherwise, it remains the same do the same for seconds test it in the run pane by adjusting the health > heart rate to below 60 or above 100, and you will see how the color will change to red prolong the battery life now that you already know what group and tag expressions are, it's about time for you to use both to your advantage it is observed that the darker a watch face design is, the longer the battery life can be to help the watch stay powered even when there’s a little battery left, you will need to decrease the opacity of the watch face when the battery level is equal to or less than 10% to do this, you have to select and combine all created groups and components, except for group analogtime, battery icon, and step count text, to a new group called group_watchface go to group_watchface color properties and change the base opacity value to 20 in tags, input [batt_per]<=10?0 80 to add 0 to the base value of opacity if the battery level is equal to or less than 10 otherwise, it adds 80 to the base value, making the watch face 100% visible adjust the device > watch battery to 10% or less, and you will see how most components' opacity decreased choose components for always-on always-on display is a feature that allows your galaxy watch to show the time without checking on it by pressing a button or lifting your hand in watch face studio, you can choose which group or component to display on the always-on by following these steps go to the always-on tab, to see the same set of components you added and grouped click the eye icon next to the group name to hide or make it visible hide group_watchface, battery icon, and step count text at this point, your always-on display will display a basic analog watch face whenever your watch is in idle mode test the watch face to test your watch face, you need to connect a watch device to the same network as your computer in watch face studio, select project > run on device select the connected watch device you want to test with if your device is not detected automatically, click scan devices to detect your device or enter its ip address manually by clicking the + button you're done! congratulations! you have successfully achieved the goal of this code lab now, you can create and design a watch face using tag expressions by yourself! if you're having trouble, you may download this file tag expression complete project 272 71 kb to learn more about watch face studio, visit developer samsung com/watch-face-studio
Learn Code Lab
codelabdesign a watch face using mask and moon phase tags objective design a watch face that shows the eight phases of the moon using the mask feature and moon phase tags in watch face studio overview watch face studio is a graphical authoring tool that enables you to design watch faces for the wear os smartwatch ecosystem, including galaxy watch4 and newer versions it provides easy and simple features, such as masking and tag expression, for creating attractive and dynamic watch faces without coding masking is the technique of hiding or revealing parts of a layer based on the shape outline of the bottom layer you can use it to enhance visual impact, create special effects, or draw focus to specific areas of an image tag expressions are conditions in watch face studio that let you dynamically configure the movement and data of a watch face what is moon phase? the moon completes its orbit for approximately 28 days, undergoing a singular lunar cycle from new moon to new moon this lunar cycle is divided into eight distinct phases with 28 positions the visible appearance of the moon, as observed from earth, is referred to as its phase moon phase position days type of moon phase 0~0 5 new moon 0 5~0 65 evening crescent 7 first quarter 7 5~13 5 waxing gibbous 14 full moon 14 5~20 5 waning gibbous 21 last quarter 21 5~27 5 morning crescent 27 5~28 new moon set up your environment you will need the following watch face studio galaxy watch4 or newer smart watch running on wear os3 or higher sample project here is a sample project for this code lab download it and start your learning experience! moon phase sample project 1 41 mb start your project download the sample project file, and click open project in watch face studio locate the downloaded file, then click open show grid, coordinate axis and rulers to set the different positions of the moon accurately and easily, you can utilize the coordinate system of the watch face studio select the show grid, show coordinate axis, and show rulers options from the view menu it will display a grid on the canvas, the x and y axis, and rulers for precise measurement and placement of components the center placement of the entire watch face is 225,225 noteyou can change the grid's color from the preferences > view create two mask groups when you mask two or more images, the shape of the bottom-most layer determines the visible area of the mask group the layers above it appear only through the shape outline of the bottom layer for example, if you place a square image on the bottom layer and an image in the layer above it, the image appears only through the square outline of the bottom layer the sample project consists of two similar images of the moon moon_qgf and moon_nc and two different shapes as bottom layers moon_qgf_layer and moon_nc_layer using these components, create two mask groups to use for simulating eight major moon phases select moon_qgf and moon_qgf_layer images and click mask rename the mask group as moon_qgf_mask it will cover five moon phases the first quarter, waxing gibbous, full moon, waning gibbous, and last quarter do the same for moon_nc and moon_nc_layer to cover the remaining moon phases the new moon, evening crescent, and morning crescent rename the mask group as moon_nc_mask tipread use masks to get creative with watch faces to explore other possibilities of masking add tag expressions to simulate different moon phases watch face studio provides tags to determine the moon phase's type moon_ty and position moon_po the corresponding tag values per moon phase are listed in the table below moon phase [moon_ty] values [moon_po] values new moon 0 0~0 5 evening crescent 1 0 5~0 65 first quarter 2 7 waxing gibbous 3 7 5~13 5 full moon 4 14 waning gibbous 5 14 5~20 5 last quarter 6 21 morning crescent 7 21 5~27 5 new moon 0 27 5~28 using tag expressions, adjust the properties of each mask group and its bottom-most layer to dynamically show each moon phase in different placements you can lay out the moon phases as below gibbous, quarter, and full moon the moon_qgf_mask currently displays the full moon, and its placement coordinate is 195, 23 use the grid lines and rulers to determine the placement of the other four moon phases the first quarter, waxing gibbous, waning gibbous, and last quarter add tag expressions to the placement x and y and color properties of moon_qgf_mask placement - x coordinate move the mask group to the left of the full moon for the first quarter and waxing gibbous and to the right for the waning gibbous and last quarter replace each x with the distance in pixels between the x-placement of the full moon and the preferred x-placement of the other four moon phases [moon_ty] == 2 ? -x [moon_ty] == 3 ? -x [moon_ty] == 5 ? + x [moon_ty] == 6 ? + x 0 placement - y coordinate move the mask group down replace each y with the distance between the y-placement of the full moon and the preferred y-placement of the other four moon phases [moon_ty] == 2 ? + y [moon_ty] == 3 ? + y [moon_ty] == 5 ? + y [moon_ty] == 6 ? + y 0 color - opacity show moon_qgf_mask only if the mask group covers the current moon phase otherwise, hide it [moon_ty] ==2 + [moon_ty] ==3 + [moon_ty] ==4 + [moon_ty] ==5 + [moon_ty] ==6 ?0 -100 change the moon's appearance by adjusting the dimension and image placement of moon_qgf_layer using tag expressions placement - x coordinate move the image to the right of the moon image for the first quarter and waxing gibbous and to the right for the waning gibbous and last quarter replace each x with the length of the portion to hide if the moon image is 50px and the quarter moon shows only half of it, then the portion to hide is ~25px [moon_ty] == 2 ? +x [moon_ty] == 3 ? +x [moon_ty] == 5 ? -x [moon_ty] == 6 ? - x 0 placement - y coordinate move the image up for the first and last quarter [moon_ty] == 2 ? -y [moon_ty] == 6 ? -y 0 dimension - height for the first and last quarter, adjust the height h to transform the image from a circle to an oval shape to simulate the appearance of a quarter moon [moon_ty] ==2 ? h [moon_ty] ==6 ? h 0 crescent and new moon the moon_nc_mask currently displays the evening crescent, and its placement coordinate is 6, 110 changing its placement and dimension properties can show the rest of the moon phases the morning crescent and the new moon similarly, add tag expressions to the properties of moon_nc_mask placement - x coordinate move the mask group slightly to the left of the evening crescent when the new moon's position is 0 5 or less otherwise, move the mask group to the opposite side of the watch face; the same for the morning crescent replace each x with the distance between the x-placement of the evening crescent and the preferred x-placement of the other moon phases [moon_ty] == 0 ? [moon_po] <= 0 5 ? -x +x [moon_ty] == 7 ? +x 0 placement - y coordinate move the mask group down for the new moon replace y with the distance between the y-placement of the evening crescent and the preferred y-placement of the new moon [moon_ty] == 0 ? +y 0 color - opacity show moon_nc_mask only if the mask group covers the current moon phase otherwise, hide it [moon_ty] ==0 + [moon_ty] ==1 + [moon_ty] ==7 ?0 -100 change the moon's appearance by adjusting the image placement of moon_nc_layer using tag expressions placement - x coordinate move the image slightly to the right of the moon image when the new moon's position is 0 5 or less otherwise, move the image to the left replace each y with the distance between the initial x-placement of the layer and the preferred x-placement; to hide portions of the moon image to simulate the appearance of the other moon phases [moon_ty] == 0 ? [moon_po] <= 0 5 ? +y -y [moon_ty] == 7 ? -y 0 test the watch face in the run pane, click the preview watch face icon adjust the date to see the moon change from one phase to another you can check for a complete lunar cycle from 18 july 2023 to 16 august 2023 to test your watch face on a smart watch, you need to connect a watch device to the same network as your computer in watch face studio, select run on device select the connected watch device you want to test with if your device is not detected automatically, click scan devices to detect your device or enter its ip address manually by clicking the + button notethe always-on display is already set in the project to run the watch face successfully, you may need to configure its always-on display to avoid any error when you run on device you're done! congratulations! you have successfully achieved the goal of this code lab now, you can use mask and moon phase tags for making a dynamic watch face in watch face studio all by yourself! if you're having trouble, you may download this file moon phase complete project 1 87 mb to learn more about watch face studio, visit developer samsung com/watch-face-studio
Learn Developers Podcast
docseason 2, episode 7 previous episode | episode index | next episode this is a transcript of one episode of the samsung developers podcast, hosted by and produced by tony morelan a listing of all podcast transcripts can be found here host tony morelan senior developer evangelist, samsung developers instagram - twitter - linkedin guests eric cloninger, lead, developer relations team, samsung electronics chris shomo, infinity watchfaces listen download this episode topics covered sdc21, virtual conference history of the samsung developer conference conference audience keynote speakers conference announcements technical sessions expo floor galaxy store gallery code lab virtual reality after-hours party chris shomo, infinity watchfaces watch face studio 2020 best of galaxy store awards 2021 best of galaxy store awards bixby developers one ui beta samsung podcast platform smartthings helpful links sdc21, virtual conference - developer samsung com/sdc sdc18 highlights - youtube video sdc19 highlights - youtube video sdc19 replay - youtube video sdc21 preview - youtube video code lab - developer samsung com/codelab chris shomo, infinity watchfaces - youtube video watch face studio - developer samsung com/one-ui-watch 2020 best of galaxy store awards - youtube video 2021 best of galaxy store awards preview - youtube video bixby developers - bixbydevelopers com/ one ui beta - developer samsung com/one-ui-beta/index html samsung podcast platform - samsungpodcasts com/ smartthings - developer samsung com/smartthings samsung developers homepage - developer samsung com samsung developers newsletter - developer samsung com/newsletter samsung developers blog - developer samsung com/blog samsung developers news - developer samsung com/news samsung developers facebook - facebook com/samsungdev samsung developers instagram - instagram com/samsung_dev samsung developers twitter - twitter com/samsung_dev samsung developers youtube - youtube com/samsungdevelopers samsung developers linkedin - linkedin com/company/samsungdevelopers eric cloninger linkedin - linkedin com/in/ericcloninger/ chris shomo linkedin - linkedin com/in/christopher-shomo tony morelan linkedin - linkedin com/in/tony-morelan transcript note transcripts are provided by an automated service and reviewed by the samsung developers web team inaccuracies from the transcription process do occur, so please refer to the audio if you are in doubt about the transcript tony morelan 00 01 hey, i'm tony morelan and this is pow! the samsung developers podcast where we chat with innovators using samsung technologies, award winning app developers and designers, as well as insiders working on the latest samsung tools welcome to season two, episode seven today's show is a special episode of the pow! podcast last year, we were not able to have our annual samsung developer conference because of the pandemic but this year, we're back with sdc21, a virtual conference this coming october, i sat down with eric cloninger, who leads developer relations at samsung not only do we talk about some of the highlights from our past developer conferences, but what you can look forward to at this year's sdc21 enjoy hey, eric, welcome to the podcast eric cloninger 00 51 hey, tony glad to be here tony morelan 00 53 so i couldn't be more excited about this special episode where we get to chat about not only the past samsung developer conferences, but our upcoming sdc21 eric cloninger 01 03 yeah, it's gonna be a lot of fun it is different this year for certain tony morelan 01 06 let me first start off by asking what exactly is the samsung developer conference, eric cloninger 01 11 samsung creates a lot of different platforms and sdks for developers to create for and integrate with so sdc is one of the ways we promote our platforms, and educate developers on their capabilities like many companies, we realized that developers add a lot of value to our products with their own creations so sdc is our opportunity to share knowledge and hopefully build a connection to the people that are making our products better tony morelan 01 36 yeah, and what's unique with sdc 21 is this year, it's actually going to be a virtual conference now we know that it's because the current pandemic we're in, but it's, i think, an opportunity for samsung really to reach to a much bigger global audience that will be able to come in and attend our conference eric cloninger 01 55 certainly, you know, in the years past, it's been a live event and there would be quite a few people there -- several thousand now with it being virtual, we have a much bigger audience and people can actually see the technical sessions as well as the keynote online even though it's not in person, it is still something that where we can share knowledge, and people can give us feedback on what they like and don't tony morelan 02 21 let's go back and talk a little bit about the history of sdc i think it started back in 2013 is that correct? that's correct eric cloninger 02 29 and i was there in 2014, talking about the gear watch tony morelan 02 34 development wow, that must have been pretty close to when we first launched the watch eric cloninger 02 39 i think it was the first gear s was the product that that i was working on and we were talking about development tools and how to write apps for those watches tony morelan 02 49 since then, we've done seven sdcs that, you know, there was a year i think around 2015 that we skipped and of course last year, we did have to hold off on doing an actual conference past locations, primarily san francisco in the bay area eric cloninger 03 06 it's been at moscone every year until 2019, when it moved to san jose so it's always been in the bay area somewhere that people who attend tony morelan 03 15 tell me about, you know, what is what is the audience eric cloninger 03 19 the audience is primarily developers and the content is really focused on that group a lot of samsung employees attend to give the technical talks and a lot to people come from all over the world to work in the booths and on the show floor in one sense sdc is like a family reunion, we get a chance to meet the people that we've emailed with and been on web conferences for a long time that's a chance to come together but it's also the fruition of a year of hard work, you'll whether it's virtual or in person, we can use the opportunity to celebrate and to share what we've worked on with third party developer community tony morelan 04 05 yeah, i know, my first sdc was 2018 that was in san francisco i hit started at samsung just a few months earlier than that so it was a great opportunity, really, for me to meet, not just some of these employees that had only been, you know, emailing with but a lot of the partners that we had a great report with sdc 19 eric cloninger 04 29 i think there was over 5000 close to 6000 people that it's been five to 6000 every year since that i've been here yeah, so that's a fairly good-sized conference tony morelan 04 37 so let's talk about some of the past keynotes and some of the big announcements that we've made going back to 2017 i think we had stan lee, is that correct? eric cloninger 04 47 yeah, stan lee from marvel was one of the main speakers that was pretty interesting in 2018, we had a lot of people watching because that's the day that they announced the galaxy fold wow so the first time anybody saw it was on stage at sdc and there were probably a half a million people watching live on either facebook live or youtube tony morelan 05 13 i remember my takeaway from sdc18 was tim sweeney for fortnite epic games? eric cloninger 05 18 absolutely on stage with one of our vps who was holding your tiny sword and shield you know, it just it added to the silliness, but also the fun was pretty, pretty fun tony morelan 05 33 oh, definitely now sdc 19 we had another very interesting person up on the stage talk a little bit about vitalik eric cloninger 05 41 yeah, vitalik buterin is the co-founder of ethereum and that year, we also had justin sun from tron the blockchain community is very interesting and it's definitely a new aspect for samsung is we had the blockchain wallet sdk that was coming out that year and so we wanted to have people that could talk about their interactions with it so vitalik and justin, were on stage in the spotlight session on day two tony morelan 06 09 yeah, that was pretty exciting actually, to see him up on stage they're in live in person so a big part of our conference are the technical sessions, it's a chance for the community really to learn about new and upcoming technologies talk a bit about some of those sessions that we've had in the past eric cloninger 06 27 so pretty much any of samsung's technical features sdks and services have sessions at sdc so if you're interested in ai and voice activated services, you can go to multiple bixby sessions, if you're into the internet of things and how to integrate into samsung smartthings ecosystem, there will be information there you know, as i mentioned previously, there's blockchain, there's the knox partnership for if you want to do secure computing, one ui if you're a designer, and all the new foldable phones and devices out there, there's a lot of content around how to handle app continuity and the flex mode, as well as the unique things about foldable design that you can learn about, as well as things like samsung health and how to design for themes there's a wide range of technical sessions for pretty much anybody at any experience level tony morelan 07 24 yeah, yeah, in my area of involvement with the developer conference has been around that design side i mean, as you know, my background is in design, you know, when we are giving the sessions on theme, designing watchface designing that that's really where i get my involvement with so a lot of fun for me to be at the conference walking around the expo floor has been one of the most exciting things for me to be there because truthfully at these different conferences, you just don't know what you're going to see and i remember walking in the room if it was sdc 18 or 19 but seeing this awesome car on the expo floor, the harmon car eric cloninger 08 00 yeah, the great thing about the expo floor is where you, you get to do a lot of the kind of non-technical learning it's a great place in a more relaxed atmosphere to meet and talk to people about what's going on so the harmon car harman is a subsidiary of samsung, and they create high end audio equipment so i'm sure you're familiar with brands like harman, kardon, or jbl, or infiniti, all very high-end brands harman also creates infotainment systems and telematics solutions for automakers and so what they would do for several years is they would bring a car onto the show floor and deck it out with a lot of the latest software and hardware, as well as the audio systems for the attendees to sit in the car and try it out unfortunately, they wouldn't let us drive it around the show floor obviously tony morelan 08 47 i will say i actually did ride the elevator with the person who drove the car from southern california up to northern california for the show so i did get to ask a little bit about you know what it is like to get behind the wheel of that car and she said it was an absolute blast to drive it up five eric cloninger 09 04 i'm sure they had to go the speed limit though tony morelan 09 06 definitely i know that smart things back in 14, one of our first conferences they actually set up like what they call the connected home eric cloninger 09 14 yeah, it was actually a full size when not full sizes about a 900 square foot, you know, a 30 by 30 area where they had different rooms and inside each of those rooms, they would have different ways that you could integrate different iot solutions into the smart home tony morelan 09 32 now just to be clear, a 900 square foot home in san francisco actually is full size so in 2018, we did something i was actually pretty excited about we created what we called a gallery of theme so you know as you know, with the galaxy store, designers can publish their phone themes, but what we did is we took those designs and actually built like a museum gallery big, full size images of the different themes nicely framed, and people would walk around this gallery and not only see this beautiful, much larger than life theme design but this was a gallery where at the end of the conference, we actually raffled off the different pieces, eric cloninger 10 15 it really shows how we have a lot of incredibly creative people who are creating work for the galaxy store, and samsung galaxy devices all of those things that were shown in that that gallery are available for anyone to download and purchase on the galaxy store tony morelan 10 31 yeah, i know that that gallery really, really was a success in a lot of people really enjoyed seeing that worked in person another area of the floor that i saw had a lot of activity was code lab, talking about what exactly is code lab at the at the conference eric cloninger 10 46 code lab is an interactive learning experience, you don't have to actually be present at sdc to be able to use it samsung employees create guided learning modules, with examples and downloadable code snippets that you can use to learn anything from android development, watch face design, or theme by the time you've gone through everything tony morelan 11 13 so if people want to learn more about code lab outside of the conference, where can they find that information, eric cloninger 11 18 you can find the code lab on the samsung developer portal at developer samsung com/codelab tony morelan 11 26 so i think one of the most exciting things that i saw happen on the expo floor was the vr team, they set up this like photography studio that talk about that eric cloninger 11 36 so in 2018, that team created what was called a volumetric camera setup so it had cameras in a lot of different positions in 360 degrees so they would take a very detailed scan of your body, and then they would print it out on a 3d printer and so that was really cool and then the following year, that same team took that that same type of technology, and they integrated it with a live interactive experience called delusion and delusion was a very creepy, interactive experience where you interacted with all of these crazy characters and because of the time of the year, it was october 29, and 30th so it's just the day before halloween, okay, you had all of these various characters that you were interacting with in a 3d experience and the thing that was cool about it was the second night, we had this, you know, after hours segment and those characters in the game that actually came to life, and you actually saw these people walking around that you had interacted with, in the interactive exhibit tony morelan 12 49 yeah, i remember that being a very fun and freaky evening, i was i was working in one of the booths behind the scenes doors were closed and as they were prepping for the opening of the of the doors, the fog machine was rolling, that people started rushing in and then i saw those characters that had been in that interactive space, actually walking amongst the people and there were a few times that in a fun way, those a little not at ease with them with those different folks eric cloninger 13 23 yeah, it was kind of a creepy experience because some of those characters, i mean, they stayed in character, and they got to look right through you and it just it was very creepy experience so the after-hours is a lot of fun at you at sdc as it is, with a lot of events, it's an it's an opportunity to kind of be a lot more relaxed you'll see some people that you saw in the, the technical sessions earlier in the day, and you have a chance to maybe drill down a little deeper while you have, you know, a plate of food and beverage in your hand so it's a good experience overall and you know, to be honest, i'm looking forward to when we can do that again tony morelan 14 02 yeah, yeah, hopefully, hopefully that will be next year so i thought it would be nice if we brought in a designer slash developer who has been very involved with the samson community and who has not only attended and many of the past sdc conferences, but was also invited to speak at one of the past sessions chris shomo, from infinity watchfaces eric cloninger 14 20 hey, chris, welcome to the show chris shomo 14 23 hey, thank you for having me on here tony morelan 14 25 yeah, no, it's great it's great to have you on the podcast so looking back at the samsung developer program, chris has been one of those resources that we've turned to many times and it simply comes down to not only your success, but your willingness to share and, and really help grow the entire ecosystem for samsung watchfaces and galaxy devices chris shomo 14 43 well, one thing that i've learned is all about the community that's one of the reasons i love to share things that i find out because i've also reached out to other designers and ask them, you know, hey, how do you do this? how do you do that? and they're more than willing to share back so it really is a given take type of thing and you know, if you're nice, then you can find some answers that you're looking for out there tony morelan 15 04 there you go definitely and you know, honestly, the more success there is amongst all the designers just the more vibrant the galaxy store is just with, with lots of great content chris shomo 15 13 oh, yeah and just how it developed over time, too, because, like i've seen it, since the very beginning, when there was hardly anything on there and then just watching it explode to all these designs that you can't even imagine what's going to pop on there next it's exactly designed to blow me away all the time tony morelan 15 29 so chris is the person behind infinity watch faces, and truly is one of the first designers who started creating for the platform tell me what year was it that you actually started designing and selling on galaxy store? chris shomo 15 39 oh, goodness 2016 tony morelan 15 41 wow yeah so i actually did an episode on the podcast on chris last year, it was great episode, we talked about how you got your start creating for samsung and, and also that your house in savannah, georgia was featured in an episode of ghost hunters that it is haunted? chris shomo 15 56 yes, it is it's been quite an experience, even though i do believe that the ghost does appreciate me being here, i believe i do not know that but she's been pretty nice tony morelan 16 08 guys nice so if you want to learn much more about chris, go back to that episode and check it out it was it was a great show so in 2017, before i started working with samsung, you were actually invited to come out to san francisco and speak at the conference tell me about that chris shomo 16 22 wow, it was quite an experience and first off, it was my first developers conference, first type of any type of tech conference so i was a little nervous in the very beginning because here i am, i'm going to san francisco, and i'm getting ready to speak in front of a lot of other designers and developers what an experience it was great tony morelan 16 43 i'm sure it was nice to actually meet also the people, you know, not only at samsung, but then you know, some of the fellow developers that are part of this community chris shomo 16 51 yeah, and also met a lot of people that became future designers of for specifically watch faces, which was wonderful they always come back to me and be like, hey, i was there and i'm like, i remember you and you know, and they take off and they do very well yeah tony morelan 17 06 so i actually came across a video on youtube of you speaking at the conference and that's how i actually got my start how i first discovered that, you know, you can create these watch faces and, and start selling them for samsung now, i took it a step further and actually started working for samsung eventually chris shomo 17 23 yep and i think that's amazing i remember you sent me an email one time actually telling me that i had a typo on my website that's right and i was like, whoa, thank you, because it was just, uh, you know, no one wants a stupid typo on their website so i got that fixed and, and then i never knew that, you know, i'd be working with yeah, back and forth, like we are now and stuff so it's great it's amazing how everything is connected tony morelan 17 49 yeah so earlier this year, we announced a partnership with google and warehouse and introduced watch face studio to new tool for designing galaxy watch faces that are sold on the google play store when the tool was first developed, we asked you to be part of that early access team so can you tell me about that experience, how it is working with that tool, and what it's like to now publish on google play? chris shomo 18 10 well, first off, thank you for getting me in there and you recommended me for being part of that team and it was excellent to be part of it, because i was able to kind of push it to its limits for animations i had a really long animation, i was testing with it and i was sending it back and forth with samsung and it helped them iron out and smooth out how the animations were working on the watch and that was great and, you know, of course, there's going to be a little bit of growing pains in the very beginning we're working on that but it's been amazing how the team at samsung has been so responsive and to get the software right for us you can really create some masterpieces so i'm excited about this tony morelan 18 55 yeah, and that's why i thought it was so important to have you part of that team is because really your designs are not like the typical design i mean, you really do push the software to try and get the most out of it you know, they're there's fun, they're quirky, i mean animations are a huge part of your designs so is there anything new and exciting that we can anticipate coming out in the in the near future? chris shomo 19 15 oh, wow i don't really know myself because i kind of jumped around so much with these designs, which is another reason why yeah, i guess it's kind of unexpected and surprising when another one comes out at one time you'll have like dancing tigers in the next second you have dolphins and sea turtle swimming i'm working on getting one onto the google play store right now called flip out that has the dolphins and the sea turtles and then tiger time as well and then we got a giant eyeball for halloween that she's showing up so yeah, a bunch of different things tony morelan 19 48 you've got it in there they're super crazy they're very artistic chris shomo 19 51 thank you yeah, and it also one of the things that i like to concentrate on is trying to bring joy to people with the watch face is where they look at it and you know, just for a moment of time, they can actually, you know, take a break from reality, they get absorbed into the watch smile for a minute if that happens, and i know it's exceeded tony morelan 20 13 it also what i love is how you build in this sort of like goals where the watch will change, like, lets you step into an example, as you're reaching your different step goals throughout the day, your watch face then is also changing throughout the day chris shomo 20 27 and that started out of course, with the ties and watches and it worked with every one step goal percentage that they set with the watch and that was another thing that i'm glad i was in the beta because i was really expressing how much we needed a step goal percentage and to work with it, and they added it in after i requested it and it was really quick and of course there are some differences where we have to set the watch pace to its unique step goal as opposed to the user set step go but that's because of that they're trying to make it so it's compatible with all the different watches and where it was but that's cool, it opens up a new line of challenge faces where you can reach 1000 steps for this to happen 2000 steps for this to happen and i think it's really going to open the door for a lot of unique and creative designs tony morelan 21 17 you know, you brought up a great point that i always stress and that is how approachable samsung is to our developer community samsung really does listen to our developers and we actually want to have that one on one communications you know, through our different channels, it is really easy to reach out to us and we'll give you that that personal attention that we know our developers need when they're creating for samsung chris shomo 21 39 and i've really watched the developers program grow over time too because back in 2016 you know it was kind of a shot in the dark but everybody was like new to it samsung was new to this the watch faces and working with this well ready to be flooded of designers that are getting ready to come in and then every one of samsung embraced us we feel like we're part of a family tony morelan 22 02 thanks thanks, chris i got to thank you for jumping in and joining us on the podcast when sdc is back in person i hope to see you there, if not sooner, i will definitely be there chris shomo 22 10 count me in tony morelan 22 12 awesome thanks, chris thanks eric cloninger 22 15 it was great to hear from chris he's a part of the community of designers and developers that really make the galaxy store special tony morelan 22 22 yeah, he's been there from pretty much day one so it was great to catch up with chris and like i said, i can't wait to actually see him in person so it past sdcs, we've done what's called the best of galaxy store awards, i think, sec 18 was the first time that we did the show at the conference sec 19 that's when i actually hosted it down in san jose, it was great we have a lot of the winners actually, at the conference, we're able to recognize them for the great apps that they've created for galaxy store however, last year in 2020, because we did not have a conference, we did a virtual award show this was presented on youtube as a life premiere and it really actually was a lot of fun because we were able to reach out to a quite a big audience eric cloninger 23 09 one of the things i thought was cool about that once we all said in the chat room, it was in the early evening us time, but there were people logging in from russia and the czech republic and slovenia all of these developers and designers who had created things in one go is the middle of their night, but they were on there congratulating each other tony morelan 23 29 i think it really shows how the award show is really a global award show i mean we've got winners from all around the world winners from large companies down to indie designers and developers and it really is a huge, huge community eric cloninger 23 45 i think it shows how the galaxy store enables a lot of smaller operations, smaller individuals who may get lost in a larger organization that they can actually create something and monetize it and enjoy the success that they can have from their own work tony morelan 24 03 yeah, no that's very true that being said, though, there have been some pretty big names that we've recognized with awards in the past we've given awards to tik tok, epic games fortnite, microsoft with their franchise forza, top golf, that was another one and then there's a great company butterfly affected that his license big brands like spongebob, hello kitty, and star trek, it was great to see them recognized for their work eric cloninger 24 31 and also last year, for the first time, bixby developers had the opportunity to have their capsules judged and in 2020 the winner was spotify tony morelan 24 43 yeah, it was a lot of fun i actually worked on many of the trailers that were shown in the award show and spotify was one of the ones that i really, really enjoyed doing, not only the voiceover for but integrating the music and all the editing that was that was a lot of fun to work on that project and we look forward to that in 2021 eric cloninger 24 59 and so when is the award show this year tony morelan 25 05 so the award show will be part of sdc so that is on october 26 later on in the evening, though, we're going to be doing a premiere on youtube at 6pm eastern, and we will be participating in a live chat so we would love for, you know, not only the winners will be on participating in this live chat, but we would love just to have the community on there so we can all get together as a chance to, you know, congratulate the winners, and really talk about all of the great apps that were recognized during the award show eric cloninger 25 35 yeah, the one thing about this, that i think we did have a lot of fun with it last year, and we hope to have more fun this year in that chat session, the invitation goes out to really everyone who is interested in the galaxy ecosystem and that could be anybody who is a user or a consumer or a developer or a designer you know, we want to we want to celebrate everyone's hard work tony morelan 25 59 definitely, definitely and if you would like to actually go back and see who the previous winners are, and actually learn more about this upcoming award show, you can go over to developer samsung com forward slash awards to learn more about the best of galaxy store award show so let's talk about sdc 21 as you know, it's a virtual show that will be on october 26 where can people find out more information about registering to attend the virtual conference? eric cloninger 26 28 so the conference is free for anyone to attend, and you can learn more at developer samsung com slash sdc tony morelan 26 38 let's talk about some of the sessions what can you share about the sessions at sdc 21? eric cloninger 26 44 well, i don't want to steal any of the thunder from the product teams have been working so hard for the last year but it will tell you that most every technology team that is working on products at samsung will have something to talk about at sdc so if you're interested in the one ui beta, you'll learn a lot more about that at the sessions, the watchface tools, there's a podcasting platform that's brand new that i think you know something about, tony morelan 27 09 yeah, yeah, no, i am helping out the podcast platform team we're excited samsung has their new podcast platform, making it easy for users to listen to podcasts and we're really excited because in october, we're going to be expanding this platform to countries in europe so it's really a big deal you can check out my session and i kind of walk you through how it is that you submit your podcast to samsung so do you have any insight on what is going to be featured in the keynote, eric cloninger 27 38 i do have a little bit of information to share and one of the things that is always kind of fun with the keynote at sdc is that samsung president dj koh will be speaking as well as many other people from within the design and engineering teams at samsung as you know, the last physical sdc was in 2019, your seems like our world has kind of stopped but to be honest, the pace of technology keeps on moving and so nearly every samsung technology team will be there and they want to talk about all the innovation creation that they've done in the last two years so there'll be things announced for nearly every technology team from bixby and smartthings to mobile devices and smart tvs there's lots of information for developers that they will be able to use to create their own products for 2022 and beyond tony morelan 28 34 so really exciting sdc 21 is going to be october 26 eric cloninger 28 39 and if you want to attend, all you have to do is register at developer samsung com/sdc it's free to attend and we would love to see you there tony morelan 28 51 excellent hey, eric, thanks so much for being on the podcast super exciting to be back at it with sdc and i can't i can't wait for it eric cloninger 28 59 oh, absolutely it's really, it's the result of a year's worth of work by hundreds of people and we really want to share it with all the people out there tony morelan 29 10 yeah, it should be a great show right thanks, eric all right eric cloninger 29 13 thank you, tony closing 29 14 looking to start creating for samsung, download the latest tools to code your next app, or get software for designing apps without coding at all sell your apps to the world on the samsung galaxy store check out developer samsung com today and start your journey with samsung tony morelan 29 30 the pow! podcast is brought to you by the samsung developer program produced by tony morelan
We use cookies to improve your experience on our website and to show you relevant advertising. Manage you settings for our cookies below.
These cookies are essential as they enable you to move around the website. This category cannot be disabled.
These cookies collect information about how you use our website. for example which pages you visit most often. All information these cookies collect is used to improve how the website works.
These cookies allow our website to remember choices you make (such as your user name, language or the region your are in) and tailor the website to provide enhanced features and content for you.
These cookies gather information about your browser habits. They remember that you've visited our website and share this information with other organizations such as advertisers.
You have successfully updated your cookie preferences.