iframe is not display correclty in android webview - android

I am using Webview to display iframe in android. Below is my java code
String html = "<p><blockquote><iframe height=\"740\" src=\"https://docs.google.com/document/d/e/2PACX-1vSCZgt7yvY-9aB3RSvQqhYXE0EZ_Lp7AMTMmxlGfJP04iHBjX4A7dVVrc-b9OBX3kLWp_dLyUvNjhLa/pub?embedded=true\" width=\"100%\"> </iframe></blockquote></p>";
webview.loadData(html, "text/html",null);
below is my xml
<LinearLayout
android:layout_width="match_parent"
android:background="#color/colorWhite"
android:layout_height="match_parent">
<WebView
android:id="#+id/webViewPage"
android:background="#color/colorWhite"
android:layout_width="fill_parent"
android:paddingBottom="53dp"
android:layout_height="wrap_content"
/>
</LinearLayout>
But when we run code its look like below screen
How its show margin or padding from left and right?
How can we resolve this issue?

u should make your WebView heght and width are match_parent
<LinearLayout
android:layout_width="match_parent"
android:background="#color/colorWhite"
android:layout_height="match_parent">
<WebView
android:id="#+id/webViewPage"
android:background="#color/colorWhite"
android:layout_width="match_parent"
android:paddingBottom="53dp"
android:layout_height="match_parent"
/>
</LinearLayout>

You need to change the width=\"100%\" to a value because It will not load correctly.
Just say width=\"100px\" by example and you will see that the borders are gone.

Related

put the logo webview - Android

I want to put a logo on the corner of the webview. Because I don't want users to download pdf while pdf is loading. So I want to add a logo to the top right corner of the webview. But when I add the logo it stays under the webview and is not visible. How can I show it on top of the webview and in the top right corner?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="...">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_home"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="Home" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?actionBarSize"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabTextColor="#color/white"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:background="#color/colorPrimary"
tools:openDrawer="end"
android:layoutDirection="ltr">
</com.google.android.material.tabs.TabLayout>
<ImageView
android:id="#+id/imageAntremanLogo"
android:layout_alignTop="#+id/webviewAntreman"
android:src="#drawable/logo_kopya"
android:layout_width="100dp"
android:layout_height="100dp" />
<WebView
android:id="#+id/webviewAntreman"
android:layout_below="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
Ok so I noticed you already received some answers for your question but both seemed to miss some points I noticed hence decided to post an answer.
First, as #Ryan's answer mentioned you will need to put your ImageView after WebView in order for it to be drawn on top, otherwise it would always be below.
Second, upto this your ImageView should be on top-left, but since you require it to be on the Top-Right corner you will need to add
android:layout_alignEnd="#+id/webviewAntreman"
So your ImageView code written after the WebView woul be something like this.
<ImageView
android:id="#+id/imageAntremanLogo"
android:layout_alignTop="#+id/webviewAntreman"
android:layout_alignEnd="#+id/webviewAntreman"
android:src="#drawable/logo_kopya"
android:layout_width="100dp"
android:layout_height="100dp" />
As a note, android:elevation as in #Rumit's answer requires minimum API level 21, so if your app supports version below Android 5.0 this property won't work on those otherwise it's fine.
In the rare case none of this works, make use of a FrameLayout for what you need to achieve
Put the ImageView tag after the WebView tag in the XML. Views are drawn with the last one on top.
You can try with android:elevation="5dp" property on ImageView to elevate it from WebView.
<ImageView
android:id="#+id/imageAntremanLogo"
android:layout_alignTop="#+id/webviewAntreman"
android:src="#drawable/logo_kopya"
android:elevation="5dp"
android:layout_width="100dp"
android:layout_height="100dp" />

Webview + ListView one overlays the other in Activity

