I am trying to design a UI for my Android app that will scale to any screen size on any Android phone or tablet, at least in portrait view if not landscape view. After extensive Googling and Stack Overflowing, I currently have 16 ImageButtons within a GridLayout. The GridLayout, together with a TextView and a SeekBar, make up the LinearLayout, which is the sole element of the ConstraintLayout. Here is my component tree.
Unfortunately, several components are getting cut off for smaller device emulators. For larger device emulators, there ends up being too much blank space and some of the components are too tiny. I had followed other posts' advice and set GridLayout's, TextView's and SeekBar's layout_width to "match_parent" and layout_height to "wrap_content." The layout_width and layout_height are both "wrap_content" for each ImageButton. I set constraints for the LinearLayout and assigned a layout_weight to each of its components, so why am I still having problems? I thought the "match_parent" and "wrap_content" settings were supposed ensure that every component would be visible on screen and in the right place. I have attached screenshots of my desired portrait view layout and actual portrait view layouts for a smaller phone and a larger tablet.
