Show Android Webview with transparent background - android

i would like to load an animated gif. I found out that i could load it in a WebView. Now i have created a class extending from WebView. It looks like this:
public class GifWebView extends WebView {
public GifWebView(Context context, String path) {
super(context);
loadUrl(path);
setBackgroundColor(Color.TRANSPARENT);
setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
}
}
Unfortunately the background is black. Do you know a solution? I tried it on Android 4.1.2. I have already searched on stackoverflow but I did not find a way to solve the problem.

You will need to change the background of the document you are providing. Since webview loads the document above its background

Related

Custom Tabbed Page Renderer Xamarin Android

So know how to set up a custom renderer (only partially apparently) with an OnElementChanged method. I followed this (http://forums.xamarin.com/discussion/17654/tabbedpage-icons-not-visible-android)
protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
{
base.OnElementChanged(e);
_activity = this.Context as Activity;
}
This gets hit, but it never displays the page afterwards.
Anyone have any ideas?
It is showing up now. I had to use the base class of TabbedRender rather than TabbedPageRenderer. I also had to add this.SetWillNotDraw(false) in the CustomRenderer constructor.
Here you can find a full TabbedPageRenderer ready to be modified. It comes directly from Xamarin.Forms Android.
Still I'm trying to set a different Font Size...

Android WebView gray play button

I am using the HTML5 video element for playing video in the Android WebView. And this works great for me but the only problem with using this is that the video element automatically a gray play button adds.
I've tried searching for an API and could not find anything that helps my case. I also tried using CSS with the following style:
video.mobile_controls::-webkit-media-controls-fullscreen-button
{
display: inline !important; // Also used "display:none"
}
Further i tried poking in the shadow dom but i couldn't find anything related to this.
So the question is how do i remove this gray button.
Here is an image for reference:
The issue is the video poster. But there's a better way of fixing this by extending from the WebChromeClient and overriding the getDefaultVideoPoster();
Here is the solution:
import android.graphics.Bitmap;
import android.webkit.WebChromeClient;
public class WebChromeClientCustomPoster extends WebChromeClient {
#Override
public Bitmap getDefaultVideoPoster() {
return Bitmap.createBitmap(10, 10, Bitmap.Config.ARGB_8888);
}
}
And then using this client instead by doing:
WebChromeClientCustomPoster chromeClient = new WebChromeClientCustomPoster();
mWebView.setWebChromeClient(chromeClient);
After some dirty hacks we found that misusing the poster attribute fixed this issue. We resolved this issue by doing the following:
videoElement.setAttribute("poster", "nope");
The video element will use the value "nope" as its poster. And because nope is not a valid URL the video element will not replace the poster and will not show a poster.
Our team had tried to solve the same issue for a while too. What ultimately worked for us is setting this setting on the WebView webView.settings.mediaPlaybackRequiresUserGesture = false. Hope it helps others running into this too.

How to set image/WebView height/width to match the parent?

Hello all and good day.
I found it easy to display GIF animations using WebView as it is fairly easy and simple.
Now the GIF I'm displaying is of the size 800x800px. What I want is that this GIF to fit the screen available to it, possibly to match parent something like that, so that one does not have to scroll or zoom in/out the picture. It just fits automatically on any screen available to it.
My device used for experimenting is: GT-I9100/Samsung Galaxy SII which has the screen size of 800x480px.
Here's a snippet of code from my main activity:
HToad view = new HToad(this, "file:///android_asset/hypnotoad.gif");
view.setInitialScale(30);
view.getSettings().setUseWideViewPort(true);
setContentView(view);
This is the HToad class:
import android.content.Context;
import android.webkit.WebView;
public class HToad extends WebView {
public HToad(Context context, String path) {
super(context);
// TODO Auto-generated constructor stub
loadUrl(path);
}
}
I tried using various settings like LayoutParams and IntialSize etc, none of which helped me to achieve what I want.
I'm using JAVA for WebView, not defining WebView in XML.
Thank you in advance.
Try to load your gif with the loadData method instead loadUrl and add a css style like this:
<style type='text/css'>
img {max-width: 100%;height:initial;}
</style>
And in the end you must get something like this:
setBackgroundColor(Color.TRANSPARENT);
loadData("<style type='text/css'> img {max-width: 100%;height:initial;}</style>" +
"<img align='middle' src='file:///android_asset/hypnotoad.gif'/>", "text/html", "utf-8");
reload();
I hope I helped you.

Create a picture on Android

I want to create a picture to send a website on android. But It must be background.. let me explain more..
the picture is what i want http://e1203.hizliresim.com/v/r/3s06c.png
I have some photo which I want to put on the main picture. and I'll write some text near of photos.. and will create (draw)a big main photo.. But It must process background..
I think that I need to use drawing but I dont have any idea how can I create like that picture..
I hope I could explain my problem..
You need to use the Canvas class:
You need to do something like this:
class Panel extends View {
public Panel(Context context) {
super(context);
}
#Override
public void onDraw(Canvas canvas) {
canvas.drawBitmap(...);
canvas.drawText(...);
}
}
Look at this tutorial for details.

How to make a web app for android?

I’ve been making android apps for like 4-5 days now. So i’m wondering if you know how I can make a web app? I have been looking through many tutorials, but none shows directly how I can make an app that displays the content from a website, and that I can decide what I want and don’t want to display. So I really just want to customize a website into an app and make my own layout. I know how the WebView and WebContent works and all that stuff, but I don’t know how I can do what I described here.
So what do I need to learn and know to make an app like that?
You can do it by fill your xml layout with EdidText for the url and Buttons for Go, back, forward and so on, finally you need webview in this xml layout.
for the java code you can check the below sample.
public class SimpleBrowser extends Activity implements OnClickListener {
WebView myBrowser;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.simplebrowser);
//here the code for initialize and set yourwebView Settings.
myBrowser= (WebView) findViewById(R.id.wvBrowser);
//the below line to enable javascript if you want that
myBrowser.getSettings().setJavaScriptEnabled(true);
//here another settings could be enabled for you your webview
myBrowser.getSettings().setLoadWithOverviewMode(true);
myBrowser.getSettings().setUseWideViewPort(true);
try {
//here the default web page
ourBrow.loadUrl("http://www.google.com");
}catch (Exception e){
e.printStackTrace();
}
}
}
and for sure you need to implements your buttons using onClicklistener to be suitable for your idea.
https://www.youtube.com/watch?v=lkadcYQ6SuY&index=89&list=PL2F07DBCDCC01493A
https://www.youtube.com/watch?v=PQ94MmEg0Qw&index=90&list=PL2F07DBCDCC01493A

Categories

Resources