So I'm having this XML File:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/viplounge"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<WebView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/wview"
android:orientation="vertical"
android:background="#android:color/black"
/>
<ListView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/viplist"
android:layout_below="#id/wview"
/>
</RelativeLayout>
Where the WebView is loading Text from my strings.xml, the text is formatted with HTML for a better displaying experience and is quiet long, so it doesn't fit on the display and the WebView is therefore scrollable.
Under the WebView(Text) I'm parsing a XML File with some data from the Internet which is displayed in a ListView.
So my problem is, that I can't get the ListView below my WebView plus I want to manage it like that: When I'm done scrolling in my WebView I want to show the ListView below. So the User has to go down the Text/WebView and then he can read the information from the ListView.
The App is basically describing a location and under the description there should be the list of dates when the location is available and when not. Just to get you an Idea of what I'm doing here.
you can use NestedScrollView
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/viplounge"
android:layout_width="match_parent"
android:layout_height="match_parent">
<WebView
android:id="#+id/wview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/black"
android:orientation="vertical" />
<ListView
android:id="#+id/viplist"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/wview" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>

ScrollView Scrollbartrack visibility

I want to remove the shadow(scrollbartrack) shown below scrollbarthumb.
But unable to do it. I tried to set android:scrollbarTrackVertical="#null"
Please ignore the black part.
You can do it using XML or code.
In XML:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/yourScroll"
android:scrollbars="none" <!-- add this -->
>
or in your code:
yourScrollView.setVerticalScrollBarEnabled(false);
yourScrollView.setHorizontalScrollBarEnabled(false);
Edit
You have changed the question with your new image , for that task add drawable image as your requirement to android:scrollbarThumbVertical
<ScrollView
android:scrollbarThumbVertical="#drawable/line" <--like this-->
android:id="#+id/my_scroll"
android:layout_width="match_parent"
android:layout_height="500dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="300dp">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="400dp">
</LinearLayout>
</LinearLayout>
</ScrollView>
Note : My drawble image contain transparent area(in left and right sides) ,thats why its bit right from the edge

How to make FloatingButton stick to the bottom of WebView inside CoordinatorLayout?

I need to make FloatingActionButton always stick to the bottom of my fragment where I display WebView. The problem is that the button in my current XML is cut in half and I can't manage to fix it. Here is my layout.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorBackgroundWhite"
tools:context=".fragments.CpuComparisionFragment">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<WebView
android:id="#+id/web_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/button_compare"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_marginBottom="#dimen/fb_margin_16dp"
android:layout_marginEnd="#dimen/fb_margin_16dp"
android:alpha="0.7"
android:src="#drawable/ic_compare" />
</android.support.design.widget.CoordinatorLayout>
</FrameLayout>
What am i doing wrong? Any ideas how to fix this? Here is screenshot how my app looks now.
It seems the android version installed on the device you're testing your app on doesn't support some of your xml attributes. Anyways, replace the FAB code with the below snippet. I hope it work for you.
<android.support.design.widget.FloatingActionButton
android:id="#+id/button_compare"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="#dimen/fb_margin_16dp"
android:layout_marginEnd="#dimen/fb_margin_16dp"
android:alpha="0.7"
app:layout_anchorGravity="bottom|right|end"
android:src="#drawable/ic_compare" />
Try to add android:fitsSystemWindows="true" to your FrameLayout .

Why is my Webview resizing itself?

I'm a noob to android development and my webview resizes itself whenever i try to play video. In order to make the webview play video i had to add the line of code:
youtube.getSettings().setPluginState(PluginState.ON);
In my layout, I have my webview above a listview. However, now when the webview plays video it becomes fullscreen and covers listview. this was not happening before i added the line above. How do I stop my webview from resizing itself? Any help is greatly appreciated?
Here is my layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/LLvideos" >
<WebView
android:id="#+id/webViewyoutube"
android:layout_width="match_parent"
android:layout_height="350dp" >
</WebView>
<!-- List view -->
<ListView
android:id="#+id/videolist"
android:layout_width="fill_parent"
android:layout_height="200dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:divider="#00000000"
android:dividerHeight="0dp" >
</ListView>
Here is my video link
youtube.loadUrl("http://link.brightcove.com/services/player/bcpid1683318714001?bckey=AQ~~,AAAAC59qSJk~,vyxcsD3OtBPHZ2UIrFX2-wdCLTYNyMNn&bclid=1644543007001&bctid=1858951133001");
Sounds like you are have a scaling issue. Try youtube.setInitialScale(50). This should work.
Try setting the webview layout like this:
webview.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

Categories

Resources