Best way to Implement textview inside circular image/rectangle in android

Question

I am working on an Android app where I need to show some text inside circle like

The text is dynamic.Similarly I want to implement textview inside rectangle shape like

I found out that shape xml file can be used to draw some shapes like

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <corners android:radius="20dip"/>
    <stroke android:color="@color/colorPrimary" android:width="5dip"/>
    <solid android:color="@android:color/transparent"/>
</shape>

But it is not proper as I want some empty space between text and circle.I also tried to use android:background in textview but could not achieve the above mentioned scenario.

What is the Best way to implement above scenario? How such similar scenarios can be implemented? Can I use some custom images so that circle/rectangle shapes can be changed and how to achieve this?

Hey are you trying to do like this ??? Have a look at my answer- http://stackoverflow.com/a/40973512/4906130 — Bhavnik, Dec 19 '16 at 12:46

score 1 · Answer 1 · answered Dec 19 '16 at 11:44

You can use something like this..

btn_bg.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <corners android:radius="50dp" />
    <solid android:color="#000"/>
</shape>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <Button
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text="Total Count"
        android:layout_marginTop="40dp"
        android:textSize="36dp"
        android:background="@drawable/btn_bg"
        android:textColor="#fff"
        android:id="@+id/btn"
        />

</RelativeLayout>

score 0 · Answer 2 · answered Dec 19 '16 at 10:45

0

Try this:-

In your xml:-

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/test">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="11" 
        android:layout_centerInParent="true"/>
</RelativeLayout>

@drawable/test

<shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
        <corners android:radius="20dip"/>
        <size android:height="40dp" android:width="40dp"/>
        <stroke android:color="@color/colorPrimary" android:width="2dip"/>
        <solid android:color="@android:color/transparent"/>
    </shape>

answered Dec 19 '16 at 10:45

Nainal

1,728
14
27

it works properly if the text size is small.If the text size is large(36dp) and if try to change the radius,height,width of a shape nothing is happening. – Rohit Dec 19 '16 at 10:53
for textSize of 36dp change this line as:- in your @drawable/test – Nainal Dec 19 '16 at 11:02
Can I group 2 textviews and add circular shape over them?Can I use some custom images to change the style of circle? – Rohit Dec 19 '16 at 11:09
Do you want to increase or decrease size of the circle on run time? – Nainal Dec 19 '16 at 11:14
I want to group 2 textviews and add combined single shape to them.Can I use images instead of shape to achieve the similar functionality?shape size will be static – Rohit Dec 19 '16 at 11:33
Yes u can also use images in background of relative layout instead of drawable – Nainal Dec 19 '16 at 11:37

Best way to Implement textview inside circular image/rectangle in android

2 Answers2