CODEWITHSUNDEEP
androidxmlandroid-layout
Roadblock
Roadblock

Reputation: 2071

Circle around TextView Android

I have 3 textViews inside a linearlayout with horizontal orientation. I wanted that when one of the textview is in GONE state, I want the other textviews to be equally distributed horizontally and when only one textview is visible and other 2 textviews are GONE I want the one textView to be centered horizontally. I have achieved this using the weight attribute for each textviews.

Now I want to have a cicular background around each of the textView. Since the TextLength for each of the text inside TextViews is different, how do I make the circles equal sized for each of the TextViews?

Also, when only one TextView is available, the TextView occupies the entire width of the layout due to weight attribute. Making a circle in such case is a big problem I am facing right now.

MY xml Layout:

<TextView 
    android:id="@+id/timercount_view"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:textSize="60sp"
    android:background="@drawable/circle_dark"
    android:gravity="center"
    android:textStyle="bold"
    android:layout_marginTop="30dp"
    android:textColor="#ffffffff"
    android:text="60" />

<LinearLayout 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/timercount_view"
    android:gravity="center_horizontal"
    android:layout_alignParentBottom="true"
    android:layout_marginTop="50dp"
    android:orientation="horizontal"
    android:layout_centerHorizontal="true" >
    <TextView 
        android:id="@+id/reset_timer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:gravity="center"
        android:layout_weight="1"
        android:layout_gravity="center_horizontal"
        android:text="Reset"
        android:padding="15dp"
        android:textColor="#ffffff"
        android:layout_margin="5dp"
        android:background="@drawable/circle_dark" 
        />

    <TextView 
        android:id="@+id/restart_timer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:layout_weight="1"
        android:gravity="center"
        android:layout_gravity="center_horizontal"
        android:text="Restart"
        android:padding="15dp"
        android:textColor="#ffffff"
        android:layout_margin="5dp"
        android:background="@drawable/circle_dark"
        />
    <TextView 
        android:id="@+id/start_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:layout_weight="1"
        android:layout_gravity="center_horizontal"
        android:gravity="center"
        android:textColor="#ffffff"
        android:layout_margin="5dp"
        android:padding="15dp"
        android:background="@drawable/circle_dark"
        android:text="Start" 
        android:visibility="gone" />
</LinearLayout>

The drawable for cicle is:

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<corners android:radius="150dp" />
<solid android:color="#ff999999" />

Upvotes: 1

Views: 1158

Answers (1)

Gunnar Karlsson
Gunnar Karlsson

Reputation: 28470

You asked

how do I make the circles equal sized for each of the TextViews?

Set the shape's width equal to its height:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <corners android:radius="150dp" />
    <size android:width="100dp"
        android:height="100dp" />
    <solid android:color="#ff999999" />
</shape>

You may have to do some trial and error with radius and size until you find a solution that works for your layout.

Upvotes: 3

Related Questions