Develop Reference

View too large to fit into drawing cache on Webview inside scrollview

I am working on a scrollview that contain a webview, it works perfect on the 2.3, 4.1 , but when I try it on the 4.4 emulator, it show
View too large to fit into drawing cache, needs 5744640 bytes, only 3932160 available
The webview is just blank.
And it is the layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:overScrollMode="never" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp" >
<TextView
android:id="#+id/newsTitle"
android:textSize="18sp"
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/last_update" />
<WebView
android:id="#+id/newsContent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/last_update" />
<TextView
android:id="#+id/newsDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/last_update" />
</LinearLayout>
</ScrollView>
</LinearLayout>
I tried to use mywebView.setDrawingCacheEnabled(false); but it just return the same warning.
Also, I find the problem occur when the webpage is overscreen size , but when I show it , I find the layout of the web is slightly different, on 2.3 , 4.1 , it can simply start the new line if the word is exceed the page, however , in 4.4 it does not , so part of the word is out of the screen .
How to fix it? Thanks

My Suggestion is give layout height to webview so that it wont exceed the your specified height
<LinearLayout
android:id="#+id/webview1"
android:layout_width="fill_parent"
android:layout_height="150dip" >
<WebView
android:id="#+id/sampletxt"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
In your activity just include the below lines
SampleTxt.getSettings().setLoadWithOverviewMode(true);
SampleTxt.getSettings().setJavaScriptEnabled(true);
SampleTxt.loadData("Your Text To show the Webview",
"text/html; charset=UTF-8", null);
It will work fine. any doubts let me know

I suggest you to use your own WebView client. In android we can use WebViewClient or WebChromeClient. Using this you would get better result that you want. Just try it and check.

For WebViews in Android, you should start from the assumption that things are buggy. They shouldn't be, but as you discovered, if you make the background a flat color, it "resolves" the issue.
Having said that, it is still a good idea to keep in mind that you're dealing with a wide range of mobile devices with wildly different processing and memory allocations when you're coding for Android phones, so always be sure to test on a real device.
If you don't have at least 4 or 5 different physical Android devices that you can test on, then look around for services that allow you to use their devices to test remotely. Never believe that because you have tested something in an emulator, it will behave the same on a real device.

Android text gets clipped on some devices

I am facing an issue in one phone (till yet). My app uses Hindi fonts. It shows well on emulator, tab, many other phones too. But one of the phone which I am using for testing purpose is showing the text going cut from sides.
I tried almost everything for putting it in the right order but none worked. Here posting the screenshots of two of my test phones and the text.
The screenshot with error:
The screenshot of other phones: and the expected one too:
What could be the reason and how can I solve it? Please let me know!!
TextView configs I am using:
<TextView
android:id="#+id/A_lbl_mandir"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/Abt_mandir"
android:textAlignment="center"
android:textColor="#80000A"
android:textSize="35sp" />
EDIT: My complete activity xml:
<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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:layout_width="wrap_content"
android:id="#+id/text"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="#string/hello_world" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#id/text" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:padding="5sp"
android:text="#string/test"/>
</ScrollView>
</RelativeLayout>
I have tried and deleted many other things especially for this phone. But unable to solve the issue!

this occurs in 4.1.2 and its documented as a bug in Google which they have fixed in 4.2.
https://code.google.com/p/android/issues/detail?id=34432
This happens with unicode fonts where the Android OS is not able to calculate the length of the text.

try this.
<ScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_below="#id/text"
android:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:gravity="left"
android:padding="5sp"
android:text="#string/test"/>
</ScrollView>

All right! Found another phone with same issue. In that phone too, the text was clipped. I guess there is some problem with the phone. Because even popular apps like Whatsapp has got the same problem on that device. The Hindi text was cut same as shown in the images above.
Possible fix for that issue: (if someone gets that n what I am doing now.) I realised that browser shows the hindi fonts well on that. So better make a native app on html, javascript especially for such devices and view the HTML using WebView.The application will get a little slow but we have to do it Until we get the actual problem creating it.
Please note: this is not a solution, but a fix to make that work. Better known as "JUGAAD" in hindi.

