I'm working on a Honeycomb tablet app that needs to scale some UI views as the user interacts with it. So far I've been using Property Animations and it's working pretty well with ImageViews and TextViews but behaves strangely with a WebView.
webView.animate().scaleX(2).setDuration(400);
This code behaves exactly as I want with ImageView and TextView. It smoothly zooms the UI up to double its original size (in this case only in the X direction).
With a WebView it will scale the view to double its original size, but the viewport remains stationary. If I throw a translationX animation in there that doesn't affect the position of the viewport either. How can I get the WebView's contents to scale along with the view?
UPDATE: It turns out that the code I entered here works perfectly in the Android 3.1 emulator. The strange behavior I'm seeing only happens on the actual device. The device I have is a Verizon Motorola Xoom with Android 3.1. I unfortunately don't have any other devices to test it on so I don't know if it's model specific or just a quirk in the release build of the code.
I'm starting to think this is an Android or Xoom bug.
On this forum thread u can see the whole discussion.
In my case I animate().translationX(value) the frameLayout that contains the webView but the webView fails to draw it's content in the new position.
Myself and some people from the forum ran it on an advent vega running VegaComb 3.2 all of them getting the same bug. On the other hand running on several emulators with different screen sizes and pixel densities or an Asus Transformer it behaves the way it should.
Related
I'm working on a web application that uses Bootstrap 5.0 for the styling and I have a strange anomaly going on.
I have a collection of buttons (<a>...</a>) that are lined up in a horizontal pattern as shown in the attached image. As you can see, the desktop view looks great, but for some reason, looking at this on my mobile phone, the buttons are all crunched together indicating that the gap part of the class="d-grid gap-2 d-sm-flex" is being ignored by my mobile phone.
In my dev environment, I use the browser's dev tools (F12) to view it using Galaxy S5 in landscape mode which is the closest thing to my Galaxy A51 5G phone. My immediate suspicion is that perhaps it has to do with the fact that the gap-# in bootstrap translates to rem rather than pixels. I'm looking into that now. Until then please let me know if you have a more concrete answer.
Thanks a bunch.
Okay, I found an acceptable workaround, but I'm still interested if you know what the deal is with the gap-# not working on the mobile device. Here's what I did for now...
I removed all of the class="gap-#" and placed the following in the class of each button inside the foreach loop that places the buttons:
<button class="mb-2 mb-sm-0 me-0 me-sm-2" type="button" ... </button>.
This allows me to set the bottom margin of each button to have some space with the right side having no space while in mobile (portrait mode), but then have the bottom margins set to 0 and the right (end) margins set to have some space while in landscape mode and every size larger than the smallest size.
It seems a bit "hacky", but it works.
Please answer if you know a better way to get the gap-# to work in landscape mode of a small mobile device.
Thanks.
While testing our site on different devices we found a problem on recent Android versions. There is a bug with textures under the page, where the content ends (actually there is no any content where appears the bug). The bug appears only when the height of the page zoomed out is smaller then the screen of a device. Previous Android versions (4.1 etc) show there just white space (as Apple and Windows mobile devices also do), but 4.4 and later randomly repeats some portions of the site. We tried different viewport metatag options as well as different "height=100%" and "min-height=100%" tricks in CSS with no result. Any ideas on how we can fix it? Thanks.
Screenshot: http://i11.pixs.ru/storage/7/5/4/2jpg_2263155_16706754.jpg
I have created a fairly simple responsive website and have optimized it for mobile use using the meta tags. It works very well on desktops and on iOS phones and even the Galaxy S5. However, based on some tests using a browser compatibility program, the design falls apart on Android devices using 4.2 or lower (including the Samsung Galaxy S2 through 4, Kindle Fire 2, and Google Nexus). The images (doesn't seem to matter what type of file) will either become very vertically stretched or disappear altogether, no matter the file type. I have tried many things and can find no apparent difference between the images that are displaying and those that are not. Also, my header and footer are no longer where they are supposed to be. From what I can tell, the problem is that Android is not interpreting my css in the same way as ios does.
I have been able to fix the problem somewhat by dictating pixel dimensions for all of the photos instead of percentages, although this messes with the responsiveness of the site. This also fixes my header/footer problem although there is a very large space on the top and bottom of the mobile drop down menu and my logo in the footer (.svg) is distorted despite giving it dimensions.
I can't seem to find any information about this problem so I feel like it has to be an easy fix that I am overlooking.
The website is www.2015housingconf.com.
Thanks in advance!
I have used the draggable jquery of touchpunch: http://touchpunch.furf.com/ in my phonegap application for my android phone. I uploaded pictures of objects to drag over a picture. But whatever object I try to drag it always seems laggy, while on my iphone it works perfectly fine without lag. This has been tested on a Desire HD and Samsung Galaxy S2 so not the slowest types of android phones. Does anyone have an idea what is causing it and how to fix it? Thanks!
Have you set position : absolute for the element? This can increase performance greatly because anything with position : relative being animated/moved requires a redraw of the whole page (since ancestors and descendants can be affected by any changes). Using position : absolute only requires a redraw of the region that the element takes-up (so anything in-front or behind the element and the element itself).
I tested the demo page on my Droid X (almost two years old now) and it functioned fine, but it is a simple test.
I can't figure out the correct setting for a webview to make it fit width!
I've used in my HTML the viewport metatag with device-width option. In webview I've set WideViewPort and LoadWithOverviewMode to true. I've also tried to setInitialScale to 1.0.
All these seem to work in a few phones with android 1.6, 2.1, 2.2
However when I upgraded to 2.2.1 it doesn't work as wanted. I have an horizontal scrolling which I don't want! With a double-tap on the webview it fits, but not automatically when loaded.
Does anyone have any idea what Google changed in Android 2.2.1 webkit?
Not got a clue what Google have done, but I've got the same problem with all my mobile sites on Android 2.2.1 (worked fine with earlier versions).
Could really do with a solution for this as it's bloody annoying me and my clients.
I've tried varying the width property to see how that affects the rendering of the pages and found that in all cases the page renders incorrectly, always adding in a margin of some sort.
With the width set to 320px in the viewport meta tag my Desire HD reports the page width as being 369px.
I can get round the problem by setting initial-scale=1.15 but I've only checked that on my DHD and I really don't want to have to specially detect Android 2.2.1 devices to make them work correctly!
A little off topic but since updating my phone, in addition to the problem you've mentioned, the HTC weather widget no longer updates it's current location, my battery life has reduced by around 30% and my Wifi is playing up.
Having said that I'm so glad they've improved the HD video recording! Wow! (not) :p