<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Tablet &#8211; Xojo Programming Blog</title>
	<atom:link href="https://blog.xojo.com/tag/tablet/feed/" rel="self" type="application/rss+xml" />
	<link>https://blog.xojo.com</link>
	<description>Blog about the Xojo programming language and IDE</description>
	<lastBuildDate>Tue, 01 Oct 2024 15:31:29 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>
	<item>
		<title>Android Tablet Support</title>
		<link>https://blog.xojo.com/2024/10/01/android-tablet-support/</link>
		
		<dc:creator><![CDATA[Paul Lefebvre]]></dc:creator>
		<pubDate>Tue, 01 Oct 2024 15:31:26 +0000</pubDate>
				<category><![CDATA[Android]]></category>
		<category><![CDATA[Linux]]></category>
		<category><![CDATA[Mobile]]></category>
		<category><![CDATA[2024r3]]></category>
		<category><![CDATA[Cats]]></category>
		<category><![CDATA[Layout Editor]]></category>
		<category><![CDATA[Tablet]]></category>
		<guid isPermaLink="false">https://blog.xojo.com/?p=13552</guid>

					<description><![CDATA[Android apps made with Xojo have always worked on tablets, but until Xojo 2024r3 there has been no easy way to design your screens for&#8230;]]></description>
										<content:encoded><![CDATA[
<p>Android apps made with Xojo have always worked on tablets, but until Xojo 2024r3 there has been no easy way to design your screens for tablets. Below are the new features that should make it easier to create Android tablet apps.</p>



<h2 class="wp-block-heading">Layout Editor</h2>



<p>The Layout Editor has been enhanced with two settings that can adjust the layout.</p>



<figure class="wp-block-image size-full"><img decoding="async" width="288" height="62" src="https://blog.xojo.com/wp-content/uploads/2024/08/image-4.png" alt="" class="wp-image-13553"/></figure>



<p>The command bar has two toggle buttons. The first one already existed and it is for displaying the layout in portrait (the default) or landscape.</p>



<p>The new toggle button displays the layout in a phone size (the default) or a tablet size. When you switch between any of these toggles, the locking is applied to the controls on the layout.</p>



<p>The layout editor also remembers the selections so that the next time you visit the layout, it will be where you left it. Here you can see a landscape tablet layout:</p>



<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="1024" height="793" src="https://blog.xojo.com/wp-content/uploads/2024/08/image-5-1024x793.png" alt="" class="wp-image-13554" srcset="https://blog.xojo.com/wp-content/uploads/2024/08/image-5-1024x793.png 1024w, https://blog.xojo.com/wp-content/uploads/2024/08/image-5-300x232.png 300w, https://blog.xojo.com/wp-content/uploads/2024/08/image-5-768x595.png 768w, https://blog.xojo.com/wp-content/uploads/2024/08/image-5-1536x1189.png 1536w, https://blog.xojo.com/wp-content/uploads/2024/08/image-5-2048x1585.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h2 class="wp-block-heading">Default Screen</h2>



<p>The App Inspector has an additional Default Tablet Screen property. When your app is launched on a phone or tablet-sized device, the specified screen is what gets displayed.</p>



<figure class="wp-block-image size-full"><img decoding="async" width="634" height="218" src="https://blog.xojo.com/wp-content/uploads/2024/08/image-6.png" alt="" class="wp-image-13555" srcset="https://blog.xojo.com/wp-content/uploads/2024/08/image-6.png 634w, https://blog.xojo.com/wp-content/uploads/2024/08/image-6-300x103.png 300w" sizes="(max-width: 634px) 100vw, 634px" /></figure>



<p>You can also choose &#8220;None&#8221; for a default screen if you just want to share a single screen across both types of devices.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>If you choose &#8220;None&#8221; for the Default Phone Screen, then the app won&#8217;t launch on a phone. If you choose &#8220;None&#8221; for a Default Tablet Screen, the app will launch on the tablet using the Default Phone Screen, which matches prior behavior.</p>
</blockquote>



<h2 class="wp-block-heading">Design Considerations</h2>



<p>Xojo for Android uses locking to automatically adjust controls on the layout. Locking will work for certain types of layouts that you want to run on both phones and tablets, but may not be sufficient for more complex layouts. In these situations, you are better served by designing completely separate layouts for phone and tablet and then using the above Default Screen properties to show the correct one.</p>



<p>When you need to show additional screens, you can show the phone or tablet screen in code by checking the device using DeviceData.Orientation and DeviceData.UserInterfaceType.</p>



<pre class="wp-block-code"><code>If System.Device.UserInterfaceType = SystemDeviceData.UserInterfaceTypes.Tablet Then
  // Show tablet screen
  myTabletScreen.Show
Else
  // Show phone screen
  myPhoneScreen.Show
End If</code></pre>



<p>When you have multiple screens, it often makes sense to put the UI in containers and then use the containers on the different screens.</p>



<p>You can run your apps on a Tablet emulator for testing (you can create one using Android Studio) or you can debug directly on device. I enabled on-device debugging for a Lenovo Tab M10 Plus 3rd Gen with these steps:</p>



<ul class="wp-block-list">
<li>Go to Settings.</li>



<li>Select About tablet.</li>



<li>Tap 7 times in a row on the build number. This enabled Developer options. You may be prompted to enter your PIN.</li>



<li>Select System and then Developer Options.</li>



<li>Turn on USB debugging and give it permission.</li>
</ul>



<p>The tablet will now appear as a debug device in Xojo, allowing you to run your Android projects on it.</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="3552" height="2893" src="https://blog.xojo.com/wp-content/uploads/2024/09/D0D09B0C-7135-4067-A893-29D1420CAA14.png" alt="" class="wp-image-13724" srcset="https://blog.xojo.com/wp-content/uploads/2024/09/D0D09B0C-7135-4067-A893-29D1420CAA14.png 3552w, https://blog.xojo.com/wp-content/uploads/2024/09/D0D09B0C-7135-4067-A893-29D1420CAA14-300x244.png 300w, https://blog.xojo.com/wp-content/uploads/2024/09/D0D09B0C-7135-4067-A893-29D1420CAA14-1024x834.png 1024w, https://blog.xojo.com/wp-content/uploads/2024/09/D0D09B0C-7135-4067-A893-29D1420CAA14-768x626.png 768w, https://blog.xojo.com/wp-content/uploads/2024/09/D0D09B0C-7135-4067-A893-29D1420CAA14-1536x1251.png 1536w, https://blog.xojo.com/wp-content/uploads/2024/09/D0D09B0C-7135-4067-A893-29D1420CAA14-2048x1668.png 2048w" sizes="auto, (max-width: 3552px) 100vw, 3552px" /></figure>



<h2 class="wp-block-heading">What about Chromebook?</h2>



<p><a href="https://www.chromium.org/chromium-os/chrome-os-systems-supporting-android-apps/" target="_blank" rel="noreferrer noopener">Some Chromebooks</a> are <a href="https://support.google.com/chromebook/answer/7021273" target="_blank" rel="noreferrer noopener">able to run Android apps</a> and <a href="https://www.chromium.org/chromium-os/chrome-os-systems-supporting-android-apps/" target="_blank" rel="noreferrer noopener">those that can</a> are also able to run Xojo&#8217;s Android apps. Android apps can be installed via the Play Store (give <a href="https://play.google.com/store/apps/details?id=com.xojo.catsup&amp;hl=en_US&amp;pli=1" target="_blank" rel="noreferrer noopener">CatsUp a try</a>) or manually, although doing it manually is rather difficult (I have not yet gotten that working on my Chromebook). The Play Store options works well, however. Here&#8217;s CatsUp from the Play Store running on my Lenovo 300e Chromebook:</p>



<figure class="wp-block-image size-large is-resized"><img loading="lazy" decoding="async" width="1024" height="768" src="https://blog.xojo.com/wp-content/uploads/2024/08/F98FE354-8315-4BCA-B204-C9D24EE0B86B_1_102_o-1024x768.jpeg" alt="" class="wp-image-13576" style="width:913px;height:auto" srcset="https://blog.xojo.com/wp-content/uploads/2024/08/F98FE354-8315-4BCA-B204-C9D24EE0B86B_1_102_o-1024x768.jpeg 1024w, https://blog.xojo.com/wp-content/uploads/2024/08/F98FE354-8315-4BCA-B204-C9D24EE0B86B_1_102_o-300x225.jpeg 300w, https://blog.xojo.com/wp-content/uploads/2024/08/F98FE354-8315-4BCA-B204-C9D24EE0B86B_1_102_o-768x576.jpeg 768w, https://blog.xojo.com/wp-content/uploads/2024/08/F98FE354-8315-4BCA-B204-C9D24EE0B86B_1_102_o-1536x1152.jpeg 1536w, https://blog.xojo.com/wp-content/uploads/2024/08/F98FE354-8315-4BCA-B204-C9D24EE0B86B_1_102_o.jpeg 2048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>When run on the Chromebook, Android apps can have a size of Phone, Tablet or Resizable. You can see that as an option in the title bar of the above screenshot. For best results you probably want to design your apps for a landscape tablet.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>Xojo for Android does not have direct support for Chromebook features at this time, but if there is something you&#8217;d like to see, be sure to create an Issue so that we can look into it.</p>
</blockquote>



<p>Since Chromebooks are just (low-end) Linux machines at their core, they can technically run Xojo Linux apps (x86 or ARM depending on the Chromebook), but this usually requires some sort of <a href="https://support.google.com/chromebook/answer/9145439" target="_blank" rel="noreferrer noopener">additional Linux installation</a>.</p>



<p>And of course, Chromebooks are typically meant to run web apps, which Xojo can also do quite well.</p>



<h2 class="wp-block-heading">Eddie&#8217;s Electronics Example Project</h2>



<p>The Android Eddie&#8217;s Electronics example project has been updated to run on both phones and tablets. It makes use of Containers to contain the UI and displays them using screens for the appropriate device type.</p>



<p>Here you can see the Customer screen for a tablet displays the list of customers on the left, with details and invoices on the right.</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="676" src="https://blog.xojo.com/wp-content/uploads/2024/08/image-7-1024x676.png" alt="" class="wp-image-13557" srcset="https://blog.xojo.com/wp-content/uploads/2024/08/image-7-1024x676.png 1024w, https://blog.xojo.com/wp-content/uploads/2024/08/image-7-300x198.png 300w, https://blog.xojo.com/wp-content/uploads/2024/08/image-7-768x507.png 768w, https://blog.xojo.com/wp-content/uploads/2024/08/image-7-1536x1014.png 1536w, https://blog.xojo.com/wp-content/uploads/2024/08/image-7.png 2048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p>Compare that to the phone version which has you navigate between that information using separate screens.</p>



<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex">
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="483" height="1024" src="https://blog.xojo.com/wp-content/uploads/2024/08/SCR-20240829-ncsc-483x1024.png" alt="" class="wp-image-13564" srcset="https://blog.xojo.com/wp-content/uploads/2024/08/SCR-20240829-ncsc-483x1024.png 483w, https://blog.xojo.com/wp-content/uploads/2024/08/SCR-20240829-ncsc-142x300.png 142w, https://blog.xojo.com/wp-content/uploads/2024/08/SCR-20240829-ncsc-768x1628.png 768w, https://blog.xojo.com/wp-content/uploads/2024/08/SCR-20240829-ncsc-725x1536.png 725w, https://blog.xojo.com/wp-content/uploads/2024/08/SCR-20240829-ncsc.png 850w" sizes="auto, (max-width: 483px) 100vw, 483px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="485" height="1024" src="https://blog.xojo.com/wp-content/uploads/2024/08/SCR-20240829-ncyb-485x1024.png" alt="" class="wp-image-13565" srcset="https://blog.xojo.com/wp-content/uploads/2024/08/SCR-20240829-ncyb-485x1024.png 485w, https://blog.xojo.com/wp-content/uploads/2024/08/SCR-20240829-ncyb-142x300.png 142w, https://blog.xojo.com/wp-content/uploads/2024/08/SCR-20240829-ncyb-768x1620.png 768w, https://blog.xojo.com/wp-content/uploads/2024/08/SCR-20240829-ncyb-728x1536.png 728w, https://blog.xojo.com/wp-content/uploads/2024/08/SCR-20240829-ncyb.png 856w" sizes="auto, (max-width: 485px) 100vw, 485px" /></figure>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="482" height="1024" src="https://blog.xojo.com/wp-content/uploads/2024/08/SCR-20240829-nddd-482x1024.png" alt="" class="wp-image-13566" srcset="https://blog.xojo.com/wp-content/uploads/2024/08/SCR-20240829-nddd-482x1024.png 482w, https://blog.xojo.com/wp-content/uploads/2024/08/SCR-20240829-nddd-141x300.png 141w, https://blog.xojo.com/wp-content/uploads/2024/08/SCR-20240829-nddd-768x1632.png 768w, https://blog.xojo.com/wp-content/uploads/2024/08/SCR-20240829-nddd-723x1536.png 723w, https://blog.xojo.com/wp-content/uploads/2024/08/SCR-20240829-nddd.png 852w" sizes="auto, (max-width: 482px) 100vw, 482px" /></figure>
</div>
</div>



<p>Tablet supports opens up a whole other category of users for your Android apps and should be particularly useful to those making bespoke apps for clients.</p>



<p><em>Paul learned to program in BASIC at age 13 and has programmed in more languages than he remembers, with Xojo being an obvious favorite. When not working on Xojo, you can find him talking about retrocomputing at <a href="https://goto10.substack.com" target="_blank" rel="noreferrer noopener">Goto 10</a> and </em>on Mastodon @lefebvre@hachyderm.io.</p>



<ul class="wp-block-social-links has-normal-icon-size is-content-justification-center is-layout-flex wp-container-core-social-links-is-layout-16018d1d wp-block-social-links-is-layout-flex"><li class="wp-social-link wp-social-link-facebook  wp-block-social-link"><a rel="noopener nofollow" target="_blank" href="https://www.facebook.com/goxojo" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z"></path></svg><span class="wp-block-social-link-label screen-reader-text">Facebook</span></a></li>

<li class="wp-social-link wp-social-link-x  wp-block-social-link"><a rel="noopener nofollow" target="_blank" href="https://x.com/xojo" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M13.982 10.622 20.54 3h-1.554l-5.693 6.618L8.745 3H3.5l6.876 10.007L3.5 21h1.554l6.012-6.989L15.868 21h5.245l-7.131-10.378Zm-2.128 2.474-.697-.997-5.543-7.93H8l4.474 6.4.697.996 5.815 8.318h-2.387l-4.745-6.787Z" /></svg><span class="wp-block-social-link-label screen-reader-text">X</span></a></li>

<li class="wp-social-link wp-social-link-linkedin  wp-block-social-link"><a rel="noopener nofollow" target="_blank" href="https://www.linkedin.com/company/xojo" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.418,3.582,21,4.3,21h15.4c0.718,0,1.3-0.582,1.3-1.3V4.3 C21,3.582,20.418,3,19.7,3z M8.339,18.338H5.667v-8.59h2.672V18.338z M7.004,8.574c-0.857,0-1.549-0.694-1.549-1.548 c0-0.855,0.691-1.548,1.549-1.548c0.854,0,1.547,0.694,1.547,1.548C8.551,7.881,7.858,8.574,7.004,8.574z M18.339,18.338h-2.669 v-4.177c0-0.996-0.017-2.278-1.387-2.278c-1.389,0-1.601,1.086-1.601,2.206v4.249h-2.667v-8.59h2.559v1.174h0.037 c0.356-0.675,1.227-1.387,2.526-1.387c2.703,0,3.203,1.779,3.203,4.092V18.338z"></path></svg><span class="wp-block-social-link-label screen-reader-text">LinkedIn</span></a></li>

<li class="wp-social-link wp-social-link-github  wp-block-social-link"><a rel="noopener nofollow" target="_blank" href="https://github.com/topics/xojo" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12,2C6.477,2,2,6.477,2,12c0,4.419,2.865,8.166,6.839,9.489c0.5,0.09,0.682-0.218,0.682-0.484 c0-0.236-0.009-0.866-0.014-1.699c-2.782,0.602-3.369-1.34-3.369-1.34c-0.455-1.157-1.11-1.465-1.11-1.465 c-0.909-0.62,0.069-0.608,0.069-0.608c1.004,0.071,1.532,1.03,1.532,1.03c0.891,1.529,2.341,1.089,2.91,0.833 c0.091-0.647,0.349-1.086,0.635-1.337c-2.22-0.251-4.555-1.111-4.555-4.943c0-1.091,0.39-1.984,1.03-2.682 C6.546,8.54,6.202,7.524,6.746,6.148c0,0,0.84-0.269,2.75,1.025C10.295,6.95,11.15,6.84,12,6.836 c0.85,0.004,1.705,0.114,2.504,0.336c1.909-1.294,2.748-1.025,2.748-1.025c0.546,1.376,0.202,2.394,0.1,2.646 c0.64,0.699,1.026,1.591,1.026,2.682c0,3.841-2.337,4.687-4.565,4.935c0.359,0.307,0.679,0.917,0.679,1.852 c0,1.335-0.012,2.415-0.012,2.741c0,0.269,0.18,0.579,0.688,0.481C19.138,20.161,22,16.416,22,12C22,6.477,17.523,2,12,2z"></path></svg><span class="wp-block-social-link-label screen-reader-text">GitHub</span></a></li>

<li class="wp-social-link wp-social-link-youtube  wp-block-social-link"><a rel="noopener nofollow" target="_blank" href="https://www.youtube.com/c/XojoInc" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M21.8,8.001c0,0-0.195-1.378-0.795-1.985c-0.76-0.797-1.613-0.801-2.004-0.847c-2.799-0.202-6.997-0.202-6.997-0.202 h-0.009c0,0-4.198,0-6.997,0.202C4.608,5.216,3.756,5.22,2.995,6.016C2.395,6.623,2.2,8.001,2.2,8.001S2,9.62,2,11.238v1.517 c0,1.618,0.2,3.237,0.2,3.237s0.195,1.378,0.795,1.985c0.761,0.797,1.76,0.771,2.205,0.855c1.6,0.153,6.8,0.201,6.8,0.201 s4.203-0.006,7.001-0.209c0.391-0.047,1.243-0.051,2.004-0.847c0.6-0.607,0.795-1.985,0.795-1.985s0.2-1.618,0.2-3.237v-1.517 C22,9.62,21.8,8.001,21.8,8.001z M9.935,14.594l-0.001-5.62l5.404,2.82L9.935,14.594z"></path></svg><span class="wp-block-social-link-label screen-reader-text">YouTube</span></a></li></ul>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
