Custom circle button

Question

I want to create custom button and I need it to be circle  How can I create a circle button  I do not think that be possible with draw9patch   Also I do not know how to make custom button   Do you have any suggestion

User · Answer

Markushi wrote a circle button widget with amazing effects  Click here

User · Answer

here is how you can perform simply  make a drawable resource file in drawable xml  Say round button xml and then paste the following code   lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt layer-list xmlns android  quot http   schemas android com apk res android quot  gt        lt item gt          lt shape            android shape  quot oval quot  gt               lt solid                android color  quot  color button start gradient color quot   gt          lt  shape gt       lt  item gt       lt item         android drawable  quot  drawable microphone quot   gt   lt  layer-list gt   Note - use your own color and drawable resource as i have used  drawable microphone Following is the result  1   https   i stack imgur com QyhdJ png

User · Answer

Create a new vector asset in the drawable folder  You can import your PNG image as well  and convert the file to SVG online at https   image online-convert com convert-to-svg  The higher the resolution  the better the conversion will be  Next  create a new vector asset from that SVG file  This is a sample vector circle image you can use  Copy the code to an xml file in the drawables folder  ic check xml   lt vector xmlns android  quot http   schemas android com apk res android quot      android width  quot 24dp quot      android height  quot 24dp quot      android viewportHeight  quot 256 quot      android viewportWidth  quot 256 quot  gt       lt path         android fillColor  quot  2962FF quot          android pathData  quot M111 1 7c-7 2 1 1 -22 2 4 8 -27 9 7 -33 2 12 5 -61 3 40 3 -74 1 73 3 -8 7 22 6 -10 5 55 3 -4 4 78 10 9 40 39 7 72 4 77 4 87 22 6 8 7 55 3 10 5 78 4 4 45 3 -12 3 79 1 -46 1 91 4 -91 4 2 9 -10 7 3 9 -21 9 3 3 -37 4 -0 7 -21 2 -4 6 -35 9 -14 -54 1 -18 2 -35 -54 -60 5 -93 4 -66 4 -6 7 -1 -30 7 -1 3 -36 3 -0 4zM145 23 1c21 8 3 3 46 5 16 5 61 1 32 8 20 4 22 6 30 1 51 2 27 7 81 1 -3 5 44 4 -35 9 82 7 -79 6 94 -21 6 5 6 -46 6 3 7 -67 8 -5 1 -10 4 -4 3 -24 7 -14 1 -33 4 -22 9 -41 6 -41 5 -41 6 -108 4 0 -150 24 3 -24 3 57 6 -35 1 92 -29 9z quot          android strokeColor  quot  00000000 quot    gt       lt path         android fillColor  quot  2962FF quot          android pathData  quot M148 4 113c-24 6 26 -43 3 44 9 -44 44 6 -0 7 -0 3 -8 5 -6 1 -17 3 -13 -8 9 -6 9 -16 5 -12 6 -17 -12 6 -1 4 -0 -25 6 19 -25 8 20 3 -0 3 1 4 62 7 50 2 64 8 50 2 1 7 -0 108 4 -112 3 108 4 -114 1 0 -1 3 -23 8 -20 4 -25 4 -20 4 -0 6 -0 -20 2 20 3 -43 7 45z quot          android strokeColor  quot  00000000 quot    gt   lt  vector gt   Use this image in your button   lt ImageButton     android id  quot   id btn level1 quot      android layout width  quot 36dp quot      android layout height  quot 36dp quot      android background  quot  drawable ic check quot    gt   Your button will be a circle button

User · Answer

AngryTool for custom android button  You can make any kind of custom android button with this tool site    i make circle and square button with round corner with this toolsite   Visit it may be i will help you

User · Answer

if you want use VectorDrawable and ConstraintLayout   lt FrameLayout             android id    id ok button              android layout width  100dp              android layout height  100dp              android foreground   attr selectableItemBackgroundBorderless              android background   drawable circle button  gt                   lt android support constraint ConstraintLayout                     android layout width  match parent                      android layout height  match parent  gt                       lt ImageView                         android id    id icon of button                          android layout width  32dp                          android layout height  32dp                          app layout constraintBottom toBottomOf  parent                          app layout constraintTop toTopOf  parent                          app layout constraintRight toRightOf  parent                          app layout constraintLeft toLeftOf  parent                          app srcCompat   drawable ic thumbs up   gt                       lt TextView                         android id    id text of button                          android layout width  wrap content                          android layout height  wrap content                          app layout constraintTop toBottomOf    id icon of button                          app layout constraintRight toRightOf  parent                          app layout constraintLeft toLeftOf  parent                          android layout marginTop  5dp                          android textColor   android color white                          android text  ok                            gt                   lt  android support constraint ConstraintLayout gt               lt  FrameLayout gt    circle background  circle button xml   lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android  android shape  rectangle  gt   lt corners android radius  1000dp    gt   lt solid android color   41ba7a    gt   lt stroke     android width  2dip      android color   03ae3c    gt   lt padding     android bottom  4dp      android left  4dp      android right  4dp      android top  4dp    gt   lt  shape gt

