Report

Samsung Galaxy Fold devices have taken the mobile industry by storm, offering users a revolutionary way to interact with their applications. One of their key features is the rear display mode that enables users to continue their tasks seamlessly on the cover display while the main display remains turned off. Jetpack WindowManager has introduced APIs to enable this mode programmatically, and starting from One UI 6.0, developers can now utilize these APIs to integrate rear display mode into their applications, enhancing usability and maximizing the potential of foldable devices.
In this blog post, we dive deeper into implementing Jetpack WindowManager's rear display mode in a camera application. By leveraging this mode, users can take selfies with superior image quality using the rear camera instead of the front camera. Join us as we explore the exciting possibilities of foldable technology and uncover how to optimize your applications for the Samsung Galaxy Fold.
You can download the sample camera application here.
CameraXApp.zip (623.3 KB) Sep 26, 2024 Step 1: Add the WindowManager library into the project
WindowManager, a Jetpack library introduced by Google, supports rear display mode starting from version 1.2.0-beta03. To add the WindowManager library, go to Gradle Scripts > build.gradle (Module: app) and enter the following to the dependencies block:
implementation "androidx.window:window:1.3.0" Step 2: Implement the WindowAreaSessionCallback interface in MainActivity.kt
The WindowAreaSessionCallback interface updates an Activity about when the WindowAreaSession is started and ended. Using the onSessionStarted method, this interface provides the current WindowAreaSession as soon as a new window session is started.
class MainActivity : AppCompatActivity() , WindowAreaSessionCallback { … override fun onSessionEnded(t: Throwable?) { if(t != null) { println("Something was broken: ${t.message}") } } override fun onSessionStarted(session: WindowAreaSession) { } } Step 3: Declare variables
The WindowAreaController provides information about the moving windows between the cover display and the main display of the Galaxy Fold device.
The WindowAreaSession interface provides an active window session in the onSessionStarted method.
WindowAreaInfo represents the current state of a window area. It provides a token which is used later to activate rear display mode.
WindowAreaCapability.Status represents the availability and capability status of the window area defined by the WindowAreaInfo object. We utilize this status to change the UI of our application. The status of the Galaxy Fold device can be one of the following:
WINDOW_AREA_STATUS_ACTIVE: if the cover display is currently active.
WINDOW_AREA_STATUS_AVAILABLE: if the cover display is available to be enabled.
WINDOW_AREA_STATUS_UNAVAILABLE: if the cover display is currently not available to be enabled.
WINDOW_AREA_STATUS_UNSUPPORTED: if the Galaxy Fold device is running on Android 13 or lower.
private lateinit var windowAreaController: WindowAreaController private var windowAreaSession: WindowAreaSession? = null private var windowAreaInfo: WindowAreaInfo? = null private var capabilityStatus: WindowAreaCapability.Status = WindowAreaCapability.Status.WINDOW_AREA_STATUS_UNSUPPORTED private val operation = WindowAreaCapability.Operation.OPERATION_TRANSFER_ACTIVITY_TO_AREA Step 4: Create an instance of WindowAreaController in the onCreate method
windowAreaController = WindowAreaController.getOrCreate() Step 5: Set up a flow to get information from WindowAreaController
In the onCreate() method, add a lifecycle-aware coroutine to query the list of available WindowAreaInfo objects and their status. The coroutine executes each time the lifecycle starts.
lifecycleScope.launch(Dispatchers.Main) { lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) { windowAreaController.windowAreaInfos .map { info -> info.firstOrNull { it.type == WindowAreaInfo.Type.TYPE_REAR_FACING } } .onEach { info -> windowAreaInfo = info } .map { it?.getCapability(operation)?.status ?: WindowAreaCapability.Status.WINDOW_AREA_STATUS_UNSUPPORTED } .distinctUntilChanged() .collect { capabilityStatus = it updateUI() } } } Step 6: Update the UI according to the device's WindowAreaCapability.Status
private fun updateUI() { if(windowAreaSession != null) { viewBinding.switchScreenButton.isEnabled = true } else { when(capabilityStatus) { WindowAreaCapability.Status.WINDOW_AREA_STATUS_UNSUPPORTED -> { viewBinding.switchScreenButton.isEnabled = false Toast.makeText(baseContext, "RearDisplay is not supported on this device", Toast.LENGTH_SHORT).show() } WindowAreaCapability.Status.WINDOW_AREA_STATUS_UNAVAILABLE -> { viewBinding.switchScreenButton.isEnabled = false Toast.makeText(baseContext, "RearDisplay is not currently available", Toast.LENGTH_SHORT).show() } WindowAreaCapability.Status.WINDOW_AREA_STATUS_AVAILABLE -> { viewBinding.switchScreenButton.isEnabled = true } WindowAreaCapability.Status.WINDOW_AREA_STATUS_ACTIVE -> { viewBinding.switchScreenButton.isEnabled = true Toast.makeText(baseContext, "RearDisplay is currently active", Toast.LENGTH_SHORT).show() } else -> { viewBinding.switchScreenButton.isEnabled = false Toast.makeText(baseContext, "RearDisplay status is unknown", Toast.LENGTH_SHORT).show() } } } } Step 7: Toggle to rear display mode with WindowAreaController
Close the session if it is already active, otherwise start a transfer session to move the MainActivity to the window area identified by the token.
While activating rear display mode, the system creates a dialog to request the user’s permission to allow the application to switch screens. This dialog is not customizable.
private fun toggleRearDisplayMode() { if(capabilityStatus == WindowAreaCapability.Status.WINDOW_AREA_STATUS_ACTIVE) { if(windowAreaSession == null) { windowAreaSession = windowAreaInfo?.getActiveSession( operation ) } windowAreaSession?.close() } else { windowAreaInfo?.token?.let { token -> windowAreaController.transferActivityToWindowArea( token = token, activity = this, executor = displayExecutor, windowAreaSessionCallback = this ) } } } Step 8: Start the camera preview
Call startCamera() when onSessionStarted is triggered by the WindowAreaSessionCallback interface.
override fun onSessionStarted(session: WindowAreaSession) { startCamera() } Step 9: Add a button and set a listener to it for activating rear display mode
<Button android:id="@+id/switch_screen_button" android:layout_width="110dp" android:layout_height="110dp" android:layout_marginStart="50dp" android:elevation="2dp" android:text="@string/switch_screen" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintBottom_toTopOf="@+id/horizontal_baseline" app:layout_constraintStart_toEndOf="@id/vertical_centerline" /> viewBinding.switchScreenButton.setOnClickListener{ updateUI() toggleRearDisplayMode() } Incorporating rear display mode into your application can significantly enhance user experience by providing more intuitive control and greater flexibility. By following the outlined steps, you can create a more dynamic and user-friendly interface. As technology continues to evolve, staying ahead with features like rear display mode can set your application apart and offer users a seamless, professional-quality experience. To learn more about developing applications for Galaxy Foldable devices, visit: developer.samsung.com/galaxy-z.
View the full blog at its source

