how stretch inside a circle image with nine patch

Question

I have a image that is as a circle .I want stretch only part of inside of it and i dont want stretch borders of it. as example my image is same below

enter image description here

I set it as backgrount my textview.i want if text is large it stretch as a circle and text place in center black circle .

so you want the inner dot to shrink/grow and the outer circle to shrink/grow with the same border width? — pskink, Jun 09 '14 at 16:50
I doubt it's possible to do that with a nine patch drawable. You should consider using a ring gradient instead. — matiash, Jun 09 '14 at 17:00

score 5 · Accepted Answer · edited May 23 '17 at 10:27

It may not be possible with using the 9-patch images. However I think your requirement can be achieved by using shape drawables. Following are the sample code which you can refer:

Create two circular shapes (outer_circle.xml and inner_circle.xml) in drawable folder.
Place the textview inside a LinearLayout where layout background is outer circle and text background is inner circle.
Programmatically update the height of textview to make it equal with the width.

Following is the code:

outer_circle.xml

<solid android:color="#ffffff" />

<stroke
    android:width="10dp"
    android:color="#000000" />

<size
    android:height="120dp"
    android:width="120dp" />

2.inner_circle.xml

<!-- Give the padding so the text does not touches the edge of inner circle -->
<padding
    android:bottom="5dp"
    android:left="5dp"
    android:right="5dp"
    android:top="5dp" />

<solid android:color="#000000" />

3.Layout Sample

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginTop="10dp"
    android:background="@drawable/outer_circle"
    android:gravity="center" >

    <TextView
        android:id="@+id/textTest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/inner_circle"
        android:gravity="center"
        android:text="Test"
        android:textColor="#aaaaaa"
        android:textStyle="bold" />
</LinearLayout>

4.Set the textView layout programmatically

// Override this method to get the text width dynamically and 
// apply the same height to the textview
@Override
public void onWindowFocusChanged(boolean hasFocus) {

    super.onWindowFocusChanged(hasFocus);
    TextView tvTest = (TextView) findViewById(R.id.textTest);
    int tvWidth = tvTest.getWidth();
    ViewGroup.LayoutParams tvLayout = tvTest.getLayoutParams();
    tvLayout.height = tvLayout.width = tvWidth;
    tvTest.setLayoutParams(tvLayout);

}

Following is the part of screenshot

enter image description here

Alternatively you can have a look into this links

How to draw a smaller ShapeDrawable inside another shapeDrawable programmatically

Hope this will be useful.

how stretch inside a circle image with nine patch

1 Answers1