User · Answer

With the official Material Components library you can use the MaterialButton applying a Widget MaterialComponents Button Icon style   Something like       lt com google android material button MaterialButton             android layout width  48dp              android layout height  48dp              style   style Widget MaterialComponents Button Icon              app icon   drawable ic add              app iconSize  24dp              app iconPadding  0dp              android insetLeft  0dp              android insetTop  0dp              android insetRight  0dp              android insetBottom  0dp              app shapeAppearanceOverlay   style ShapeAppearanceOverlay MyApp Button Rounded                gt    Currently the app iconPadding  0dp  android insetLeft android insetTop android insetRight android insetBottom attributes are needed to center the icon on the button avoiding extra padding space   Use the app shapeAppearanceOverlay attribute to get rounded corners  In this case you will have a circle      lt style name  ShapeAppearanceOverlay MyApp Button Rounded  parent    gt       lt item name  cornerFamily  gt rounded lt  item gt       lt item name  cornerSize  gt 50  lt  item gt     lt  style gt    The final result

User · Answer

If you want to do with ImageButton  use the following  It will create round ImageButton with material ripples   lt ImageButton android layout width  quot wrap content quot  android layout height  quot wrap content quot  android src  quot  drawable ic settings 6 quot  android background  quot  selectableItemBackgroundBorderless quot  android padding  quot 10dp quot    gt

User · Answer

Unfortunately using an XML drawable and overriding the background means you have to explicitly set the colour instead of being able to use the app style colours  Rather than hardcode the button colours for every behaviour I opted to hardcode the corner radius  which feels marginally less hacky and retains all the default button behaviour  changing colour when it s pressed and other visual effects  and uses the app style colours by default   Set android layout height and android layout width to the same value  Set app cornerRadius to half of the height width  It actually appears that anything greater than or equal to half of the height width works  so to avoid having to change the radius every time you update the height width  you could instead set it to a very high value such as 1000dp  the risk being it could break if this behaviour ever changes    Set android insetBottom and android insetTop to 0dp to get a perfect circle   For example   lt Button     android insetBottom  quot 0dp quot      android insetTop  quot 0dp quot      android layout height  quot 150dp quot      android layout width  quot 150dp quot      app cornerRadius  quot 75dp quot        gt

User · Answer

Use xml drawable like this   Save the following contents as round button xml in drawable folder   lt  xml version  1 0  encoding  utf-8   gt   lt selector xmlns android  http   schemas android com apk res android  gt       lt item android state pressed  false  gt           lt shape android shape  oval  gt               lt solid android color   fa09ad   gt           lt  shape gt       lt  item gt       lt item android state pressed  true  gt           lt shape android shape  oval  gt               lt solid android color   c20586   gt           lt  shape gt       lt  item gt   lt  selector gt    Android Material Effect  Although FloatingActionButton is a better option  If you want to do it using xml selector  create a folder drawable-v21 in res and save another round button xml there with following xml   lt  xml version  1 0  encoding  utf-8   gt   lt ripple xmlns android  http   schemas android com apk res android      android color   c20586  gt       lt item gt           lt shape android shape  oval  gt               lt solid android color   fa09ad   gt           lt  shape gt       lt  item gt   lt  ripple gt    And set it as background of Button in xml like this    lt Button android layout width  50dp  android layout height  50dp  android background   drawable round button  android gravity  center vertical center horizontal  android text  hello  android textColor   fff    gt    Important    If you want it to show all these states  enabled  disabled  highlighted etc   you will use selector as described here  You ve to keep both files in order to make the drawable backward-compatible  Otherwise  you ll face weird exceptions in previous android version

User · Answer

For a FAB looking button this style on a MaterialButton    lt com google android material button MaterialButton     style   style Widget MaterialComponents ExtendedFloatingActionButton      app cornerRadius  28dp      android layout width  56dp      android layout height  56dp      android text  1    gt    Result     If you change the size be careful to use half of the button size as app cornerRadius

[android] Custom circle button

Examples related to android

Examples related to android-button