How To Create Transparent Semicircle?

I want to create this effect.TextView with transparent semicircle as backgound . I tried add drawable as background.

Solution 1:

You cannot create a semicircle from xml. but you could achieve what you are looking for using a circle with appropriate margin & padding.

Create a fixed sized circle like this:

<?xml version="1.0" encoding="utf-8"?><shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"android:useLevel="false" ><solidandroid:color="#006AC5" /><sizeandroid:height="50dp"android:width="50dp" /></shape>

Now use it as the background of your TextView like this:

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#FFFF00"><ImageViewandroid:contentDescription="@string/app_name"android:id="@+id/img"android:layout_width="fill_parent"android:layout_height="200dip"android:layout_alignParentTop="true"android:background="#006AC5" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/img"android:layout_marginTop="-35dip"android:paddingTop="10dip"android:background="@drawable/circle"android:layout_centerHorizontal="true"android:text="@string/one"android:gravity="center"/></RelativeLayout>

Now if you give a top margin of -25dip (half of circle's height) to your TextView, you'll get a perfect semicircle in the bottom, but I've added just another 10dip (& 10dip padding to keep the text in place) just to get a closer look to what you're looking for.

If you further want to change background of the top ImageView & you don't want the rest of the circle to mess with the looks, you could just add the ImageView after you add the TextView so it would have a higher z-index, & then use a separate TextView to display text above the Image. It's quite nasty I know, but it should work :)

Share