Develop Reference

Design view in Android Studio scrunched to the left

Hopefully this is something simple and stupid. I am editing an existing Android app for an embedded device that communicates with Bluetooth. The manufacturer of the development kit provides the Android code so that you can edit it how you want. The device (Silabs Thunderboard Sense 2) just transfers numeric information (sensor data) from the device to the phone.
I have been able to edit the actual code to change labels and values to what I want, but now I want to rearrange/add/eliminate some buttons in the screen layout. The app generates these buttons when downloaded to the phone, but I'm unable to see them when I open the .xml files in "design view" in Android Studio. At first I thought the buttons weren't there at all, but then I noticed that there is a blue line down the left side of the sample screen. When I click on it, I get the attributes etc., but no matter what I try, I can't seem to get the button to show. I have tried pulling it, double-clicking it, right-clicking it, changing attributes...nothing works. I'm thinking that it's a setting that needs to be tweaked, but I'm afraid to just go changing everything and making it worse. Here is what it looks like:
the red circle indicates where the mysterious blue line appears.
It's like the image is scrunched to the left with no width. It should be a square image button with a small icon, a label and some live data. Any ideas?
Don

try setting the FrameLayout width policy to match_parent.
EDIT
Also check your parent LinearLayout width and height policy is `match_parent'.

Android Webview: Smaller Display Size Breaks Layout

I have an web app that's basically just displaying mobile website in an Android Webview, with some native bits for handling notification & navigation headers.
The issue is, when I change the Display Size setting (under Display) in an Android phone to anything smaller than Default, the content will be squeezed to the right side and left a blank space. I did a check with dev tool, and somehow the CSS's width is set to 66.67% of parent's by Android (in default it's 100%) & a minor left padding is also added. However, if the Display Size setting is larger than default, there is none / very minor style degradation.
The interesting part is when similar app is made in iOS (just display mobile site), there's no issue at all after changing the Display Size. So I'm pretty certain that the fix is limited to Android.
Is there any guidance to add code to anticipate these changes, or at least, completely disable the Display Size setting's effects?
*Edit:
What I've tried & failed:
Setting "width=device-width, initial-scale=1" in the website
Set loadWithOverviewMode and useWideViewPort to true
Combination of both of them

Solution is simple actually: there's a piece of old CSS code in the website that overrides CSS values when the width of the display is above certain threshold.

React Native justifying views vertically without me setting it to

I'm experimenting a login screen: https://snack.expo.io/#lucaszanella/login-screen-test-zanella
(some image sources were removed because I cannot upload them to snack and others I changed to random images from url)
Open login_screen/components/Form.js. Well, as you see, the UserInput inputs and SubmitButton button are spaced, but I didn't tell them to. I already tried all justifyContent properties and they don't even move the components. Looks like they are justified (not even equally).
What is going on? If you know some concept about flexbox that I'm getting wrong please tell me.

Children of a flexbox share the parent's flex area in proportions. You have set Logo to flex:3, Form to flex:7, and SignupSection to flex:1. Thus, 7 + 3 + 1 = 11, therefore, Logo takes 3/11, Form takes 7/11, and SignupSection takes 1/11 of the parent's flex area in the specified direction.
Within Form, you've set UserInput to flex: 1. So the children (UserInput) of Form will equally share (and fill up) the flex area (7/11) that Form has acquired from its parent. This is why you see the space between UserInputs. To understand this better, try replacing UserInputs with simple Views with different background colors and you'll see what's going on.
Solution: Reduce flex on Form and apply margins if required.
EDIT
Alternatively, you can set fixed height (in case of flexDirection:'column' of parent) or width (in case of flexDirection:'row' of parent) to the children.
Hope this helps.

AIR - Get SoftKeyboard Screen Size

In my AIR mobile application I am trying to resize my application when the softkeyboard is activated so that the bottom of my application will not be covered by the keyboard. From what I have read this is suppose to be the default behavior but I have never been able to get it to work and I have tried everything I have found online, instead the keyboard overlays ontop of the application.
I then decided I would resize my application myself based on the height and y position of the softkeyboard only to find out that the built in AIR methods for determining the height and y position of the keyboard are not correct (YAY). I even tried using a 3rd party ANE for determining the screen height by FreshPlanet and their code does not always return correct values either. I feel like this shouldn't be that hard to figure out but I am stuck. Please help!
TLDR:
How can I resize my application to be the remaining screen space when the softkeyboard is activated?

What renderMode are you using? (in manifest.xml) I found that only cpu is working to get the correct keyboard height.
Also try to set softKeyboardBehavior to none: <softKeyboardBehavior>none</softKeyboardBehavior>

<p> style incorrect unless background color applied

I am developing a mobile site, so I'm using CSS to make things as liquid as possible.
I'm having an odd difficulty. Within a div container, I have a <p> that is supposed to fill the width of the div. I've tried width:auto, width:100%...nothing seems to work on Android Browser. Here are examples:
iOS (Correct):
Android (Incorrect; not fully spreading; added more text than iOS version so you can see what I'm talking about):
Both screenshots taken from respective emulators.
Here is the odd thing, though... If I give the class applied to these <p>'s a background color, the Android browser then allows the <p> to fill the full width of its parent div (looks identical to iOS). The really odd part, though, is that if I make the background color transparent (I thought I had it tricked lol), then it goes back to doing as shown in the example.
So, I have a <p> only properly referencing its CSS if it has a background-color applied... am I stupidly overlooking something, or is this some issue with Android Browser? Any ideas how to fix it?
Thanks for your time.

While it may not be the best solution, I finally just made an "invisible" transparent png and set it as the <p>'s background, and that fixed the issue... if you can call it fixing. :) I have to assume it is some kind of error in Android's Browser, as I tried this in every browser, desktop and mobile.

It is the intended behavior of Android phones. It will enhance the readability of copy text, since you are not forced to scroll sideways if you pinch zoom the page.
It can be managed on your own phone maybe in the browser's settings, but that is not the solution you want.
It can be 'fixed' by the workaround of applying a background-image to the element you want.
This can be done with a base64 encoded data url:
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);

In your mobile browser's settings, look for something called "Auto Fit Pages" and disable it. This setting (in Android) is ON by default. Turn it off and your text will flow as it should.

the div or any element above this could be the issue.
if you give fixed width to the p element, does it work well ?