1. Layouts and themes
Let's learn about layout functions that allow inputs and outputs to be visually arranged (or "laid" out) in the UI. A well chosen layout makes a Shiny app aesthetically more appealing, easier to navigate, and more user-friendly.
2. Default Shiny app layout
The default Shiny app layout, shown here with the default Shiny app example, a histogram of the wait times between eruptions of the geyser Old Faithful at Yellowstone National Park, simply stacks the elements of your app on top of one another, one by one. You can see here that the title is on top of the selector, which is all on top of the actual histogram output.
While the default layout might be fine for simple apps, as they start to get more complicated, it would be nice to be able to control where elements of the app end up.
3. Sidebar layout
One of the simplest layouts you can choose is a sidebar layout. You can see that the title is still at the top, justified left, but the slider is now in the sidebar panel at the left, while the histogram is in the main panel to the right. You might recall that you already made use of this layout in Chapter 1.
To adjust the layouts, adjust the code in the UI. The code that creates the sliderInput and outputs the plot is overall wrapped in a sidebarLayout function. The slider itself should be put into sidebarPanel, while the plotOutput function should be put into mainPanel. These small adjustments to your code go a long way towards making your app more aesthetically appealing.
4. Tab layout
If you want to display multiple things in your app, such as two plots or a plot and a table, it can be visually noisy to stack them on top of one another in the main panel. Instead, you can consider using a tab layout, like shown here. One tab has the histogram of Old Faithful wait times, while the other shows a histogram of eruptions.
5. Tab layout
Technically, a tab layout is just an extension of a sidebar layout, so that function is still present in the UI, wrapping all of the code, and the sidebar panel also remains unchanged.
To add the tab layout, you have to add a tabsetPanel inside of the main panel. Each individual tab has to then be created with tabPanel, and you should give each a label.
6. Theme selector
In addition to layouts, the shinythemes package allows you to make use of prebuilt themes that allow you to change the color scheme of your app.
If you're not sure what theme you want to use, you don't have to cycle through them by changing the code. Instead, you can add the themeSelector function to your UI, which will add a dropdown selector in the upper right corner of your app and allow you to see what all of the pre-built themes look like when applied to your app.
In this example, you can see the superhero theme applied to the Old Faithful histogram app.
7. Adding a theme
Once you've selected a theme you're interested in using the themeSelector, you can add it to your app using the theme argument in the UI. If you're interested in using the same superhero theme, just add this line, here inserted between the title and the sidebar layout code, which is good Shiny app coding practice. The themeSelector dropdown will now disappear, and the app is hard-coded with the chosen theme.
8. Let's practice!
Now that we've learned about how to use layouts and themes to beautify Shiny apps, let's go practice! Remember that all tweaks to layouts and themes happen
in the UI, and you dont have to touch the server side code.