Quantcast
Jump to content

Seamless UI Experience of Your App for Samsung Galaxy Z Fold2


STF News
 Share

Recommended Posts

2020-11-26-01-banner.png

Maintaining the legacy of foldable technology, Samsung recently released the new Galaxy Z Fold2. This device is designed to provide a new and seamless experience to users with its Infinity Flex Display. As a developer, you can adjust your app to provide the best UI experience to your users.

In this blog, we will demonstrate how a stopwatch app can be modified to adjust with Galaxy Z Fold2 devices. The stopwatch app is pretty simple, having three functionalities—start, pause and reset the time.

2020-11-26-01-01.jpg
Figure 1: Stopwatch app example

In order to provide a seamless experience to the user, we have to ensure app continuity, adjust the activity according to the UI, support multi-resume in multi-window, and check the display cutout. So let’s get started.

App continuity

Like the previous Galaxy Z Fold, the new Galaxy Z Fold2 has two separate physical screens. The cover display is 2260 x 816 pixels and the main display is 2208 x 1768 pixels. To provide a seamless experience to the user while folding and unfolding the device, the app must maintain its continuity by preventing data loss. You can ensure continuity by using the onSaveInstanceState() method. First, save the data of the current state with onSaveInstanceState(). For the stopwatch app, the time that has passed is saved in seconds before the activity is paused.

@Override
public void onSaveInstanceState(Bundle savedInstanceState)
{
    savedInstanceState.putInt("seconds", seconds);
    savedInstanceState.putBoolean("running", running);
    savedInstanceState.putBoolean("wasRunning", wasRunning);
}

Then restore the data of the activity using the onCreate() function.

@Override
protected void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    if (savedInstanceState != null) {
        seconds = savedInstanceState.getInt("seconds");
        running = savedInstanceState.getBoolean("running");
        wasRunning = savedInstanceState.getBoolean("wasRunning");
    }
}
2020-11-26-01-02.jpg 2020-11-26-01-03.jpg

Figure 2: Continuity of the stopwatch while folding and unfolding the device

Ensure dynamic resizing of your app

If you want your app to support multi-window mode, define the activity as resizable. This can be done by setting the resizableActivity attribute to true in Manifest.xml. This ensures the maximum compatibility with both the cover screen and the main screen of the device.

<activity android:name=".MainActivity" android:resizeableActivity="true">
…
</activity>

Another approach is to define an aspect ratio for your app. Galaxy Z Fold2’s cover screen has a ratio of 25 : 9 whereas the main screen has a ratio of 22.5 : 18. To be compatible with the device, you should test your apps for these ratios and that they fill up the entire display.

You can use the minAspectRatio or the maxAspectRatio flag to constrain your app within the feasible aspect ratios.

Please note that, if the resizableActivity attribute is set to true, the minAspectRatio and the maxAspectRatio flag are ignored.

2020-11-26-01-04.jpg 2020-11-26-01-05.jpg

Figure 3: Dynamically resizable app in Pop-Up view and Split-Window view

Multi-Resume for multi-window

Up to Android 9, only one of the activities visible in the multi-window operation is allowed to stay in the RESUMED state. All other activities are put into the PAUSED state. Therefore, you have to force your app to be in the RESUMED state by adding the following in the Manifest.xml file.

<meta-data android:name="android.allow_multiple_resumed_activities" android:value="true" />

However, starting from Android 10, all activities visible in multi-window are allowed to stay in the RESUMED state. You no longer need to force your app to have multi-resume behavior. However, there are some cases where an app can be in the PAUSED state in Android 10, in which case you need to enforce the multi-resume behavior:

• In a minimized split-screen (with launcher on the side), the top activity isn't resumed because it's not focusable
• In picture-in-picture mode, the activity isn't resumed because it's not focusable
• When activities are covered by other transparent activities in the same stack

2020-11-26-01-06.jpg

Figure 4: Multi-Resume in multi-window

Display cutout

The main display of the Galaxy Z Fold2 has a punch hole in the upper right side. You can set a display cutout mode according to your content style. By default, the content is rendered into the cutout area while in portrait mode and letterboxed while in landscape mode. If you want your content to be rendered into the cutout area in both portrait and landscape modes, you can define the mode as shortEdges. In the sample app, the cutout mode is set to shortEdges in the style.xml file. The sample app is set to full screen and display cutout mode is set to shortEdges.

