4

I have just begun creating Android apps using Eclipse and the ADT.
I have got the basic functionality working in a demo app, and would like to create a button that looks like a search field (there is no search functionality built in, I just want the user to press it and start a new activity).

http://www.roowilliams.com/button.png

My question is: what is the best practice for creating a button like the above (ignoring the 1px dark grey stroke around the outside)?

I have got as far as

  1. Create the button in activity_main.xml

    <Button
        android:id="@+id/inputSearch"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:hint="@string/hint_search"
        android:background="@drawable/input_search"
        style="@style/input_search"
        android:onClick="findProducts" >
    </Button>
    
  2. Create a few styles

    <style name="input_search" parent="@android:style/TextAppearance.Medium">
        <item name="android:textColor">@color/light_grey</item>
        <item name="android:background">@color/white</item>
    </style>
    
  3. Create the input_search_background.xml which has a light grey stroke, rounded corners

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
        <stroke 
            android:width="@dimen/stroke_width" android:color="@color/light_grey" /> 
        <corners 
            android:radius="@dimen/corner_radius" />
        <solid 
            android:color="@color/white" />
    </shape>
    
  4. Create input_search.xml for the states.

    <?xml version="1.0" encoding="utf-8" ?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:drawable="@drawable/input_search_background"
            android:state_pressed="true" />  
    
        <item android:drawable="@drawable/input_search_background"
            android:state_focused="true" />
    
        <item android:drawable="@drawable/input_search_background" />
    
    </selector>
    
  5. I'm not sure how to create the orange block on the right. Should I define a shape which is orange and use a transparent png for the magnifying glass or should the png be the orange block with the magnifying glass all in one?

What tools do you use for creating the assets?
How do I know how big to create them?

I'll appreciate any words of wisdom or links that could help.

Thanks,
Andrew

1

1 Answer 1

2

You can simply use a 9 patch.

You can find a similar one, in your sdk platform graphics:

In Windows (install path may change),

C:\Program Files\adt-bundle-windows-x86_64-20130522\sdk\platforms\android-8\data\res\drawable-mdpi

You can find this:

enter image description here

With some (very little) work, you can make the perfect image that matches your needs.
Just add it as the background of your Button (I'd use a TextView, but it's a matter of tastes) and enjoy.

You see, no need for a custom style nor an extra xml drawable.

1
  • 1
    Yes, only the picture, as shown. Just replace the inner grey with some white and the arrow with a white magnifier and you are OK. Please note that the left part in this 9 patch is poorly designed: as it is right now, the image will be stretched. there should be 2 black dots and they shouldn't be "projected" onto the icon, or it would be stretched. Anyway this shouldn't be a great issue, if you don't stretch the button vertically (you want it "wrap_content", so it should be fine as well). You can use the reference image as a test. Name it whatever.9.png. Feb 13, 2014 at 12:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.