Draw circles inside TextView

Question

I have a calendar that looks like this:

Calendar

The Class that draws this Calendar is called MonthView and is a TableLayout:

class MonthView extends TableLayout{...}

The function that creates the calendar is shown below:

TextView btn;
TableRow tr;

void DisplayMonth(boolean animationEnabled){
    ...

    for(int i = 0; i < 6; i++){
        if(day > cal.getActualMaximum(Calendar.DAY_OF_MONTH))
            break;
        tr = new TableRow(context);
        tr.setWeightSum(0.7f);

        for(int j = 0; j < 7; j++){
            btn = new TextView(context);
            ...
        }
}

The function that changes the color of the background day is below:

public void changeBackgroundDay(List<Class> classes){
    for(int i = 0; i < getChildCount; i++){
        TableRow row = (TableRow)getChildAt(i);

        for(int j = 0; j < row.getChildCount(); j++){
            TextView t = (TextView)row.getChildAt(j);

            for(int tam = 0; tam < classes.size(); tam++){
                Class class = classes.get(tam);

                // ---- THIS IS THE PART THAT I WANT TO CHANGE ----//
                if(class.getTypePlanning().equals("null"){
                    t.setBackgroundColor(Color.parseColor("#777777"); 
                }
                else if(class.getTypePlanning().equals("R")){
                    t.setBackgroundColor(Color.parseColor("#2477B2");
                }
                // -----------------------------------------------//
                ...
            }
        }
    }
}

I want to, instead of just changing the background color of the TextView, draw 4 circles on this TextView. In some cases, it can be drawn just 2 or 3. For example, like is shown in the pictures:

Calendar with circles

enter image description here

I've tried to make a Layer list with items that contains shape and color and defined this Layer list as the background of the TextView, but it didn't work really well.

The Layer list xml is below:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layerlist"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <item android:id="@+id/itemnaoplanejado"
        android:bottom="1dp" android:right="1dp">
        <shape android:shape="oval" android:visible="false">
            <size android:width="2dp"
                android:height="2dp"/>
            <solid android:color="#777777"/>
        </shape>
    </item>

    <item android:id="@+id/itemplanejado"
        android:bottom="1dp" android:left="1dp">
        <shape android:shape="oval" android:visible="false">
            <size android:width="2dp"
                android:height="2dp"/>
            <solid android:color="#8CC9F3"/>
        </shape>
    </item>

    ....
</layer-list>

On the function changeBackgroundDay I do this:

public void changeBackgroundDay(List<Class> classes){
    ...
    if(class.getTypePlanning().equals("null"){
        LayerDrawable layerDrawable = (LayerDrawable) getResources().getDrawable(R.drawable.layerlistday);
        layerDrawable.findDrawableByLayerId(R.id.itemnotplanned).setVisible(true, false);

        t.setBackground(layerDrawable);
    }
}

Any ideas?

Thanks in advance.

why don't you use Grid view for this, there are lot of customization you can do with GridView. — Ashish Tamrakar, Dec 03 '14 at 12:04
@AshishTamrakar Yea that's probably the best thing to do, but if there's is any way to do it using TableLayout anyways, would be great...if not I will change to GridView — Bruno Pardini, Dec 03 '14 at 12:21
I have already got this posted answer from some other link and it worked perfectly fine. Please check according to your task. thanks — Ahmad Arslan, Dec 03 '14 at 12:27
Try this http://stackoverflow.com/questions/21178193/android-draw-circle-with-text-inside — Ahmad Arslan, Dec 03 '14 at 12:29
@Blackbelt I edited my question with the code of the LayerList implementation — Bruno Pardini, Dec 03 '14 at 13:33
@Blackbelt Yes, but I used a function named setCompoundDrawablesWithIntrinsicBounds. The reference I used: http://stackoverflow.com/questions/6590838/calling-setcompounddrawables-doesnt-display-the-compound-drawable Thanks!! — Bruno Pardini, Dec 03 '14 at 14:09
yep setCompoundDrawablesWithIntrinsicBounds is the correct one. Did it work? — Blackbelt, Dec 03 '14 at 14:10
You can extend TextView and add drawing circles code in overrided 'onDraw(Canvas canvas)' method. — rstk, Dec 03 '14 at 16:41

score 0 · Answer 1 · answered Dec 03 '14 at 12:26

Tyr this

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/num_txt"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginTop="0dp"
            android:background="@drawable/bg_red"
            android:gravity="center"
            android:text="My name is NON"
            android:textColor="#FFFFFF"
            android:textSize="10dp" />

    </RelativeLayout>

</RelativeLayout>

save in drwable bg_red.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval">
    <corners android:radius="10dip"/>
    <stroke android:color="#FF0000" android:width="5dip"/>
    <solid android:color="#FF0000"/>
</shape>

Edited Code -----

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

         android:layout_alignParentTop="true"
         android:layout_marginTop="163dp"
         android:background="@drawable/bg_red"
         android:gravity="center"
         android:text="My name is NON"
         android:textColor="#FFFFFF"
         android:layout_marginLeft="10dp"
         android:textSize="10dp" />

     <TextView
         android:id="@+id/TextView02"
         android:layout_width="90dp"
         android:layout_height="90dp"
         android:layout_alignParentRight="true"
         android:layout_alignTop="@+id/TextView01"
         android:layout_marginRight="90dp"
         android:layout_marginTop="122dp"
         android:background="@drawable/bg_red"
         android:gravity="center"
         android:text="My name is NON"
         android:textColor="#FFFFFF"
         android:textSize="10dp" />

     <TextView
         android:id="@+id/TextView01"
         android:layout_width="120dp"
         android:layout_height="120dp"
         android:layout_alignTop="@+id/num_txt"
         android:layout_toRightOf="@+id/num_txt"
         android:background="@drawable/bg_red"
         android:gravity="center"
         android:text="My name is NON"
         android:textColor="#FFFFFF"
         android:textSize="10dp" />

</RelativeLayout>

It would work if I had a static xml, but I am doing it dynamically. — Bruno Pardini, Dec 03 '14 at 14:11

Draw circles inside TextView

1 Answers1