Rounded image button android

17,668

Solution 1

You can either:

  1. get the click coordinates, measure the distance from the center, ignore clicks whose distance from the center is greater than the radius
  2. approximate the circle by several clickable square areas, or, probably, place over the original square button several clickable views whose click is ignored, thus covering the areas that should not be clickable.

Solution 2

No need to calculate anything, the only thing you need to do is to define shape of your imageButton inside button template xml (the drawable on).

so inside your UI layout xml file, ImageButton may be described like this

<ImageButton
            android:id="@+id/button"
            android:layout_width="300dp" 
            android:layout_height="300dp" 
            android:src="@drawable/yourIcon" 
            android:background="@drawable/button" <!-- PATTERN!! -->
            android:contentDescription="obrazek"
            android:padding="5dp"
            android:layout_margin="1dp"
            android:onClick="onClick"/>

and inside your pattern file just declare shape="oval" i.e. like this

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval">
    <gradient
        android:startColor="#50d050"
        android:endColor="#008000" 
        android:angle="270"/>

    <stroke 
        android:width="1px"
        android:color="#000000"/>

</shape>

It cannot be any more simple. :D

Share:
17,668
arun
Author by

arun

Updated on June 25, 2022

Comments

  • arun
    arun almost 2 years

    I have an image button like in the picture.I want the red spaces around it(It will be transparent, just given red to identify the spaces) will not be clickable. Is it possible ? I tried differnt code like via xml or some rounded imageview code but nothing help me..

    enter image description here

  • Lonti84
    Lonti84 about 10 years
    why to measure anything, when you can just define shape of your button inside your drawable patter xml file? it is just one line of code in xml: <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> from now on your button wont react if you press on any corner
  • Lonti84
    Lonti84 about 10 years
    @arun weird, it works for me... :( corners of round button with defined adnroid:shape="oval" are not triggering onClick method, sorry i couldn't help :(
  • Lonti84
    Lonti84 about 10 years
    @arun i've tried this with bigger buttons, and it appears, that when i touched screen near border of button, but outside of it, it still trigger onClick event.... It appears that the only reasonable solution is with calculation proposed by user 18446744073709551615