Samsung Electronics today announced the addition of SeeColors mode on its 2023 TV and monitor lineup.1 The newly added accessibility feature provides various color settings based on degrees and types of color vision deficiency (CVD),2 offering an improved viewing experience.
 
SeeColors mode provides nine picture presets so users can select the option that is most suitable for them. The feature adjusts red, green and blue levels to ensure viewers can easily distinguish colors on the screen depending on their degree or type of CVD.
 
Originally released as an application in 2017, SeeColors helps those with CVD enjoy their screen as it was meant to be seen. Now, integrated in TV and monitor accessibility menus, this feature is more readily available to users. For consumers who have already purchased a 2023 model, a software update will be available to add SeeColors to the accessibility menu.
 
Samsung has earned “Color Vision Accessibility” certification from TÜV Rheinland,3 in acknowledgement of SeeColors mode’s ability to help those with CVD better enjoy content on Samsung screens. This recognition builds on Samsung’s commitment to accessibility, under the vision of “Screens Everywhere, Screens for All.”
 
“We are thrilled to introduce additional accessibility features, including SeeColors and Relumino mode, in our 2023 TV and monitor lineup to assist individuals with color blindness and low vision,” said Seokwoo Jason Yong, Executive Vice President of Visual Display Business at Samsung Electronics. “Under the vision of ‘Screens Everywhere, Screens for All,’ we will continue to innovate and bring inclusive technologies closer to our consumers.”
 
