CODEWITHSUNDEEP
androidxmluser-interface
Gunnar Hoffman
Gunnar Hoffman

Reputation: 1226

Android UI editor/display bug

While developing an Android application I have stumbled upon a baffling problem. The UI element I am creating is a header bar that has a custom search field. Everything looks wonderful on the Android UI editor but the second I use the emulator or a device it bugs out and compresses the magnifying glass image and clips the edit text. I have tried a number of things including changing the background image of the search area to the custom search field that is currently in the parent LinearLayout. This however results in the search field size growing out of control.

Any suggestions are welcome.

My questions are:
1) How would one fix this problem while maintaining the look of the search area?
2) Why is this problem occurring?

Confirmed on the following devices:
Samsung Galaxy Nexus 4.0.2
Motorola Zoom 4.0.3
Nexus S 2.3.7

This is a screenshot of the UI editor:
This is a screenshot of the UI editor

This is a screenshot of what it looks like on all devices tested:
This is a screenshot of what it looks like on all devices tested

The XML used to generate these UI elements:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/title_bar_matte"
android:gravity="center_vertical"
android:orientation="horizontal" >

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="fill_parent"
    android:layout_margin="10dp"
    android:layout_weight="1.0"
    android:background="@drawable/search_field"
    android:gravity="center_vertical"
    android:orientation="horizontal" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_marginLeft="15dp"
        android:src="@drawable/magnifying_glass" />


    <EditText
        android:id="@+id/campus_map_acitivity_search"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_marginLeft="10dp"
        android:layout_weight="1.0"
        android:background="#0FFF"
        android:hint="Search"
        android:imeOptions="actionSearch"
        android:singleLine="true" />
</LinearLayout>

<Button
    android:id="@+id/campus_map_activity_goto_list"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="5dp"
    android:background="@drawable/button_list" />

<Button
    android:id="@+id/campus_map_activity_my_location"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:background="@drawable/button_location" />

</LinearLayout>

Upvotes: 1

Views: 305

Answers (1)

Gunnar Hoffman
Gunnar Hoffman

Reputation: 1226

Just figured out the problem. The search background image had the top and left sides set to 9-patch scale. This is all good and well but we had forgotten to set the bottom and right fill areas so that the content would have room to exist.

http://radleymarx.com/blog/simple-guide-to-9-patch/

Remember to set the fill areas!

It turns out the Android UI editor does not handle 9-patch images like the devices. That seems to be a bug to me.

Upvotes: 2

Related Questions