Implementing autocompletetextview next to ImageButton using 9patch in a RelativeLayout - android

I'm having trouble implementing a SearchBox with an ImageButton to the right using assets provided by a designer.
I'm not sure if the problem is because of the assets or my implementation.
It should look like this, and it does in hdpi phones.
But look how it looks like in xhdpi emulated phone
It was tested on real devices too. Every devices without hdpi looks like the second example.
This is my implementation:
<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="10dp"
android:paddingRight="10dp"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity"
android:background="#e9e9e9" >
<ImageButton
android:background="#drawable/home_btn_ubicacion"
android:src="#drawable/home_icono_ubicacion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:id="#+id/button"/>
<AutoCompleteTextView
android:layout_toLeftOf="#id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/home_input_buscar"
android:hint="Ciudad o Barrio"
android:layout_alignParentLeft="true"
/>
I'm not allowed to post images because of my reputation so I'm sharing the whole test project on github at:
github.com/ejmedina/SearchBoxTestProject
Again, it doesn't look like a link because of low rep.
Thank you all in advance as always.

The designer sent new assets which fixed the problem.
It seems he made the first ones with Photoshop and the patch didn't worked as intended.
I've pushed the new assets to my github repo and they will remain there for educational purpose.

Related

Android - Seemingly harmless layout causes app to crash after short use without any errors