For more information on Samsung’s accessibility features, please visit www.samsung.com.
 
 
1 SeeColors mode is available on Samsung’s 2023 TV and monitor lineup, including the Neo QLED, QLED, OLED, Smart Monitor and the G95SC gaming monitor.
2 This feature is not intended for use in the diagnosis of disease or other conditions, or in the cure, mitigation, treatment or prevention of any disease or medical problem. Any information found, acquired or accessed through this feature is made available for your convenience and should not be treated as medical advice.
3 TÜV Rheinland, headquartered in Cologne, Germany, is a globally renowned testing organization that offers quality and safety certifications across various industries. The “Color Vision Accessibility” certification was awarded on June 7, 2023.
View the full article

Samsung Electronics firmly believes in the power of technology to create a more inclusive world. When it comes to design, accessibility should be top of mind ensuring that everyone, regardless of their abilities, can fully enjoy the benefits of modern innovations. Traditional television can present challenges when accessing and comprehending visual content. However, through the use of visual aid features, Samsung is helping bridge the gap and providing an immersive and enjoyable viewing experience for all.
 
Relumino Mode, a viewing mode on select Samsung TVs, was designed to augment the visual capabilities of those with low vision, making it possible for anyone to engage with their favorite shows, movies and documentaries like never before. By highlighting specific parts of videos — such as contrast, color and sharpness — this feature makes it easier than ever to discern content on the TV screen.
 
To shed more light on this groundbreaking inclusive technology, Samsung Newsroom sat down with Dr. Kyungah Park and Jason (Jaeseong) Park from Visual Display Business, Samsung Electronics, to discuss everything from development to clinical trials.
 
▲ Jason Park (Samsung Electronics) and Kyungah Park, M.D. (Samsung Medical Center) discuss their journeys in creating and clinically testing Relumino Mode
 
 
Screens for All — Including People With Impaired Vision
Relumino, borrowed from Latin, means “to give back the light.” The idea is to restore vision as much as possible to people with impaired vision. Earlier this year at CES, Samsung introduced Relumino Mode on select Samsung TVs. This follows the wearable device “Relumino Glass” and the smartphone image processing software “Relumino App,” each revealed at CES in 2017 and 2018, respectively. Before that, Relumino was conceived in “C-Lab(Creative Lab),” Samsung Electronics’ in-house venture program. It has evolved and expanded ever since.
 
▲ Relumino Glass(left) and Relumino Mode for Samsung TVs(right)
 
“For several years, ‘Screens for All’ has been one of the key mottos for us. We’re working to further enhance TV accessibility and promote inclusion,” said Jason Park, who plans products and services for the Visual Display Business. “People with low vision are still a key demographic that need better TV viewing experiences.”
 
 
Innovation Rooted in the User’s Perspective
To develop Relumino Mode, planners and engineers met with a number of advisors who had visual impairments to understand their wants and needs.
 
▲ Jason Park, Visual Display Business, Samsung Electronics
 
“There’s an early experience that really changed my perspective,” shared Jason. “When we first met an advisor for Relumino Mode, I asked him to ‘Please come here and have a seat’ to which he replied, ‘Where is here?’ That was a hard and clear wake-up call for me. I was so embarrassed.” It was then that Jason realized that they were exploring a totally new territory and would have to first understand the way their users see the world.
 
▲ As part of the efforts to understand customers with visual impairments, Samsung engineers used special goggles to simulate blurry vision
 
