So I’ve searched high and low and not found anyone who has addressed this and really thought it through from both a native and Material Design perspective. I had to solve this issue recently and wanted to share with you all what I did. I hope it helps you guys. I’m also going to include the Sketch File so you can download it and use it quickly and modify it to your needs.
There are going to be times when a user loses connection and you do not, I repeat, DO NOT! leave your user with a dead app. This means they can click on stuff but without any data/internet/wifi connection it just goes no where. Either it spins or if it’s a hybrid or web page wrapped, it could even show, wait for it… a 404 error page. NO!!!! Make sure you account for this and give the user the option to retry to test for a connection and if it is a full page error where they’ve lost connection in the middle of something or on the way somewhere, to show them way to keep going or exit the app. Never leave them with a dead app. I can’t say that enough.
The designs below keep in mind patterns such as Empty States, Error Patterns and of course the native experience Android users have come to expect and deserve. Even though this particular scenario isn’t called out in Material Design we can still look beyond specifics to patterns and components and piece it together to keep it NATIVE.
Feel free to change the icon out, but everything else should stay the same. Your Full page version should have a Title of ‘No Data Connection’ or ‘Oops! You Don’t Have Internet’ something that signals the user what happened. It could also be the Tile of the page they were suppose to see such as ‘Terms and Conditions’. On the Dialog the Title in the App Bar should be whatever page they were on before their data was lost prompting the dialog to show. You have two options for dialog; one with a title and one without. It’s design decision that you can make based on what you feel is right for your flow and designs.