<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>	
<item name="android:windowTranslucentNavigation">true</item>

2020-11-26-01-07.jpg

Figure 5: Display cutout Default mode

2020-11-26-01-08.jpg
Figure 6: Display cutout in shortEdges mode

Hopefully this blog helps you to update your app for the Galaxy Z Fold2 and give the user a better UI experience. To check out the sample app, click here. You can also view Samsung’s official documentation for Galaxy Z devices. If you have any questions regarding foldable UI, feel free to post it in the Samsung Developers Forums.

View the full blog at its source

Link to comment
Share on other sites



  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Similar Topics

    • By STF News
      The Samsung Developers team works with many companies in the mobile and gaming ecosystems. We're excited to support our partner, Arm, as they bring timely and relevant content to developers looking to build games and high-performance experiences. This Vulkan Extensions series will help developers get the most out of the new and game-changing Vulkan extensions on Samsung mobile devices.
      Android is enabling a host of useful new Vulkan extensions for mobile. These new extensions are set to improve the state of graphics APIs for modern applications, enabling new use cases and changing how developers can design graphics renderers going forward. I have already provided information about ‘maintenance extensions’. However, another important extension that I explore in this blog is ‘legacy support extensions’.
      Vulkan is increasingly being used as a portable “HAL”. The power and flexibility of the API allows for great layered implementations. There is a lot of effort spent in the ecosystem enabling legacy graphics APIs to run efficiently on top of Vulkan. The bright future for driver developers is a world where GPU drivers only implement Vulkan, and where legacy APIs can be implemented on top of that driver.
      To that end, there are several features which are generally considered backwards today. They should not be used in new applications unless absolutely required. These extensions exist to facilitate old applications which need to keep running through API translation layers such as ANGLE, DXVK, Zink, and so on.
      VK_EXT_transform_feedback
      Speaking the name of this extension causes the general angst level to rise in a room of driver developers. In the world of Direct3D, this feature is also known as stream-out.
      The core feature of this extension is that whenever you render geometry, you can capture the resulting geometry data (position and vertex outputs) into a buffer. The key complication from an implementation point of view is that the result is ordered. This means there is no 1:1 relation for input vertex to output data since this extension is supposed to work with indexed rendering, as well as strip types (and even geometry shaders and tessellation, oh my!).
      This feature was invented in a world before compute shaders were conceived. The only real method to perform buffer <-> buffer computation was to make use of transform feedback, vertex shaders and rasterizationDiscard. Over time, the functionality of Transform Feedback was extended in various ways, but today it is essentially obsoleted by compute shaders.
      There are, however, two niches where this extension still makes sense - graphics debuggers and API translation layers. Transform Feedback is extremely difficult to emulate in the more complicated cases.
      Setting up shaders
      In vertex-like shader stages, you need to set up which vertex outputs to capture to a buffer. The shader itself controls the memory layout of the output data. This is unlike other APIs, where you use the graphics API to specify which outputs to capture based on the name of the variable.
      Here is an example Vulkan GLSL shader:
      #version 450 layout(xfb_stride = 32, xfb_offset = 0, xfb_buffer = 0, location = 0) out vec4 vColor; layout(xfb_stride = 32, xfb_offset = 16, xfb_buffer = 0, location = 1) out vec4 vColor2; layout(xfb_buffer = 1, xfb_stride = 16) out gl_PerVertex { layout(xfb_offset = 0) vec4 gl_Position; }; void main() { gl_Position = vec4(1.0); vColor = vec4(2.0); vColor2 = vec4(3.0); } The resulting SPIR-V will then look something like:
      Capability TransformFeedback ExecutionMode 4 Xfb Decorate 8(gl_PerVertex) Block Decorate 10 XfbBuffer 1 Decorate 10 XfbStride 16 Decorate 17(vColor) Location 0 Decorate 17(vColor) XfbBuffer 0 Decorate 17(vColor) XfbStride 32 Decorate 17(vColor) Offset 0 Decorate 20(vColor2) Location 1 Decorate 20(vColor2) XfbBuffer 0 Decorate 20(vColor2) XfbStride 32 Decorate 20(vColor2) Offset 16
      Binding transform feedback buffers
      Once we have a pipeline which can emit transform feedback data, we need to bind buffers:
      vkCmdBindTransformFeedbackBuffersEXT(cmd, firstBinding, bindingCount, pBuffers, pOffsets, pSizes); To enable a buffer to be captured, VK_BUFFER_USAGE_TRANSFORM_FEEDBACK_BUFFER_BIT_EXT is used.
      Starting and stopping capture
      Once we know where to write the vertex output data, we will begin and end captures. This needs to be done inside a render pass:
      vkCmdBeginTransformFeedbackEXT(cmd, firstCounterBuffer, counterBufferCount, pCounterBuffers, pCounterBufferOffsets); A counter buffer allows us to handle scenarios where we end a transform feedback and continue capturing later. We would not necessarily know how many bytes were written by the last transform feedback, so it is critical that we can let the GPU maintain a byte counter for us.
      vkCmdDraw(cmd, …); vkCmdDrawIndexed(cmd, …); Then we can start rendering. Vertex outputs are captured to the buffers in-order.
      vkCmdEndTransformFeedbackEXT(cmd, firstCounterBuffer, counterBufferCount, pCounterBuffers, pCounterBufferOffsets); Once we are done capturing, we end the transform feedback and, with the counter buffers, we can write the new buffer offsets into the counter buffer.
      Indirectly drawing transform feedback results
      This feature is a precursor to the more flexible indirect draw feature we have in Vulkan, but there was a time when this feature was the only efficient way to render transform feedbacked outputs. The fundamental problem is that we do not necessarily know exactly how many primitives have been rendered. Therefore, to avoid stalling the CPU, it was required to be able to indirectly render the results with a special purpose API.
      vkCmdDrawIndirectByteCountEXT(cmd, instanceCount, firstInstance, counterBuffer, counterBufferOffset, counterOffset, vertexStride); This works similarly to a normal indirect draw call, but instead of providing a vertex count, we give it a byte count and let the GPU perform the divide instead. This is nice, as otherwise we would have to dispatch a tiny compute kernel that converts a byte count to an indirect draw.
      Queries
      The offset counter is sort of like a query, but if the transform feedback buffers overflow, any further writes are ignored. The VK_QUERY_TYPE_TRANSFORM_FEEDBACK_STREAM_EXT queries how many primitives were generated. It also lets you query how many primitives were attempted to be written. This makes it possible to detect overflow if that is desirable.
      VK_EXT_line_rasterization
      Line rasterization is a tricky subject and is not normally used for gaming applications since they do not scale with resolution and their exact behavior is not consistent across all GPU implementations.
      In the world of CAD, however, this feature is critical, and older OpenGL APIs had extensive support for quite fancy line rendering methods. This extension essentially brings back those workstation features. Advanced line rendering can occasionally be useful for debug tooling and visualization as well.
      The feature zoo
      typedef struct VkPhysicalDeviceLineRasterizationFeaturesEXT { VkStructureType sType; void* pNext; VkBool32 rectangularLines; VkBool32 bresenhamLines; VkBool32 smoothLines; VkBool32 stippledRectangularLines; VkBool32 stippledBresenhamLines; VkBool32 stippledSmoothLines; } VkPhysicalDeviceLineRasterizationFeaturesEXT; This extension supports a lot of different feature bits. I will try to summarize what they mean below.
      Rectangular lines vs parallelogram
      When rendering normal lines in core Vulkan, there are two ways lines can be rendered. If VkPhysicalDeviceLimits::strictLines is true, a line is rendered as if the line is a true, oriented rectangle. This is essentially what you would get if you rendered a scaled and rotated rectangle yourself. The hardware just expands the line along the perpendicular axis of the line axis.
      In non-strict rendering, we get a parallelogram. The line is extended either in X or Y directions.
      (From Vulkan specification)
      Bresenham lines
      Bresenham lines reformulate the line rendering algorithm where each pixel has a diamond shaped area around the pixel and coverage is based around intersection and exiting the area. The advantage here is that rendering line strips avoids overdraw. Rectangle or parallelogram rendering does not guarantee this, which matters if you are rendering line strips with blending enabled.
      (From Vulkan specification)
      Smooth lines
      Smooth lines work like rectangular lines, except the implementation can render a little further out to create a smooth edge. Exact behavior is also completely unspecified, and we find the only instance of the word “aesthetic” in the entire specification, which is amusing. This is a wonderfully vague word to see in the Vulkan specification, which is otherwise no-nonsense normative.
      This feature is designed to work in combination with alpha blending since the smooth coverage of the line rendering is multiplied into the alpha channel of render target 0’s output.
      Line stipple
      A “classic” feature that will make most IHVs cringe a little. When rendering a line, it is possible to mask certain pixels in a pattern. A counter runs while rasterizing pixels in order and with line stipple you control a divider and mask which generates a fixed pattern for when to discard pixels. It is somewhat unclear if this feature is really needed when it is possible to use discard in the fragment shader, but alas, legacy features from the early 90s are sometimes used. There were no shaders back in those days.
      Configuring rasterization pipeline state
      When creating a graphics pipeline, you can pass in some more data in pNext of rasterization state:
      typedef struct VkPipelineRasterizationLineStateCreateInfoEXT { VkStructureType sType; const void* pNext; VkLineRasterizationModeEXT lineRasterizationMode; VkBool32 stippledLineEnable; uint32_t lineStippleFactor; uint16_t lineStipplePattern; } VkPipelineRasterizationLineStateCreateInfoEXT; typedef enum VkLineRasterizationModeEXT { VK_LINE_RASTERIZATION_MODE_DEFAULT_EXT = 0, VK_LINE_RASTERIZATION_MODE_RECTANGULAR_EXT = 1, VK_LINE_RASTERIZATION_MODE_BRESENHAM_EXT = 2, VK_LINE_RASTERIZATION_MODE_RECTANGULAR_SMOOTH_EXT = 3, } VkLineRasterizationModeEXT; If line stipple is enabled, the line stipple factors can be baked into the pipeline, or be made a dynamic pipeline state using VK_DYNAMIC_STATE_LINE_STIPPLE_EXT.
      In the case of dynamic line stipple, the line stipple factor and pattern can be modified dynamically with:
      vkCmdSetLineStippleEXT(cmd, factor, pattern); VK_EXT_index_type_uint8
      In OpenGL and OpenGL ES, we have support for 8-bit index buffers. Core Vulkan and Direct3D however only support 16-bit and 32-bit index buffers. Since emulating index buffer formats is impractical with indirect draw calls being a thing, we need to be able to bind 8-bit index buffers. This extension does just that.
      This is probably the simplest extension we have look at so far:
      vkCmdBindIndexBuffer(cmd, indexBuffer, offset, VK_INDEX_TYPE_UINT8_EXT); vkCmdDrawIndexed(cmd, …);
      Conclusion
      I have been through the 'maintenance' and 'legacy support' extensions that are part of the new Vulkan extensions for mobile. In the next three blogs, I will go through what I see as the 'game-changing' extensions from Vulkan - the three that will help to transform your games during the development process.
      Follow Up
      Thanks to Hans-Kristian Arntzen and the team at Arm for bringing this great content to the Samsung Developers community. We hope you find this information about Vulkan extensions useful for developing your upcoming mobile games. The original version of this article can be viewed at Arm Community.
      The Samsung Developers site has many resources for developers looking to build for and integrate with Samsung devices and services. Stay in touch with the latest news by creating a free account or by subscribing to our monthly newsletter. Visit the Marketing Resources page for information on promoting and distributing your apps and games. Finally, our developer forum is an excellent way to stay up-to-date on all things related to the Galaxy ecosystem.
      View the full blog at its source
    • By STF News
      From black and white to color, analog to digital, and digital to smart TVs­—Samsung Electronics has been there for all the key historic moments in the development of the television. Over time, Samsung has established itself as a global television leader by applying innovative technologies and staying a step ahead when it comes to identifying global lifestyle trends.
       
      And Samsung’s innovation hasn’t slowed in 2021. Even in the unprecedented era of the global pandemic, the company recorded a revenue-based TV market share of 31.9%1 in 2020. This was the highest figure the company had ever recorded, and means that Samsung has retained its number one spot in the global TV market for the 15th consecutive year. In this two-part series, Samsung Newsroom will explore the legacy of Samsung TVs, which have long been pioneers in the sector.
       
       
      A History of Excellence
      Samsung released its initial ‘world’s first’ television in 1998 with the launch of its 55-inch projection TV. The company’s initial securing of this title was partially brought about by its helping to lead the global transition from analog to digital television.
       
      Samsung went on to further change the game by releasing its LCD TV in the early 2000s. Around this time the company successfully popularized wall-mountable LCD TVs, leading to the inception of the golden age of LCD TVs. Samsung also launched a 46-inch (116cm) LCD TV—which was then the largest in the industry—and consequently altered the approach of an industry that had not been focused on large-screen TVs up to then. The 46-inch LCD TV, which cost more than USD 13,000 back then, was widely welcomed and helped spur the success of LCD TVs.
       
      Samsung’s Bordeaux LCD TV, naturally portraying the tones of a fine wine
       
      The Bordeaux LCD TV, released by Samsung in 2006, is another example that shows how innovation-based, outside-the-box thinking has changed the face of the sector forevermore. Developers began to question the long-term feasibility of thick, heavy, vacuum-tube-based televisions and instead started to dream of TVs that were lightweight and aesthetically sophisticated. The Bordeaux TV was the result, with its sales numbers exceeding one million in the first six months of its release. The Bordeaux TV featured a speaker that was relocated from both sides of the TV to the bottom, and highlighted its sophistication with a crimson color and curved edges. In addition to marking the launch of the Bordeaux TV, 2006 was also the first time in the company’s history that Samsung ranked first in the global television market. The company has continued to hold that position for 15 consecutive years, and still holds it today.
       
       
      The Commitment to Realizing the Best Definition Ever Seen
      Aiming to provide the absolute best experience to its television users, Samsung has maintained a keen commitment to improving image resolution. In a time of constantly changing lifestyle patterns and an ever-expanding pool of content, true technological innovation remains a primary driving force when it comes to retaining the TV industry’s top spot.
       
      Samsung’s LED TV, which received attention for its innovative, integrated technologies
       
      At CES 2009, Samsung introduced the beginning of the LED TV era. The company’s LED televisions used light emitting diodes (LEDs), which are semiconductor-based light sources that emit light when current flows through them, to realize very clear image resolution. About 50 engineers worked for around two years to completely redesign all components of the TV, obtaining more than 3,000 patents as they worked to realize the potential of LED TV technology. The resulting televisions would go on to distinguish themselves by creating a whole new domain for the industry.
       
      Samsung’s QLED TV, first introduced at CES 2017
       
      Samsung’s QLED TV, which achieved 100 percent color volume for the first time in the industry, is another product that reached the peak of screen technology. In 2017, Samsung released this next-generation television, which was based on quantum dot (QLED) technology. The TV takes quantum dot technology to new heights with advancements in light efficiency, stability and a wider color spectrum. At this time, Samsung emphasized that it would be creating a new standard for the global TV market in accordance with its slogan, ‘The Next Innovation In TV.’
       

       
      Samsung revealed its 2021 Neo QLED, a whole new display technology, during its First Look event ahead of CES 2021. Neo QLED is underpinned by Quantum Mini LED technology, which features LEDs that are 1/40th the height of conventional LEDs and are precisely controlled by Samsung’s own Quantum Matrix Technology and Neo Quantum Processor, a powerful picture processor with enhanced upscaling capabilities. Thus, Samsung, which has remained a step ahead when it comes to introducing future display technology, continues to lead the global TV sector while further strengthening its unique position in the market.
       
       
      Reflecting Users’ Tastes – The Inception of the ‘Era of Smart’ 
      After leading the global TV market for 15 consecutive years, Samsung’s innovations have come to transform users’ lifestyles and daily routines too. As more and more users gained the ability to handpick the content they wanted to watch, Samsung launched the Samsung TV App Store in 2010. In particular, the app provided a variety of high-quality local content for different countries, which helped to expand viewer pools. By developing the app according to the viewing preferences of each region and accentuating content like sports, movies, and cooking, Samsung helped make the viewing experience more enjoyable and further advanced its leadership.
       
      Samsung has also been offering its Samsung TV Plus2 service since the service’s launch in 2015. Samsung TV Plus is the company’s free Smart TV video service, which provides instant access to news, sports, entertainment and more. The service has now been expanded to 12 countries, bringing access to over 60 million Samsung Smart TVs.
       

       
      Samsung, which has always been ahead of the pack when it comes to making our societies smarter, will continue to put the users first by allowing them to select what they want to consume and catering its offerings to their tastes. As it continues to demonstrate the power of content, Samsung is planning to further expand its Smart TV experiences by increasing the number of countries where it can provide its services, as well as reinforcing its cooperation with broadcasting companies and content providers from around the world.
       
       
      1 January 2021 data released by market research firm Omdia
      2 Samsung TV Plus is currently available in select regions including the U.S., Canada, U.K., Germany, France, Italy, Spain, Switzerland, Austria, Korea, Australia, and Brazil. Service availability may vary by region and product.
      View the full article





×
×
  • Create New...