On some phones (specially on Samsung ones) some custom fonts are cuted off (or clipped). I had this with custom italic font. Some say that you can edit font to add some kind of padding (i can't confirm that because my lack of knowledge of editing fonts) but:
- EditText/TextView add some padding from xml
- Ellipsize (on some devices messing with this helps displaying text correctly)
Also could you post screenshot with enabled developer options to draw layout bounds, this could help to resolve your problem if above solutions won't help

Android nested layout

I am developing my first Android app. Although I have 15 years of Java software development experience, Android is new to me. My desired look is a background image with other images on top of it, as well as labels and phone numbers. It seems like the best way to accomplish this is a Linear Layout for the background image, with a nested layout for the other fields on top of that. I have searched online and cannot find any sample code on how to accomplish this. Any recommendations would be greatly appreciated. Thanks in advance.

What are you using to develop? If you are you using Eclipse with the Android SDK this is super easy. Put the desired picture in the appropriate drawable folder, go to the graphical view of layout that corresponds to your activity, on the right side of the screen there is a list of all the properties, find background, then select your picture from drawables. You can also do this from the xml using android:background="#drawable/yourPic". This way you don't have to worry about having things layered on top of it.

I think you should go through followings:
1. http://phandroid.com/2011/05/11/10-tips-for-android-ui-design/
2. http://mobile.tutsplus.com/series/android-user-interface-design/
3. http://coding.smashingmagazine.com/2011/06/30/designing-for-android/
4. http://android-developers.blogspot.in/2011/09/thinking-like-web-designer.html

If I got, something like this can work:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<stuff>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<stuff>
</RelativeLayout>
<stuff>
</RelativeLayout>
I used it in an app, and made the trick.

First of all, RelativeLayout is the best layout to use. It depends on your design.
If your design says to keep all the views either vertically OR horizontally, you can use LinearLayouts in between.
My suggested way:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_parent"
android:orientation="Horizontal">
<View1 />
<View2 />
</LinearLayout>
</LinearLayout android:id="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="wrap_parent"
android:orientation="Vertical"
android:layout_below="#id/layout1">
<View3 />
<View4 />
</LinearLayout>
</RelativeLayout>
Which will yield you something like this

xml / linearlayout not showing properly on device

I'm sorry if this question's been asked already but I wasn't able to find any answers. Here's some background context:
I was testing my app on my Nexus 4 to fix some minor bugs. However, just as eclipse was launching it, there was a powercut in the area, switching my computer off. Eventually, once the power restored, I thought I would set a font by .setTypeFace() before running my app again but this made my app crash when I did run it. So after fiddling around with the code and finding no fix, I decided to get rid of the whole font and just run the app with the bug fix. However, this made my app look like this.
Now on eclipse, the graphical layout is showing this. My app before today was showing like the graphical layout perfectly fine. No errors are showing up on eclipse.
Why has this happened and how do I fix this? Could I have corrupted the whole file?
Thanks.
EDIT: the xml file:
<?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:background="#drawable/testbg"
android:orientation="vertical"
android:weightSum="100" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="33" >
---- bunch of textviews ----
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="57" >
---- More Textviews ----
</RelativeLayout>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="10"
android:orientation="horizontal"
android:weightSum="3" >
---- three buttons ----
</LinearLayout>
</LinearLayout>

I finally figured it out - it was the background. I must've obviously messed up the 9.png somewhere because it fixed itself once I got rid of the background.

Normally this happens with my apps when i change the font , some fonts appears like this in the layouts , some play around i use is adding a character or a dot after tab space , and it works , however double check the font issue again ,try to set the font again or to set another font.

Graphical issue with spinner control in Android

My first (old) Android app (Suspension Calculator) is showing a problem I cannot find a solution for: the spinner control on some spinners is showing transparent lines in unwanted places. The pattern is this: every other spinner is having this problem, starting with the first spinner control. So while spinners 2, 4, 6, ... have no unwanted lines, spinners 1, 3, 5, ... have them.
The following image (link below) shows the spinner in selected state first, and in unselected state after the red separator. In selected state, the transparent line is at baseline height for the entire control except some places where the button text can be. It's a little different in unselected state.
I cannot provide an image directly:
[...] as a spam prevention mechanism, new
users aren't allowed to post images.
But I can give you a link:
Screenshot that illustrated the graphical spinner problem
The XML file under res/layout looks like this:
<ScrollView ...>
<TableLayout ...>
<TableRow>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/units"
android:gravity="center_vertical"
android:paddingRight="5dp"
/>
<Spinner
android:id="#+id/unit_spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawSelectorOnTop="true"
/>
</TableRow>
...
</TableLayout>
</ScrollView>
I see this problem at least since Froyo (Android 2.2). In earlier versions (at least Android 1.6), it wasn't there. It's not there in the Graphical Layout editor in Eclipse, but I see it running the application on the phone and in the emulator - that's at least consistent and hints to a problem I'm causing by not doing things right ;-).

Actually I can reproduce this behavior on Android 2.3. Not possible on Android 2.2 and lower.
It' doesn't matter if you place the Spinner in a TableLayout or RelativeLayout. Same problem there..
Only solution to get ride of the lines was to put a 1px-View between the spinner:
<Spinner android:layout_height="wrap_content" android:id="#+id/spinnerDriver"
android:layout_width="match_parent" android:layout_below="#id/driverDesc" />
<View android:id="#+id/helper" android:layout_height="1px"
android:layout_width="match_parent" android:layout_below="#id/spinnerDriver" />
<Spinner android:layout_height="wrap_content" android:id="#+id/spinnerDriver1"
android:layout_width="match_parent" android:layout_below="#id/helper" />
This is actually a very, very, very... ugly solution but it works for me...