Home > Android > Customize button in Android

Customize button in Android


hi!!
You can change the appearance of button in android like make the corners of button rounded etc…

button_shape.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape      xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
    
    <solid   android:color="#EAEAEA"/>
    
    <corners    android:bottomLeftRadius="8dip"
                android:topRightRadius="8dip"
                android:topLeftRadius="1dip"
                android:bottomRightRadius="1dip"
                />
</shape>

here you can change the radius of corners

you can use this button_shape in your button’s code as

android:background=”@drawable/button_shape”

here’s the code

main.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent">

    <TextView   android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Hello Android from NetBeans"/>

    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Nishant Nair"
            android:padding="5dip"
            android:layout_gravity="center"
            android:background="@drawable/button_shape"
            />

</LinearLayout>

you can add an image to your button by using drawable

android:drawableTop=”@drawable/pdf”

in your button’s xml code

this will look like this

Enjoy.. ;) !!!!!!!

About these ads
Categories: Android Tags: ,
  1. November 29, 2010 at 1:32 pm | #1

    Hi friend,

    Thnx for such tutorial.
    Nice one.

  2. Marek
    December 20, 2010 at 2:43 pm | #3

    Hello Nishant,

    it´s a nice tutorial :-)

    I still have a question: Is it also possible to make such buttons without xml, only using java code?

  3. December 28, 2010 at 6:56 am | #5

    Sugoi neeeh!!! :DDDD
    I’ll definitely try this!!
    Arigato! :D :D

  4. March 26, 2011 at 5:09 am | #6

    I’m looking for someway to change the timepicker to heightpicker. I want the look of timepicker to select ft and inches. I think the timepicker UI is perfect for this but struggling to change it for my needs. Can you help?

    • March 26, 2011 at 6:05 am | #7

      Hi!
      I have not tried timepicker yet, so i can’t comment on that.
      Sorry.

      Let me know if you need any other help, I will try timepicker later on.

  5. Farhan
    April 14, 2011 at 7:10 pm | #8

    Hey buddy, thanx for sharing this… i was wondering if you could write something about adding a shadow to a button…

  6. Imran
    June 19, 2011 at 11:10 pm | #9

    Hi,

    Instead of radius can we clip it horizontally on the topLeft and the bottomLeft to look like a Android back button?

    http://oasis.forge.ocamlcore.org/oasis-db/wireframe/images/IphoneNavigationButton_Back.png

    • Brad
      June 23, 2011 at 7:20 pm | #10

      A back button like the one in your link is what I’m looking for too. So far I accomplished this by using a 9patch png image. but would prefer to use a regular custom button to accomplish this.

    • July 13, 2011 at 6:08 am | #11

      @Nishant nair: Nice tutorial man. It helped me a lot.

      @Imran: Good tip. It is useful in creating back button in our view.

      Thanks.

  7. JRC
    July 13, 2011 at 8:21 am | #12

    Hello Nishant,

    Great article…

    I want to develop Knob type circular button, can you have pointers how to do it in android?

    Thanks,
    JRC

  8. Babu
    September 8, 2011 at 1:59 pm | #13

    Nice Tutorial …

  9. November 22, 2011 at 4:54 pm | #14

    This approach is way simpler than working with the Canvas object in Java. Thank you for the easy tutorial!

  10. January 1, 2012 at 5:58 am | #15

    Where would I place my button_shape.xml file?

  11. Vinay
    January 9, 2012 at 5:21 am | #17

    Hello Nishant,
    How to make it Clickable……where should we mention the states for the Button…..

  12. LiTTle
    January 22, 2012 at 5:57 pm | #18

    Bottom left and right is like the opposite! The left side at the bottom is called “Bottom Right”! Why is this?

    • March 14, 2013 at 6:54 pm | #19

      That’s a good question. It seems like this was fixed in the newer android versions.

  13. Kevin
    February 5, 2012 at 3:21 pm | #20

    Give me an error …
    “Premature end of file”
    Please help

    • February 5, 2012 at 5:04 pm | #21

      I never got such error. Can you check it again, closing all tags.

  14. Hennie
    February 5, 2012 at 4:01 pm | #22

    Hi Nisant. It builds and runs but gives the force close message. Do you know why this can be? What am I missing?

    Here’s what I did in Netbeans:
    1. Create drawable folder in res folder.
    2. Create button_shape.xml file in the drawable folder.
    3. Copy first given code snippet to button_shape.xml
    3. Replaced code in main.xml with second given code snippet.
    4. Run.

    Thanks a million.

  15. Karthik
    February 14, 2012 at 4:41 pm | #24

    Awesome..Thanks buddy.

  16. suresh
    February 24, 2012 at 6:30 am | #25

    Thank u very much.

  17. Ricardo Amendoeira
    June 6, 2012 at 5:23 pm | #26

    Thanks a lot man!! I´ve been looking for this for quite a while :P

  18. sharannya
    June 25, 2012 at 7:23 am | #27

    Thanks a lot

  19. August 15, 2012 at 10:39 am | #28

    Hi
    It is very nice and useful topic
    Thanks

  20. June 20, 2013 at 10:38 am | #29

    sir mujhe android linear layout me button ko charo tarf se round krna hai
    how

  21. Alessandro
    November 14, 2013 at 1:34 pm | #30

    Fast and direct!
    Thanks! You Rock!

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: