Android：环形内的圆形图像

Question

I want to create a button with image inside it as shown at the bottom of this pic https://trianglewiki.org/RGreenway_App/_files/android.jpg/_info/ . I am trying using layer-list and shape drawables and able to create buttons very similar. My problem is that my image is not scaling inside the button as I would like. The ring shape is coming on the top of the image but image is not inside it.

I want the image to be completely inside the ring. I think there is something wrong with the parameters values I am giving. But it could be I am not doing it the proper way.

Can somebody check my xml files and see what is the problem or provide me with any information how to do it so that I get the same effect in the button as in the link above. Thanks

custom_button.xml (in res/drawable)

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="@drawable/map"/>

<item>
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:innerRadius="20dp"
        android:innerRadiusRatio="1.75"
        android:shape="ring"
        android:thicknessRatio="25"
        android:useLevel="false" 
        >
        <gradient
            android:angle="90"
            android:endColor="#FFFFFF"
            android:startColor="#FFFFFF" />

        <size
            android:width="50dp" 
            android:height="40dp" />

        <solid android:color="#008000" />
    </shape>
</item>

</layer-list>

custom_layout (in res/drawable for linearlayout's background)

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
    android:angle="90"
    android:startColor="#FF000000"
    android:endColor="#FFFFFFFF"
    android:type= "linear" />   
<stroke
    android:width="1dp"
    android:color="#FF000000" />
<padding
    android:left="5dp"
    android:right="5dp"
    />
<size
    android:height="50dp"
    />
<solid
    android:color="#00FF00"
    />

</shape>   

header.xml (in res/layout)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/buttonBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@drawable/custom_layout"
android:orientation="horizontal" >

<ImageButton
    android:id="@+id/home"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="center_vertical"
    android:layout_weight="1"
    android:contentDescription="Button"
    android:paddingLeft="2dip"
    android:paddingRight="2dip"
    android:background="@drawable/custom_button"
    android:scaleType="fitXY"
    android:color="#ff0000"
     />

<ImageButton
    android:id="@+id/map"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="center_vertical"
    android:layout_weight="1"
    android:background="@drawable/custom_button"
    android:contentDescription="Map"
    android:paddingLeft="2dip"
    android:paddingRight="2dip"
    android:scaleType="fitXY"
     />

<ImageButton
    android:id="@+id/weather"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="center_vertical"
    android:layout_weight="1"
    android:background="@drawable/custom_button"
    android:contentDescription="Weather"
    android:paddingLeft="2dip"
    android:paddingRight="2dip"
    android:scaleType="fitXY"
    />

<ImageButton
    android:id="@+id/citilink"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="center_vertical"
    android:layout_weight="1"
    android:background="@drawable/custom_button"
    android:contentDescription="CitiLink"
    android:paddingLeft="2dip"
    android:paddingRight="2dip"
    android:scaleType="fitXY"
    />

</LinearLayout>

Answer 1

You are overcomplicating this is if I understand your question. Look to here for an answer. It's the trick I have used in the past.