Despite the decades of collective experience in enhancing TV picture quality, this particular project presented a unique challenge that none of the engineers had encountered before. Typically, their expertise lay in identifying even the slightest imperfections on the screen, but now they had to understand what it’s like as a user to have impaired vision. In addition to consulting advisors, the engineers utilized special goggles that simulated blurry vision, serving as a starting point for their exploration. Through a process of generating ideas, conducting trials and learning from mistakes, they eventually developed a solution that could be considered a genuinely effective viewing mode.
 
 
Clinical Trials and Direct Feedback
After initial research and development came trials on a larger scale. This is where Samsung Electronics decided to collaborate with Samsung Medical Center, one of South Korea’s most comprehensive medical facilities.
 
▲Dr. Kyungah Park, Department of Ophthalmology, Samsung Medical Center
 
“Clinical trials targeting people without disabilities are popular and recruiting subjects for these projects is relatively easy. Some even ask to join before we ask,” said Dr. Park. “But, that was not the case for the Relumino study. The pool was much more limited as we were more strict with our requirements — we targeted people who have lower vision than WHO’s vision impairment criteria.”
 
However, the people that Samsung contacted showed much passion for the project. “Many who joined the trials were very excited and didn’t mind traveling long distances for the study. Thanks to their support and encouragement, we were able to carry out the research,” Dr. Park added.
 
Four 55-inch Samsung QLED TVs were featured in the tests. One displayed the control image with no picture enhancements at all. The other three TVs showed the same content with Relumino Mode on high, medium and low. The TVs were installed on a meter away from each other onw a wall in a room with a specified amount of light.
 
The test was two-fold, with objective and subjective evaluations. A certified contrast sensitivity test was employed for the objective evaluation. For the subjective evaluations, participants were asked to examine a set of eight still images and two videos on each of the screens. Their satisfaction levels were measured on a scale of 0 to 10. Based on the results, researchers carried out additional interviews adjusting picture enhancement levels on the spot.
 
▲ A blurry vision goggle simulation of what Relumino Mode may look like to people with visual impairment
 
Relumino mode was well received by the group. One of the participants highly praised the technology, saying “I was thrilled to see the ball in a soccer match on screen. It can get frustrating if you can’t see the ball because of low vision, as you can imagine. Relumino Mode helped me see the ball clearly.”
 
“The subjects’ responses indicated the Mode’s subjective results while the contrast sensitivity testing showed its objective results. Both of these factors, combined, allowed us to find the optimal setting for a brilliant image on TV,” said Jason.
 
 
Screens for All, Today and Tomorrow
“While [the Relumino Mode] project focused on people with relatively severe visual impairment many people with slightly lighter symptoms still need help. I’d like to work on developing projects for them,” explained Dr. Park.
 
Jason shared a similar point of view, saying, “Samsung will continue to advance technology in the long term to provide personalized picture quality for people with vision impairment and let them enjoy TV comfortably.” Samsung remains committed to accessibility and strives to leverage its technologies to enable more people do what they enjoy.
View the full article

View the full blog at its source

Photo by Alexander Andrews on Unsplash
As promised in my last post about dark mode, I bring you a dark mode tutorial 🌚. If you just want to see the code, a refactored version lives on Glitch. Let’s get straight into it.
Prerequisites
This tutorial is beginner friendly but not if you’ve done absolutely no HTML, CSS, JavaScript. You’ll also need a small HTML and CSS site that you’d like to add dark mode to. I’ll be using my own personal site.

System Preferences
Many operating systems now have dark and light mode settings which we should respect. A safe assumption to make is that if someone has their operating settings set to “dark” then they probably also want to view your site in dark mode too.
We can do this with the CSS media query [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme), this media query allows us to recognise the operating system’s colour scheme and define some CSS rules within it. So, just to make sure things are working let’s set the background to black if the operating system is set to dark:
@media (prefers-color-scheme: dark) { body { background-color: black; } } This is my result. The media query can read what the operating system has as its colour scheme and applies the appropriate rules. You can test this by toggling the colour scheme settings on your computer.

