Search code examples
xmlxamarin.androidtextview

Xamarin.Android rounded background circle around text

I would like to have a red circle around text. Example below the red circle around the white text number 2.

enter image description here

I am able to make it a red background, but its a square instead of a circle/oval. Its also further away then I would like.

enter image description here

I know in CSS you can use border-radius and left to get it to be an oval and be closer. But I cant seem to get the same in this .axml. I see some articles mention Shape, but im not sure if a textview can be inside of this, and also if it can be accessed programmatically (display or not display based on a condition)

.axml:

<LinearLayout
            android:orientation="horizontal"
            android:layout_weight="1"
            android:layout_margin="12dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

        <TableLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

            <TableRow
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:weightSum="2" >

            <ImageView
                        android:id="@+id/imgPPhoto"
                        android:src="@drawable/p_circle"
                        style="@style/EImageView.Icon"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="0.5"
                        android:layout_marginLeft="0.0dp" 
                        />
                <TextView   
                            android:id="@+id/txtActiveVCount"
                            style="@style/ETextView.Heading"
                            android:layout_height="wrap_content"
                            android:layout_weight="0.1"
                            android:layout_width="0dp"
                            android:layout_marginLeft="0dp"
                            android:text="1"
                            android:textColor="#fff"
                            android:background="#CF1B00"
                            android:paddingLeft="-0.5rem"
                            />

                <TextView   
                            android:id="@+id/txtPName"
                            style="@style/ETextView.Heading"
                            android:layout_height="wrap_content"
                            android:layout_weight="1.3"
                            android:layout_width="0dp"
                            android:layout_marginLeft="12dp"
                            android:layout_gravity="left|center" />
            </TableRow>
    </TableLayout>              
</LinearLayout>

It looks a bit ovalish now

enter image description here

Solution

  • Create a Android Layout type file named "circle.xml" in drawable folder with this content:

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       >
    <solid android:color="#FFF44444"/>
    <size android:height="20dp" android:width="20dp"/>
    <corners android:radius="20dp"/>
    <padding android:left="10dp" android:top="5dp" android:right="10dp" android:bottom="5dp" />
</shape>

    layout.xml: Add android:background="@drawable/circle" to TextView

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
        
        <TextView android:id="@+id/ss"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:text="5"
                  android:textColor="@android:color/white"
                  android:background="@drawable/circle"/>
    
</RelativeLayout>