What is a UI flow diagram? How does it change with the layout shown by the application currently?

A UI flow diagram or a User interface-flow diagrams are typically used for one of two purposes. First, they are used to model the interactions that users have with your software, as defined in a single use case. For example, a use case can refer to several screens and provides insight into how they are used. If the application in question is in the dual-pane mode, clicking on an item on the left pane will simply display the content on the right pane. Similarly, if it is in single-pane mode, the content should be displayed on its own. Some actions may have a different result depending on the current layout. If the app is in dual-pane mode, it should set up the action bar with tabs for navigation, whereas if the app is in single-pane mode, it should set up navigation with a spinner widget.