Half circle shape not work

Question

I try to create half circle background, in development IDE preview it works, but when I launch in emulator it doesn't work.

Here is my shape code :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:height="50dp">
        <shape>
            <solid android:color="@color/colorAccentDark" />
        </shape>
    </item>
    <item android:top="-500dp" android:bottom="0dp" android:left="-100dp" android:right="-100dp">
        <shape>
            <corners android:radius="500dp" />
            <solid android:color="@color/colorAccentDark" />
        </shape>
    </item>
</layer-list>

And here is my layout code :

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/background_profile"
        android:layout_weight="1">

        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/profile_avatar"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@drawable/ic_default_avatar"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="50dp"/>

        <TextView
            android:id="@+id/profile_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_below="@id/profile_avatar"
            android:layout_marginTop="20dp"
            android:textColor="@color/neutralWhite"
            android:textStyle="bold"
            android:textSize="18sp"
            android:text="Avatar Ang"/>

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="4.04">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello Android!"/>

    </RelativeLayout>

</LinearLayout>

Maybe any other tweak to handle that? Thank you

You need to be specific with your question. Does it not look how you intended (if not, explain what looks wrong)? Do you mean your app crashes (if so, show the logcat so it can be diagnosed)? Read the stackoverflow help on [Asking A Good Question](http://stackoverflow.com/help/how-to-ask) — Sound Conception, Nov 17 '13 at 21:54

score 77 · Answer 1 · answered Jul 31 '17 at 01:47

you can try this :

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#900021df"/>
    <size
        android:width="10dp"
        android:height="5dp"/>
    <corners
        android:bottomLeftRadius="20dp"
        android:bottomRightRadius="20dp"/>
</shape>

it gives this shape:

score 72 · Answer 2 · answered Jan 16 '18 at 14:56

curve_toolbar_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle"/>
    </item>
    <item
        android:bottom="0dp"
        android:left="-100dp"
        android:right="-100dp"
        android:top="-80dp">
        <shape android:shape="oval">
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>
</layer-list>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="0dp"
        android:layout_height="?android:attr/actionBarSize"
        android:background="@drawable/rounded_corner"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0">

    </android.support.v7.widget.Toolbar>
</android.support.constraint.ConstraintLayout>

Thank you. This works for other views like Bottom Navigation, Text Views as well — Bhaskara, May 07 '21 at 04:47

score 22 · Answer 3 · answered Nov 01 '17 at 09:00

Try this. Remove the gradient part then it will look like same as you want.

<item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <solid android:color="#00B0EA" />

    </shape>
</item>
<item
    android:bottom="400dp"
    android:left="-100dp"
    android:right="-100dp"
    android:top="-200dp">
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
        <gradient
            android:angle="90"
            android:endColor="#65FFFFFF"
            android:startColor="#65FFFFFF" />
    </shape>
</item>
<item
    android:bottom="402dp"
    android:left="-100dp"

    android:right="-100dp"
    android:top="-280dp">
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
        <solid android:color="#FFFFFF" />
    </shape>
</item>

score 20 · Answer 4 · edited Jun 17 '20 at 15:27

Background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list  xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <solid android:color="#FFFFFF" />
        </shape>
    </item>
    <item
        android:bottom="410dp"
        android:left="-100dp"
        android:right="-100dp"
        android:top="-300dp">
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="oval">

            <solid android:color="#7181A1" />
        </shape>
    </item>
</layer-list>

Output like

score 4 · Answer 5 · answered Nov 17 '13 at 21:54

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"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="false" >
    <solid android:color="#006AC5" />
    <size
        android:height="50dp"
        android:width="50dp" />
</shape>

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

<RelativeLayout xmlns: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">

    <ImageView
        android:contentDescription="@string/app_name"
        android:id="@+id/img"
        android:layout_width="fill_parent"
        android:layout_height="200dip"
        android:layout_alignParentTop="true"
        android:background="#006AC5" />

    <TextView 
        android: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 :)

you just need to add it to the xml after you add TextView (so it would place above the text), & then add some extra top padding to your TextView so you can see the text. this is how it may look like: — mmbrian, Nov 18 '13 at 16:09

score 1 · Answer 6 · answered Apr 23 '21 at 15:12

You can try to use ShapeOfView.

<io.github.florent37.shapeofview.shapes.ArcView
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:elevation="4dp"
    app:shape_arc_height="20dp"
    app:shape_arc_position="bottom">

    <!-- YOUR CONTENT -->

</io.github.florent37.shapeofview.shapes.ArcView>

Image result

Half circle shape not work

6 Answers6

Linked

Related