After 2 days of fruitless testing, I've decided to post my issue here, in the hopes that I'm missing something obvious.
I've boiled down a seemingly innocuous xml-layout to a random collection of images, layouts, and a scrollview. Here it is:
<?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"
android:background="#drawable/wood_texture"
tools:context="com.testlayout.example.testlayout.MainActivity">
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:src="#drawable/image_one"
android:id="#+id/imageOne"
android:adjustViewBounds="true"
android:layout_gravity="center_vertical"
android:visibility="visible"/>
<ImageView
android:layout_width="300dp"
android:layout_height="150dp"
android:background="#drawable/dark_wood_texture"
android:id="#+id/darkWood"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="20dp"
android:visibility="visible"/>
<HorizontalScrollView
android:layout_width="300dp"
android:layout_height="150dp"
android:id="#+id/handScrollView"
android:scrollbars="none"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="20dp"
android:visibility="visible">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/handLayout">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/image_three"
android:id="#+id/imageView"
android:adjustViewBounds="true"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/image_three"
android:id="#+id/imageView2"
android:adjustViewBounds="true"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/image_three"
android:id="#+id/imageView6"
android:adjustViewBounds="true"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"/>
</LinearLayout>
</HorizontalScrollView>
<ImageView
android:id="#+id/imageTwo"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:src="#drawable/image_two_tiled"
android:scaleType="fitXY"/>
</RelativeLayout>
I can load this layout onto my phone just fine, but after swiping around in the scrollview for as little as 5 seconds, the app will suddenly crash to the home screen - without reporting that the app has stopped working. I've been testing on a Samsung Galaxy s6.
I've also tested this on a Samsung Galaxy Tab 2, where this problem does not occur (both my real app and this test app run just fine on the tablet).
I've created a new Android Studio project; the only changes I've made are to the res/layout/activity_main.xml, as outlined above. I've also included the drawables I'm using. I'm hoping someone with better debugging skills than I can either pull down that project, or simply create a new one of their own using the above layout (that's all there is to it, though you'll need my drawables regardless).
I'd like to clarify that I'm not looking for a way to fix this issue, I'm trying to understand the issue. The thing is, after 2 days of testing, I've found half a dozen ways to seemingly "fix" the issue. But none of them make any sense, and they all seem unrelated. If I don't know why my solution fixes the issue, I won't know how to avoid it during future development.
Observations
As I mentioned above, I've found several ways to "fix" the issue (i.e. make it no longer crash), but none of them seem to be related. Here are a few:
Set the visibility of almost any of the elements to gone.
Remove the background from the root element.
Remove the line android:tileMode="repeat" from drawable/image_two_tiled.xml
Note that changing the tileMode to something else - for instance, clamp - does not fix the issue. Only removing it (or setting it to disabled).
Set the src of the ImageView with the id "#+id/imageTwo" to image_two_smaller_tiled.
This is the exact same image as image_two_tiled, just a smaller resolution.
This is by no means an exhaustive list of, but it gives you an idea of how disjointed these fixes are (especially the tileMode one).
As near as I can tell, it looks like some kind of memory issue. I'm fairly new to android development, so I'm not quite familiar with the memory constraints I need to work with, but I would be horrifically concerned if I was causing the heap to explode with so few images, and of fairly small size (at the very least, certainly not big).
If anyone could tell me exactly what is causing my app to crash, I would be. . . Well, I would be extremely grateful. 'Cause after 2 days of trying to debug this myself, I'm about ready to quit android development : (
Edit
The app itself does not throw an exception, however logcat does consistently show this error at the time of the crash when I'm not filtering log messages from my app alone.
E/Resources: RunTimeException
android.content.res.Resources$NotFoundException: Resource ID #0x7f0202cf
at android.content.res.Resources.getValue(Resources.java:2558)
at android.content.res.Resources.startRC(Resources.java:1116)
at android.app.ActivityThread$mRunnable.run(ActivityThread.java:3056)
at java.lang.Thread.run(Thread.java:818)
e2: I'm starting to wonder if this is an issue with my phone, and not the app, since I can run it just fine on my tablet. I'd really like to know if anyone else is experiencing this issue if they try to run this on their Galaxy s6. Specifically the S6 - that would tell me if it's an issue with my phone or all S6's in general.
This previous SO post answer solved my issue.
In short, it was the BitmapDrawable that was causing the entire issue. While unfortunately I cannot say why this fixes the issue, setting the view that uses the bitmap with layerType="software" will prevent the crashes.
In a layout: android:layerType="software"
In code: view.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

How to convert Android xml layout to png/svg to use in iOS version

I have an Android layout xml file here:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/locationMarker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="30dp"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/locationMarkertext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corner_map"
android:gravity="center"
android:minWidth="180dp"
android:onClick="create"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:text="Pick the Location"
android:textColor="#android:color/white" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:onClick="create"
android:src="#drawable/plus" />
</LinearLayout>
This xml layout renders to look like this:
This works fine for android but I want to use this xml layout on the iOS app as well. I was wondering if there was a way to convert this xml layout to a svg or png format or anything that would allow me to re-use this item without needing to re-create it. It needs to have transparency and a .svg would most likely be better than a .png if that works. I would like only the displayed visible part to be clickable if possible.
The equivalent technology in iOS is Apple's "autolayout" system.
It's quite easy to use once you get the hang of it; the fact is though like anything it's a specialist thing. And sure, you could just make a transparent PNG and use that as an image for a UIButton.
I would really suggest just using a "UIButton" in Apple, and play with the colors etc until you get a look that is OK -- although not identical to the other platform.
The two key points are
it's almost impossible, technically, to make apps look identical on different platforms
pretty much everyone agrees you should not try to do that; other than in games, allow elements like buttons etc. to be "natural" on each platform / os version.
BTW I have no idea why anyone would downvote your question. Cross-platform issues are one of the most critical in development today.

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

Slide Toggle for Android

Anyone know of any open source implementation of a slide toggle for android. The default android toggle(ToggleButton) is not pretty. I am looking for anything similar to iOS. I should be able to implement one from scratch. But if anything similar is already available, then i can build on it.
Thanks in advance to the wonderful stackoverflow community.
Edit1:
What I meant by iOS Slide Toggle is UISwitch
Edit2: Just want to summarize the answer. Commonsware provided the clue. I ended up back porting the Switch code from 4.0 to2.2.2. Thanks to the open-sourced code, back porting was not very difficult. The code is hosted on git hub. http://github.com/pellucide/Android-Switch-Demo-pre-4.0/tree/master/
A screenshot from that project
you can use the sliding drawer widget in android to have a sliding toggle switch. you just have to "slice" the ios toggle images into3 parts, one for the handle, one for the sliding drawer background and one for the content part. then put an image on top of it like a frame to give you the "round edges"
here's what i've come up with:
XML Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="100dp" >
<SlidingDrawer
android:id="#+id/slidingDrawer1"
android:layout_width="154dp"
android:layout_height="54dp"
android:background="#drawable/ios_retina_toggle_on_full"
android:content="#+id/content"
android:handle="#+id/handle"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/handle"
android:layout_width="54dp"
android:layout_height="54dp"
android:background="#00000000"
android:src="#drawable/ios_retina_toggle_button" />
<ImageView
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ios_retina_toggle_off" />
</SlidingDrawer>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ios_retina_toggle_frame" />
</FrameLayout>
</LinearLayout>
ios_retina_toggle_on_full
ios_retina_toggle_button
ios_retina_toggle_off
ios_retina_toggle_frame
and finally a screenshot of how it looked on the emulator on a 3.7 WVGA screen running gingerbread:
iOS does not seem to have a "slide toggle", at least under that name, based on a Google search. And, you did not provide an image (or a link to an image) of what you want.
Android 4.0 added a Switch that you might be able to backport to earlier versions. You will see samples of it in the API Demos app on your emulator:
You can try using ToggleButton specifying your own drawables for its states.
We can try using seekbar with custom drawables and thumb, setting the max value to 1 and min to 0. we can add animations for sliding effect

Categories

Resources