# Screen Video Tutorials {% embed url="" %} {% embed url="" %} ## Appearance and Layout ### Space Elements Horizontally The `Horizontal Alignment` property allows you to space elements in a Screen horizontally ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-Lhm2T0tSbe8cP26ff3v%2F-Lhm58Sdw0sIa8MQOf5C%2Fimage.png?alt=media\&token=4b28c128-82c1-4e1f-a6c4-3c14cb0dc662) ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAonNrLekbSzc3rVf_d%2F-LAoppUjIAG3opaeNbta%2FThunkable%20Documentation%20Exhibits%20\(64\).png?alt=media\&token=1ba52eab-7db8-47bf-9334-ae6c90dea0cd) ### Space Elements Vertically The `Vertical Alignment` property allows you to space elements in a Screen vertically ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-LAn5wecEraNWaG7Ig2g%2F-LAn6ClEA1XUmupg0fMs%2Fspacing-%E2%9C%95-fig-2.png?generation=1524497178898825\&alt=media) ### Add a Background Color or Picture ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-Lhm2T0tSbe8cP26ff3v%2F-Lhm5RSXTEC27ZxRut3j%2Fimage.png?alt=media\&token=0801c566-02ae-491a-b433-68205321b8e1) | Property | Description | | ------------------ | ----------------------------------------------------------------------------------------------- | | Background Color | Default (`none`). Select any color using the color picker, RGBA or HEX value | | Background Picture | You can upload a background image to your app or reference an image url e.g.`beaver-yellow.png` | #### Background Picture Resize Mode This determines how to resize the image when the frame doesn't match the raw image dimensions. ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-Lhm2T0tSbe8cP26ff3v%2F-Lhm6DdY5UmF4Mtvzv2S%2Fimage.png?alt=media\&token=ffd0fb60-a97e-4351-b8ac-7177aac982e7) * Cover: Fills the entire screen without changing the height and width ratio of the image
* Contain: The entire image will be scaled down to fit inside the screen, without changing the height and width ratio of the image
* Stretch: The image's height will change to fill the screen length-wise
* Repeat: Repeat the image to cover the screen. The image's height and width ratio will not change
* Center: Positions the image in the middle of the frame ### Enable Scrolling ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-Lhm2T0tSbe8cP26ff3v%2F-Lhm5dzvnojy0iKdRhH6%2Fimage.png?alt=media\&token=28f4ce21-39eb-4159-a78e-0e7e0e3edf16) | Property | Description | | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Scrollable | Default (`false`). Indicates whether the screen is scrollable. For scrollable to work, the components in your screen must have heights either set in `absolute` pixels or set to `fit contents` | ### Set Orientation | Property | Description | | ------------------ | --------------------------------------------------------------------------------- | | Screen Orientation | Default (`all`). You can fix the screen orientation to `portrait` and `landscape` | ## Status Bar ### Hide (or show) Status Bar | Property | Description | | -------------- | ------------------------------------------------------------- | | Show StatusBar | Default (`true`). If set to `false`, hides the top status bar | ### Status Bar Theme | Property | Description | | --------------- | -------------------------------------------------------------------------------------------------------- | | StatusBar Style | Choose between `default` , `light-content` or `dark-content` to set the theme or style of the status bar | ### Status Bar Opacity {% hint style="warning" %} Please Note: The `Translucent StatusBar` property will only work on Android devices at this time. {% endhint %} | Property | Description | | --------------------- | ----------------------------------------------------------------------------------- | | Translucent StatusBar | Default (`false`). Set to `true` to make the Status Bar translucent. Android-only. | ### Status Bar Color {% hint style="warning" %} Please Note: The `StatusBar Color`property will only work on Android devices at this time. {% endhint %} | Property | Description | | --------------- | ------------------------------------------------------------------------------------------------- | | StatusBar Color | Default (`0,0,0,0.53`). Select any color using the color picker, RGBA or HEX value. Android-only. | ## Save Screen Thunkable allows you to reuse a screen, and its associated blocks, in multiple projects with the "Save to My Screens" feature. You can find the save screen button at the top of the properties for every screen component in your app. ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M1DQhVxj7DFjmmUUAuq%2F-M1DR8RbMPU6kkB9ZhRu%2F02_save_screen.png?alt=media\&token=daa74cb1-62aa-47b7-9b36-191481fd4a44) ### Name Your Screen It's important that when you save your screen you use a descriptive and memorable name that describes what your screen does. The example below is for a sign in screen, which is something that often get reused across multiple projects. ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M1DQhVxj7DFjmmUUAuq%2F-M1DR8Ra-ljpUIuq3iC6%2F03_name_screen.png?alt=media\&token=c3e1ad8c-217d-48a4-af64-5a955a2b6492) ### Add a New Screen Once you've saved a screen, any time you click the **`+`** button to add a new screen you will be given the option to add a blank screen or to "Copy from My Screens". ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M1DQhVxj7DFjmmUUAuq%2F-M1DR8R_KtD232PD-2h5%2F04_new_project.png?alt=media\&token=47608d2e-1419-4988-9090-da53a48969f3) ### Choose a Saved Screen Simply choose the screen that you want to add in and click the "Copy" button to proceed. ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-M1DQhVxj7DFjmmUUAuq%2F-M1DR8RXZK6x_jcdGnGF%2F05_choose_screen.png?alt=media\&token=4d158dfe-2526-4b88-8bdd-ddf2bac41733) ## Screen Blocks ### when Screen1 Starts ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-Lq6kxGxHZTvy-2jk25F%2F-Lq6l3Y_vuPUukn7G1sP%2Fscreen%20starts.png?alt=media\&token=de751a37-adb3-48d0-9e8a-4fc9a39d5772) | Event | Description | | ------ | ----------------------------------------- | | Starts | Fires when the Screen is **first** opened | ### when Screen1 Opens ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-Lq6kxGxHZTvy-2jk25F%2F-Lq6l3YaUyXbx26VFwy9%2Fscreen%20opens.png?alt=media\&token=b0b0fb9a-9daa-4e29-8d5f-50f12077f9c0) | Event | Description | | ----- | -------------------------------------- | | Opens | Fires **anytime** the Screen is opened | ### when Screen1 Closes
| Event | Description | | ------ | ----------------------------------- | | Closes | Fires **anytime** the Screen closes | ### when Screen1 BackButtonPressed ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-Lq6kxGxHZTvy-2jk25F%2F-Lq6l3YZabj6ZI-e1Dkf%2Fscreen%20back%20button%20pressed.png?alt=media\&token=2fe3ec8f-5c60-41e5-9a16-4d0f07642ea4) | Event | Description | | ----------------- | --------------------------------------------------------------------------- | | BackButtonPressed | Fires when the physical or on-screen back button is pressed. (Android only) | ### in Screen1 call ToggleDrawerMenu ![](https://689802330-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAn5scXl2uqUJUOqkJo%2F-Lq6kxGxHZTvy-2jk25F%2F-Lq6l3YT0ddmB3YiYeez%2Fscreen%20toggle%20drawer%20menu.png?alt=media\&token=5af22194-bfa2-47eb-9d9a-c78d1fd71086) | Function | Description | | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ToggleDrawerMenu | Opens or Closes the drawer menu, if available. Must be used in conjunction with the [Drawer Navigator](https://docs.thunkable.com/snap-to-place/drawer-navigator) | --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.thunkable.com/snap-to-place/screen.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.