Toggle colours
Okay, but what if the visitor wants to view your site in a different colour scheme than what the operating system is? We should give them that choice and we can do so by adding a toggle button and using JavaScript to switch between light and dark colour schemes.
HTML
First, let’s add a meta tag the head of our HTML:
<meta name="color-scheme" content="dark light"> This will act as a fallback for the browser should it not have prefers-colour-scheme since it can act as an indicator for browser to know that the content supports colour schemes.
Then we want to add the button to our body.
<button id="colourModeBtn">Toggle Dark Mode</button> Finally on the body, we want to add a specific class (which will be important later on):
<body class="`systemDarkPreference"> `<button id="colourModeBtn">Toggle Dark Mode</button> `</body>` CSS
Next, we want to set some CSS rules for a light theme within our prefers-color-scheme: dark block. We’re doing this so that if someone has set their operating system to “dark” everything that happens is within a dark OS context since we can’t override that setting. Now, we need to switch gears in how we’ve been thinking about our colour scheming. Sure, it’s light vs dark but it’s also system settings vs overridden, and this is important. It‘s helpful to think of @ media (prefers-color-scheme: dark) as the system dark context within which we also want some rules for that media query and also when we want to override the system setting. It may be complicated but hopefully the code sheds some light:
@media (prefers-color-scheme: dark) { body.systemDarkPreference { background-color: black; } } So within our dark context, we’ve added a systemDarkPreference to the body class as a way to apply our dark theme within the system dark context. We don’t need a class for our light theme because we’re going to be toggling the systemDarkPreference. So if the body is in our dark context but doesn’t have the systemDarkPreference class, then it will fall back to what rule it finds for the body element.
So, what happens if a visitor switches off the dark theme? Or their operating system colour scheme is set to light and they want to switch to dark? Or what if the visitor’s operating system doesn’t allow users to change their colour themes? To ensure these visitors are properly served, we’ll want to add some rules outside of the media query.
/* Default */ body{ background-color: white; } /* Dark */ body.dark { background-color: black; } We want to define the body element’s ruleset without any classes as the default behaviour for anyone who visits the site. Then a .dark class for those who want to toggle to a dark theme. There is a bit of repetition here since all the dark rules will have to be defined both inside and outside of the prefers-color-scheme media query but the default theme only needs to be defined once.
JavaScript
Remember to ensure your JavaScript is within <script></script> tag in your HTML or, if you prefer, is in a JavaScript file which is being called from your HTML like so: <script src="your_file.js"></script>.
Without the JavaScript the visitor won’t be able to interact with the page. So next, we’ll add an event listener to the button we created earlier. Let’s get the button element:
const ***toggleColourModeBtn ***= ***document***.getElementById("colourModeBtn"); Then we can add the event listener to the button:
***toggleColourModeBtn***.addEventListener("click", function () {}); At the moment this won’t have any functionality since we’re not asking it to do anything in the listener. Within the listener, first we want to make a few checks :
***toggleColourModeBtn***.addEventListener("click", function () { const hasSysDarkClass = ***document***.body.classList.contains('systemDarkPreference'); const currentSysIsDark = ***window***.matchMedia("(prefers-color-scheme: dark)").matches; const isDark = (hasSysDarkClass && currentSysIsDark) || ***document***.body.classList.contains('dark'); }); Let’s see what each variable is checking:
hasSysDarkClass checks that the body has the systemDarkPreference class on it.
currentSysIsDark checks if the operating system is set to dark using the prefers-color-scheme similar to what we’re doing in our CSS.
isDark checks that the first two variables ( hasSysDarkClass and currentSysIsDark ) are both true at the same time *or *that the body has the .dark class.
This could have been one variable but it’s far easier to read split up like this. Before we apply the correct styles to our body, we need to remove the hard coded systemDarkPreference since as soon as someone presses our button, they are indicating they want to override the system settings.
***toggleColourModeBtn***.addEventListener("click", function () { const hasSysDarkClass = ***document***.body.classList.contains('systemDarkPreference'); const currentSysIsDark = ***window***.matchMedia("(prefers-color-scheme: dark)").matches; const isDark = (hasSysDarkClass && currentSysIsDark) || ***document***.body.classList.contains('dark'); *** document***.body.classList.remove('systemDarkPreference'); }); Then we want to finally apply the correct CSS rules by toggling the body’s class list to include the .dark class if isDark is false.
***toggleColourModeBtn***.addEventListener("click", function () { const hasSysDarkClass = ***document***.body.classList.contains('systemDarkPreference'); const currentSysIsDark = ***window***.matchMedia("(prefers-color-scheme: dark)").matches; const isDark = (hasSysDarkClass && currentSysIsDark) || ***document***.body.classList.contains('dark'); *** document***.body.classList.remove('systemDarkPreference'); ***document***.body.classList.toggle('dark', !isDark); }); The end result should look like this.

Storing Settings
So that our visitors don’t have to keep readjusting the settings, we should store their preferences. In my last post I spoke about different methods to do this including localStorage and Cookies. Since my personal site is small and doesn’t collect data to be stored on the server, I’ve decided to go with localStorage. When we make any colour scheme change, we want to save it to the browser’s localStorage which we can do in the event listener we just added.
***toggleColourModeBtn***.addEventListener("click", function () { ... let colourMode; if (***document***.body.classList.contains("dark")) { colourMode = "dark"; } else { colourMode = "light"; } ***localStorage***.setItem("colourMode", colourMode); ***localStorage***.setItem("overRideSysColour", "true") }); For this first section there are a few moving parts. First we initiate colourMode so that we can dynamically set it later. Next we check if the .dark class is applied to the body element, if it is then we can set colourMode to dark and if it isn’t then we can set it to light. Then we can save this value in the localStorage. Finally, we also want to keep track of the fact that we’ve overridden the system’s settings in the localStorage.
The second section to this is to use what’s in the localStorage to set the page’s colour scheme when the visitor visits the page again. So somewhere outside of and above the event listener, we want to get the colourMode we saved previously and present the correct colour scheme depending on the value.
if (***localStorage***.getItem("overRideSysColour") == "true") { const ***currentColourMode ***= ***localStorage***.getItem("colourMode"); ***document***.body.classList.remove('systemDarkPreference'); ***document***.body.classList.add(***currentColourMode***); } So we’re checking that the system colour scheme has been overridden and if it is, then we remove that hard coded system class then add the value that’s in the localStorage. Something to note here is that this value can either be "light" or "dark" however, we don’t have any rules for the .light class so nothing will be applied to this and it will use the default rules as defined in our CSS. If you have rules for .light this will cause issues, so you may want to use a different name or an empty string when you’re setting the value in localStorage.
Choosing colours
Now, arguably the most important factor of dark themes. Choosing the correct colours. Many sites go for an off-black background and lighter white or off-white text. You want to be careful not to have contrast that’s too sharp but you also need to meet the minimum colour contrast of 4.5:1 for normal text for accessibility purposes. It’s important to make your user experience as comfortable to all visitors as possible. However, you don’t have to be confined to black and white, feel free to be creative. Coolors is a tool that allows you to view colour combinations and ensure they meet the Web Content Accessibility Guidelines.

I went for a dark blue, light blue and pink combo.
Finished Page
Play with the finished thing.

Last Words
Samsung Internet is starting to support prefers-color-scheme as a Labs menu item, so web developers can start working with it, and exploring how it helps them to build better UI. In the meantime, Samsung Internet will support force dark mode for the sake of users how expect dark web page when they set the device as dark. So if you want to experiment with prefers-color-scheme on Samsung Internet, make sure to turn it on via the Labs menu for now.
As I mentioned in my last post, there are many ways to implement dark mode and it’s up to you to analyse what the sacrifices for each method is. For example, if a visitor to my website has JavaScript turned off on their browser, then this solution won’t work. However, it’s overkill for me to store the theming data in a database (another method) because I don’t collect user data and don’t need to. The method I went with, while not perfect, is a nice middle ground. There are also other factors you may need to consider, such as the typography and icons which I didn’t have to think about. Check out the final glitch project to see how I refactored the code and managed the state of the button.
If this tutorial is useful to you, feel free to share it and show off your new dark mode sites! ✨
View the full blog at its source