Adding circles to android UI?

Question

I am working on an android app, but it looks pretty plain as it only has text on the activities. I was wondering how I can add some elements to the UI, specifically, how I could add a shape such as a circle, which would be wrapped around a TextView. Here is an example of something I would like to do...

So my question is, how can I add shapes into an Android layout that will be wrapped around TextViews? I have tried researching this topic, but haven't had much luck. So any resources that would teach me how to do this would help as well. Also, if you know how to add other elements of this page such as the line below 24m left and the blue pointers leading to icons, that would help as well. I want to learn everything that I can about designing a beautiful interface that will be pleasant to users. Thanks for any help.

Answer 1

The general steps youll want to take in order to do what you want is apply a background to a parent layout and then add the textview as a child to that view.

For simple shapes read up on XML drawables: https://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

First create an XML file named circle and place in res/drawable

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >

    <size
        android:width="100dp"
        android:height="100dp" />
    <stroke
        android:width="2dp"
        android:color="#CC0000"
        />

</shape>

Then create your layout file and place this in it:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:background="@drawable/circle">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="I'm in a circle!"
        android:layout_gravity="center"
        />
</FrameLayout>

You can place a background on the TextView but youll probably get more control applying it to a parent view.