Development (Large Screen Optimization)

In this large screen optimization, you will add a navigator for the photos when using the app in the main display since it has more space. Android offers an alternate resources option based on various criteria like display size, density, and other more. You can use two different layout files for each display using alternate resources of Android. Create a new directory in res in the form of [resource]-[qualifier] for cover display and main display. The cover display will be between sw240 and sw480, while the main display will be sw600. The appropriate version of the resource is shown automatically by the system based on the smallest width qualifier of sw.

Step 1: Create a layout file for the main display

Create a new directory named layout-sw600dp under the res directory and then create an xml file named activity_main.

res/
  layout/   
      activity_main.xml 
  layout-sw600dp/ 
      activity_main.xml



Step 2: Add the layout code

Add the gallery layout code shown below, in layout-sw600dp/activity_main.xml file.

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/linearLayout"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context="com.xyz.gallery.MainActivity">

   <ImageView
      android:id="@+id/imageView"
      android:layout_width="wrap_content"
      android:layout_height="match_parent"
      android:gravity="center_vertical"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

   <Gallery
      android:id="@+id/allGallery"
      android:layout_width="fill_parent"
      android:layout_height="108dp"
      android:layout_marginBottom="4dp"
      android:gravity="fill"
      android:orientation="horizontal"
      android:padding="10dp"
      android:spacing="5dp"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintHorizontal_bias="0.0"
      app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>


Step 3: Run the app

After rebuilding the APK with the additional layout for main display, you can run the gallery app and see how the layout changes when you fold and unfold the device. If you don’t have any physical device, you can also test it on a Remote Test Lab device.




You're done!

Congratulations! You have successfully achieved the goal of this Code Lab activity. Now, you can optimize your app to support continuity and large screen layout by yourself! But, if you're having trouble, you may check out the link below.

App Continuity and Large Screen Optimization Complete Code 2.80 MB

To learn more about developing apps for Galaxy Foldable devices, visit: www.developer.samsung.com/galaxy-z