Setting scrollable webview over an imageview?

Question

I have a transparent imageview that i want to set as thebackground of my app. If i do it as android:background="@drawable/awesome50" it streches the image, circles become oval and i lose aspect ratio. Thats why i want to put my webview over an imageview. So i wrote this xml code but it crashes when the app is run.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="20dp"
android:id="@+id/jokeslayout"
 >

 <ImageView
    android:id="@+id/ivAwesome"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:src="@drawable/awesome50"
    />

<ScrollView
android:id="@+id/SCROLLER_ID"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:fillViewport="true">

<WebView
    android:id="@+id/tvAnimalJoke"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:text=""
    android:textAppearance="?android:attr/textAppearanceLarge"

     />

</ScrollView>

And here is the LogCat

    09-19 03:37:01.853: D/dalvikvm(2988): GC_FOR_ALLOC freed <1K, 1% free 19526K/19684K, paused 48ms, total 48ms
09-19 03:37:02.213: I/dalvikvm-heap(2988): Grow heap (frag case) to 46.314MB for 28451572-byte allocation
09-19 03:37:02.483: D/dalvikvm(2988): GC_CONCURRENT freed 0K, 1% free 47310K/47472K, paused 75ms+66ms, total 266ms
09-19 03:37:03.913: D/AndroidRuntime(2988): Shutting down VM
09-19 03:37:03.962: W/dalvikvm(2988): threadid=1: thread exiting with uncaught exception (group=0x40a71930)
09-19 03:37:04.043: E/AndroidRuntime(2988): FATAL EXCEPTION: main
09-19 03:37:04.043: E/AndroidRuntime(2988): java.lang.RuntimeException: Unable to start activity ComponentInfo{com.mkaya.ultimatejokescollection/com.mkaya.ultimatejokescollection.AnimalJokes}: java.lang.ClassCastException: android.widget.ScrollView cannot be cast to android.webkit.WebView
09-19 03:37:04.043: E/AndroidRuntime(2988):     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2180)
09-19 03:37:04.043: E/AndroidRuntime(2988):     at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2230)
09-19 03:37:04.043: E/AndroidRuntime(2988):     at android.app.ActivityThread.access$600(ActivityThread.java:141)
09-19 03:37:04.043: E/AndroidRuntime(2988):     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1234)
09-19 03:37:04.043: E/AndroidRuntime(2988):     at android.os.Handler.dispatchMessage(Handler.java:99)
09-19 03:37:04.043: E/AndroidRuntime(2988):     at android.os.Looper.loop(Looper.java:137)
09-19 03:37:04.043: E/AndroidRuntime(2988):     at android.app.ActivityThread.main(ActivityThread.java:5041)
09-19 03:37:04.043: E/AndroidRuntime(2988):     at java.lang.reflect.Method.invokeNative(Native Method)
09-19 03:37:04.043: E/AndroidRuntime(2988):     at java.lang.reflect.Method.invoke(Method.java:511)
09-19 03:37:04.043: E/AndroidRuntime(2988):     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:793)
09-19 03:37:04.043: E/AndroidRuntime(2988):     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:560)
09-19 03:37:04.043: E/AndroidRuntime(2988):     at dalvik.system.NativeStart.main(Native Method)
09-19 03:37:04.043: E/AndroidRuntime(2988): Caused by: java.lang.ClassCastException: android.widget.ScrollView cannot be cast to android.webkit.WebView
09-19 03:37:04.043: E/AndroidRuntime(2988):     at com.mkaya.ultimatejokescollection.AnimalJokes.onCreate(AnimalJokes.java:72)
09-19 03:37:04.043: E/AndroidRuntime(2988):     at android.app.Activity.performCreate(Activity.java:5104)
09-19 03:37:04.043: E/AndroidRuntime(2988):     at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1080)
09-19 03:37:04.043: E/AndroidRuntime(2988):     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2144)
09-19 03:37:04.043: E/AndroidRuntime(2988):     ... 11 more

Now, if i change my xml as follows, this time the app doesnt crash but since the transparent imageview comes on top of the text the text also becomes transparent. I want the text to remain opaque. And we get the undesired effect as seen on the below screenshot.

The xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="20dp"
android:id="@+id/jokeslayout"
 >



<ScrollView
android:id="@+id/SCROLLER_ID"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:fillViewport="true">

<WebView
    android:id="@+id/tvAnimalJoke"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:text=""
    android:textAppearance="?android:attr/textAppearanceLarge"

     />

</ScrollView>

    <ImageView
    android:id="@+id/ivAwesome"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:src="@drawable/awesome50"
    />

and its undesired result (text that coincides with the image becomes transparent)

https://i.stack.imgur.com/5RpwM.png

Did you try cleaning your solution then building again? Sometimes if you do reordering in the xml with no code changes and push it to the device, it doesn't update the ID's in R.id. And it gets them out of order. — Randy, Sep 19 '13 at 05:35

score 0 · Answer 1 · edited May 23 '17 at 12:20

0

Try once with frameLayout insted of relative layout where you can design accordingly what you are looking for. this link will help you- Placing/Overlapping(z-index) a view above another view in android and http://developer.android.com/reference/android/widget/FrameLayout.html

edited May 23 '17 at 12:20

Community

1
1

answered Sep 19 '13 at 04:47

Pradip

3,189
3
22
27

score 0 · Answer 2 · answered Sep 19 '13 at 06:15

try this... webview has it's on scroll so no need to put it into scrollview

<RelativeLayout
android:id="@+id/jokeslayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="20dp" >

<ImageView
    android:id="@+id/ivAwesome"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:src="@drawable/splashscreen" />

<WebView
    android:id="@+id/tvAnimalJoke"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_centerInParent="true"
    android:text=""
    android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

Setting scrollable webview over an imageview?

2 Answers2