We are writing an application for the T-Mobile MyTouch which is an Android based mobile phone. We have images that will be displayed on the default screen portrait mode (320 x 480).
Anticipating that the Android OS will be appearing on Netbooks with default landscape 16 : 9 screen format, what is the best way to handle images that are in a portrait mode format? In other words since you can't rotate the screen on these Netbooks, if you display a portrait mode image on landscape mode screen there will be large blank rectangles on either side of the image.
In terms of image resources within the application, such as is the case with background images, it is a common practice to have different image set for landscape and portrait mode, or even different screen sizes. Surely, you will adapt your layout to it, or at least have a good relative layout.
However, if you are wondering what to do when an image of an unknown size has to be drawn on the screen (e.g. in case of photo album application), it is fine to leave those black rectangles on both sides. Take a look at the behaviour of video player view on the Android Dev Phone 1. It will adapt the video frame height to landscape mode, and it will play the video in the landscape mode whether or not a portrait mode is more suitable.
You deal with it the same way you would deal with the user turning their phone sideways. This is as much a presentation decision as a UI one.
Remember Android supports using alternative layouts for identical Views. If you have a portrait layout e.g. res/layout/gallery.xml, you can create a landscape equivalent in res/layout-land/gallery.xml and Android will automatically load the latter layout file if the Activity is launched in landscape mode.
With the separate layout XML file, you can then arrange your image as you feel best fits the intent of your application (an application displaying medical images may well have different presentation priorities than one displaying a family portrait). You could for example just fill the background with a gradient, or more information that is otherwise hidden in portrait mode. It all depends on what you wish to achieve with your application and the lengths you are willing to go to to account for all possibilities.
But ultimately, provided the user can see the image in it's entirity without needing to flip their netbook on it's side, I imagine they'll be happy :)
You should design your screen with certain anchor points and then position the rest of the views in relation to those anchor points. For example if you have a screen layout which has a banner, a list of items and some buttons under the list then 2 of the ways these can be positioned on the screen:
Place banner at the top. Put the
list under it and then the buttons
under the list.
Place banner at
the top. Place the buttons at the
bottom of the screen and then the
list takes the space between the
banner and the buttons.
Layout 1) will have trouble with different screen sizes and the layout will look odd or may not appear correctly at all. Whereas, 2) gives you a better appearance for most screen sizes.
Related
I've been searching docmentation and forums, and from all I've read so far, I conclude that in order to support portrait and landscapce modes, I need to code two identically named layout XML files, one in res/layout, the other in res/layout-land. Each layout places the widgets corresponding to the mode.
But what if there is no corresponding layout in res/layout-land (or if the later doesn't even exist)?
From a simple app containing a single text view in a ConstriantLayout, I see that the layout correctly adapts to the device orientation when run on my physical phone.
However, when run on a virtual device (Pixel 4 XL API 28, if that matters), the view is not changed when I click on the Rotate left or Rotate right buttons.
But, after clicking on the rotate button, a rotate icon appears at the bottom right of the virtual device. Clicking on that rotates the view.
Basically, my questions are:
Why is the layout correctly rotated on my physical device despite the fact that no landscape layout is present?
Why does the virtual device not rotate the layout when clicking on the rotate buttons, but offers me a rotation by displaying a temporary rotate icon?
A pointer to some documentaiton where all this is described in detail would be nice. It sure must be documented; I just haven't been able to find it.
Devices have a setting to enable or disable auto-rotation - on newer devices, when this is off, that rotate button appears which allows the user to choose to rotate (i.e., manually rotate).
As per the providing alternative resources, the most specific matching resource is used. So if you had a layout in layout-land, it will take precedence over that same resource in layout. (but wouldn't apply at all if you where in portrait mode as -land would disqualify that alternative resource).
That means that alternative resources are entirely optional - you'd only use them if your layout needs to be very different from one configuration to another. ConstraintLayout, for instance, uses relative positioning (i.e., position a view relative to the parent or to another view), which is often quite flexible to different orientations, screen sizes, etc. thus removing any need to need an entirely different landscape layout for a simple layout.
I read that to support different screen sizes you have to make a new layout (with the same name) for the different screen sizes (small, large, xlarge, normal).
Im trying to start with the small one but for some reason whenever I create it, the preview gives me Wear Square screen (a squared screen) and I can't change it to a small screen (as shown in the picture)
What can be done for this to support a small screen sizes and a large ones?
Possibly you even do not have such small device to see your layout in action.
The one you select on screenshots is watches - they should apply another suffixes.
Like a alternative way - try to use percentage attributes in ContraintLayout and autoSize attributes for TextView.
Is there any way I can achieve the desired behaviour on rotation of the device, as illustrated in the following sketch (the wavy thing is a widget). Most likely this is something that would be controlled by the launcher, rather than controlled programmatically from any one app -- if so, is there any launcher that allows this?
Basically the reason I'm asking is because I want the widget to behave as illustrated (the widget is what I'm coding), even when the user's device is set to rotate the home screen on device rotation. Basically the only way I can see this working is if the grid layout is fixed relative to the physical screen, with the app icons just rotating within their box, and the widgets either updating their content for the new layout, or just keeping the previous content (so that the content rotates with the screen).
For updating of widget content, is there any way of detecting screen home screen rotation programmatically (different to screen rotation, since the home screen may not rotate)? This is relevant to me even for the "what I get" scenario, because the aspect ratio of the widget seems to change when the home screen is rotated, and I need to detect this and update the widget content to fit better.
dfdd
Use:
1. layout-sw480dp
2. layout-sw600dp
3. layout-sw720dp
You are unlikely to find a solution for this as the home screen (launcher) varies wildly in implementation. Many launchers don't support landscape orientation, and expecting the launcher to accommodate a widget which can expand in two different directions is simply asking too much of them.
For the launchers which do support landscape orientation, the widget should be repositioned for free without effort on your part. You may wish to detect which orientation the widget is in (such as via getResources().getConfiguration().orientation) when your provider is choosing a layout, setting up views etc, but that's about it.
I'm using the showcaseview library in my Android app to display a first time tutorial to new users. So far it's been fairly straightforward to get going; I have a number of different viewpager tabs at the top of the page that are getting consecutively showcased, which is great ... in portrait mode.
However when the device is rotated, or I start my app in landscape orientation, the title and content text that I have for my showcase is displayed at the bottom of the screen and it eventually overflows off the screen. The showcase text content isn't more than a sentence and I can't think I'm the first person to have this problem so I'm wondering if any one else has come across this and how they solved it?
I was thinking that since showcaseview calculates the best position for the text based on free canvas space that I could probably move my content up by reducing the radius of the showcase cirlce, although I have yet to try this.
Also, I don't want to restrict users by locking the orientation to portrait mode during the tutorial.
EDIT: I've temporarily settled for locking the screen to portrait orientation if I deem the height and width of the target device to be too small. It's not my ideal solution so I'm still keen to hear the thoughts of any showcaseview users out there.
I have built an appwidget with an square layout, and so it doesn't fit exactly in the standard widget sizes as recommended in http://developer.android.com/guide/practices/ui_guidelines/widget_design.html#sizes.
I chose a 3x2 size (android:minWidth="220dip" android:minHeight="146dip") as it is the smalllest that covers the widget's layout.
In http://developer.android.com/guide/practices/ui_guidelines/widget_design.html#design Google recommends:
"All widgets must fit within the bounding box of one of the six supported widget sizes, or better yet, within a pair of portrait and landscape orientation sizes, so your widget looks good when the user switches screen orientations"
My widget looks good in portrait mode. When switched to landscape mode (in the emulator) the layout is clipped. I tried inverting the minWidth and minHeight values in the provider's XML and then it looked perfect in landscape mode but clipped in portrait mode. Setting the size to 3x3 solves the problem, but then the widgets takes a lot of unnecessary space.
I know I can define different layouts in res/layout and res/layout-land, but in this case the layouts are not different at all, in both modes I want the widget to look square.
What I would need is something like 'xml' and 'xml-land', AFAIK this is not supported in Android.
Ideas?
What I would need is something like 'xml' and 'xml-land', AFAIK this is not supported in Android.
It is supported. All resource set qualifiers (e.g., -land) are supported for all resource types.
Whether it will help you is another matter entirely, as I am not aware that you can change actual app widget size on the fly this way.
Setting the size to 3x3 solves the problem, but then the widgets takes a lot of unnecessary space.
You are the one who is trying to force a particular pixel size (or, at least, aspect ratio). This will be fragile, as you are discovering. Furthermore, app widget cells are not guaranteed to be the same size on all devices and home screen implementations.
Hence, you are either going to need to choose an app widget size that gives you tons of extra space (your 3x3 scenario), or design a fluid app widget layout that adapts to the actual size that you are given (and therefore will not be square). Personally, I recommend the latter.