My friend made an application using javascript, and uploaded it to his website.
Now I'm trying to wrap it into a webview in android, and that's working fine in some ways.
The page is 480x320
But no matter what screensize I select on Android, there is a white space at the bottom on the webview. I have tried a lot of ways to make it zoom, but nothing worked.
My code at this moment is this
final WebView browser = (WebView)findViewById(R.id.webview);
browser.getSettings().setJavaScriptEnabled(true);
browser.loadUrl("http://page.xx");
I needed to scale-to-fit for the width and this variation of FunkTheMonk's answer worked well for me:
#Override
public void onPageFinished(android.webkit.WebView view, String url)
{
super.onPageFinished(view, url);
WindowManager manager = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics metrics = new DisplayMetrics();
manager.getDefaultDisplay().getMetrics(metrics);
metrics.widthPixels /= metrics.density;
loadUrl("javascript:var scale = " + metrics.widthPixels + " / document.body.scrollWidth; document.body.style.zoom = scale;");
}
wb.loadUrl("javascript:document.body.style.zoom = "+String.valueOf(scale)+";");
Where scale is a float, which you could calculate - I think in your case you want something like the following: browser.getHeight() / 480dp.
Load this Url after your webpage has finished loading.
Can you try to add :
browser.getSettings().setBuiltInZoomControls(true);
browser.setInitialScale(1);
browser.setPadding(0, 0, 0, 0);
And see if it's working ?
Related
I need to get the exact coordinates of a point relative to the screen regardless of the app window's dimensions or offsets/insets. The phone I'm developing on has a 1080x2280 resolution and android 9. I tried to find the screen dimensions using getDefaultDisply, but the notch height is getting subtracted from the screen:
// Testing with notch hidden; the screen is pushed down below it
DisplayMetrics displayMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics); // 1080x2062 (-notification bar height!)
getWindowManager().getDefaultDisplay().getRealMetrics(displayMetrics); // 1080x2192 (actual window height when notch is hidden)
How do I get the real resolution and the notch heigh when it's hidden?
Solution I found was to use getRealMetrics to get the height of the screen.
getWindowManager().getDefaultDisplay().getRealMetrics(displayMetrics)
This calculates the height of the screen by including the height of the notch as well. Works for both Notched Mode ON/OFF also for devices without Notch
I found my own solution that works on rooted devices only (requires Shell library):
public static int getCutoutHeight() {
CommandResult result = Shell.SU.run("dumpsys display | grep mCurrentDisplayRect");
String output = result.getStdout();
String regex = "^\\s+mCurrentDisplayRect=Rect\\(\\d+, (\\d+) - \\d+, \\d+\\)*$";
if (output != null) {
if (output.matches(regex)) {
Pattern patt = Pattern.compile(regex);
Matcher matcher = patt.matcher(output);
if (matcher.find()) {
return Integer.parseInt(matcher.group(1));
}
}
else Log.e(TAG, "Unexpedted outptu: " + output);
}
else Log.e(TAG, "Command failed: " + result.getStderr());
return 0;
}
Hopefully a better answer will come up soon.
I am currently creating an Android app that I want to support multiple screen sizes/densities. When I set up layouts in xml, everything looks fine across different screen sizes. However, there are rows I need to add programatically.
Whenever I add the rows, I can't seem to get things to look consistent across different devices. I believe using the dp unit when settings up heights, widths in xml, along with wrap_content and match_parent when appropriate, have allowed things to easily translate between different devices.
Programatically, when I try to set a layout height/width, I have been trying to convert the anticipated dp value to a pixel value. I've done so using this:
public static int convertToPixels(int value) {
Resources resources = mContext.getResources();
int x = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,value,resources.getDisplayMetrics());
return x;
}
Overall, the heights look ok, but the widths don't look good. For instance, the width of the row will look such that on a smaller device, the information neatly displays across the row, which is what I want. However,when I try to run the app on a tablet, for instance, the information will only stretch to half of the row, which doesn't look good. I want the sizes to scale and neatly display just like on the smaller device.
If anyone has any idea what my problem might be, I would greatly appreciate it. Below is the source for adding a row using java:
LinearLayout row = new LinearLayout(mContext);
row.setOrientation(LinearLayout.HORIZONTAL);
row.setId(Integer.parseInt(txn.getId().toString()));
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, convertToPixels(60));
params.setMargins(0, convertToPixels(1), 0, 0);
row.setLayoutParams(params);
row.setBackgroundColor(mContext.getResources().getColor(R.color.white));
LinearLayout imageLayout = new LinearLayout(mContext);
LinearLayout.LayoutParams imageParams = new LinearLayout.LayoutParams(convertToPixels(40), convertToPixels(40));
imageParams.gravity = Gravity.CENTER;
imageLayout.setLayoutParams(imageParams);
ImageView image = new ImageView(mContext);
if (txn.getTransactionStateID() == Constants.TXN_STATUS_OK) {
image.setImageDrawable(mContext.getResources().getDrawable(R.drawable.ok));
} else if (txn.getTransactionStateID() == Constants.TXN_STATUS_SUSPICIOUS) {
image.setImageDrawable(mContext.getResources().getDrawable(R.drawable.alert));
} else if (txn.getTransactionStateID() == Constants.TXN_STATUS_RED_FLAG) {
image.setImageDrawable(mContext.getResources().getDrawable(R.drawable.flag));
}
imageLayout.addView(image);
row.addView(imageLayout);
LinearLayout txnMiddleLayout = new LinearLayout(mContext);
txnMiddleLayout.setOrientation(LinearLayout.VERTICAL);
LinearLayout.LayoutParams txnTopParams = new LinearLayout.LayoutParams(convertToPixels(400), convertToPixels(60));
txnTopParams.setMargins(convertToPixels(10), 0, 0, 0);
txnMiddleLayout.setLayoutParams(txnTopParams);
TextView txnTopContents = new TextView(mContext);
txnTopContents.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, convertToPixels(30)));
txnTopContents.setText(txn.getTopLineContents());
txnTopContents.setTextColor(Color.BLACK);
// txnTopContents.setTextSize(convertToPixels(16));
TextView txnBottomContents = new TextView(mContext);
txnBottomContents.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, convertToPixels(30)));
txnBottomContents.setText(txn.getBottomLineContents());
// txnBottomContents.setTextSize(convertToPixels(12));
txnMiddleLayout.addView(txnTopContents);
txnMiddleLayout.addView(txnBottomContents);
row.addView(txnMiddleLayout);
LinearLayout txnBottomLayout = new LinearLayout(mContext);
txnBottomLayout.setOrientation(LinearLayout.VERTICAL);
LinearLayout.LayoutParams txnBottomParams = new LinearLayout.LayoutParams(convertToPixels(120), convertToPixels(60));
txnBottomLayout.setLayoutParams(txnBottomParams);
TextView amount = new TextView(mContext);
amount.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, convertToPixels(30)));
amount.setText(txn.getAmountStr());
amount.setTextColor(Color.BLACK);
// amount.setTextSize(convertToPixels(16));
TextView date = new TextView(mContext);
date.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, convertToPixels(30)));
date.setText(txn.getDateStr());
// date.setTextSize(convertToPixels(12));
txnBottomLayout.addView(amount);
txnBottomLayout.addView(date);
row.addView(txnBottomLayout);
txnList.addView(row);
I eventually found a solution. Instead of trying to set an exact width value, I set the width of the layout or textview to 0, and used layout_weight instead.
https://stackoverflow.com/a/3996104/4056947
I'm trying to put inline images in a TextView. Here goes my code:
ImageGetter imageGetter = new ImageGetter() {
public Drawable getDrawable(String source) {
Drawable d = ctx.getResources().getDrawable(Integer.parseInt(source));
d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
return d;
}
};
CharSequence votesString="124 votes";
votesString=Html.fromHtml(votesString
+"(<img src='" + R.drawable.icon_upvotes + "'/>)", imageGetter, null);
labelVotes.setText(votesString);
It works (see the image below) but I would need the image to be vertically centered. How can I do that?
Thanks
Instead of use HTML, you can use
labelVotes.setCompoundDrawablesWithIntrinsicBounds(0, 0, 0, R.drawable.icon_upvotes);
and playing a little bit with padding, using setCompoundDrawablePadding
Why you don't use android:drawableRight ?
// fetch window manager object
mWindowManager = (WindowManager) getSystemService(WINDOW_SERVICE);
// set layout parameter of window manager
WindowManager.LayoutParams mParams = new WindowManager.LayoutParams(
30, // width of layout 30 px
200, // height is equal to full screen
WindowManager.LayoutParams.TYPE_PHONE, // Type Ohone, These are non-application windows providing user interaction with the phone (in particular incoming calls).
WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL,
// WindowManager.LayoutParams.FLAG_WATCH_OUTSIDE_TOUCH // this window won't ever get key input focus
PixelFormat.TRANSLUCENT
);
mParams.gravity = Gravity.LEFT | Gravity.TOP;
//mParams.setTitle("Load Average");
LayoutInflater inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
mWindowManager.addView(touchLayout, mParams);
touchLayout.setOnTouchListener(this);
This is just a snippet of the code. My first issue was receiving touches in the view which this will do, however, the soft keyboard fails to open when touching edit text boxes in other applications while this service is running. I have tried various flags which fix the issue, but I loose the ability to register the touch event to the portion of the screen as displayed above in the code.
I'm out of ideas, does anyone have any idea of where I am going wrong, or an alternative solution for Android 4.2.2+?
try this:
Dialog dialog = new Dialog(this,android.R.style.Theme_DeviceDefault_Dialog_NoActionBar_MinWidth);
dialog.getWindow().setType(WindowManager.LayoutParams.TYPE_SYSTEM_ALERT);
dialog.setContentView(new EditText(this));
dialog.show();
Using some code from this question I have set up some code to detect when an android device is rotated. It works great for the asus tablet (4.0.3) and two simulators (4.0.3 and 2.1), but for the kindle fire (2.3.4), and droidx (2.3.4) it switches the width and height.
Code:
<script type="text/javascript">
var supportsOrientationChange = "onorientationchange" in window,orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
alert("The rotation is " + window.orientation + " and the resolution is " + screen.width + " x " + screen.height);
modRule();
}, false);
</script>
Output from asus tablet
Holding it in what looks like landscape:
The rotation is 0 and the resolution is 1280 x 800
Portrait
The rotation is -90 and the resolution is 800 x 1280
Output from Kindle Fire
Landscape
The rotation is 90 and the resolution is 600 x 819
Portrait:
The rotation is 0 and the resolution is 1024 x 395
output from droidx
landscape:
The rotation is 90 and the resolution is 320x488
Portrait:
The rotation is 0 and the resolution is 569x239
Is there a way I can
a) Make the javascript detect if it should use height instead of width or width instead of height
OR
b) Make the devices report the correct values for their width and height?
After looking for a while longer I found out that this is a bug with the 2.2 and 2.3 OS. I fixed the bug with 2.3.4 by putting this code in my app.
browser = (WebView)findViewById(R.id.webBrowser);
browser.setBackgroundColor(Color.BLACK);
WebSettings webSettings = browser.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setUserAgentString("Android " + android.os.Build.VERSION.SDK);//this is so the JavaScript knows what version of the OS I'm using
And then for detecting if I'm in landscape mode:
var uagent = navigator.userAgent.toLowerCase();
function isLandscape()
{
var width = screen.width;
var height = screen.height;
if (isBugged())
{
var temp = width;
width = height;
height = temp;
}
var landscape = width > height;
return landscape;
}
function isBugged()
{
return uagent == "android 10"
}
And if that wasn't confusing enough, when the body initially loads, it's right about if it's in landscape mode or not. So I had to bypass my own workaround.
<body onload="if(isBugged()){uagent = 'bypass';}/*code that depends on isLandscape()*/;uagent = navigator.userAgent.toLowerCase();">
It's a real pain, a lot more work than it should be. Especially since it works in 2.1 but not 2.3.4. Really frustrating, but that's what I have. At the moment, I only check for sdk 10, I'm going to add checking for the other bugged versions soon.