Search code examples
androidprogress-barandroid-canvasandroid-custom-view

Semi Circular Progress bar Android - drawing semi circle

I created a semi circular progress bar using this devadvance\circularSeekBar and it looks like this when I select that custom view from the palette.

progress bar in palette.

In this I have two Relative layouts with weights. Weight of the layout containing the progress bar is 2 and the bottom one has weight of 3. And layout width and height of the progress bar is set to wrap content.

So my issue is why does the progress bar look like this when selected from palette? Is it that the canvas size takes the perfect square? What I want is the semi circular progress bar to be fully enclosed by the layout like this.

expected

Any light on this is appreciated.

EDIT xml code 

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

    <include layout="@layout/toolbar"/>

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3">

        <LinearLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <RelativeLayout xmlns:app = "http://schemas.android.com/apk/res-auto"
                android:id ="@+id/calorie_frame"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="2"
                android:clickable="true">
                <com.devadvance.circularseekbar.CircularSeekBar
                    android:id="@+id/calorie_progressbar"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:start_angle = "180"
                    app:end_angle = "0"
                    app:progress = "25"
                    app:circle_x_radius="200"
                    app:circle_y_radius="200"
                    app:circle_stroke_width = "30"
                    app:use_custom_radii="true"
                    app:circle_color ="#FFFACD"

                    android:layout_alignParentEnd="false"
                    android:layout_alignParentStart="false"
                    android:layout_centerInParent="true" />
                </RelativeLayout>

            <RelativeLayout
                android:id="@+id/exercise_frame"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="3"
                android:clickable="true">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:text="@string/calorie_label"
                    android:id="@+id/textView"
                    android:layout_marginBottom="40dp"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentEnd="true"
                    android:layout_marginRight="20dp" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/imageView"
                    android:layout_alignBottom="@+id/textView"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentStart="true"
                    android:layout_marginLeft="50dp"
                    android:layout_marginStart="50dp"
                    android:contentDescription="@string/exercise_image" />

            </RelativeLayout>
        </LinearLayout>

        <ListView
            android:id="@+id/left_drawer"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:choiceMode="singleChoice"
            android:divider="@android:color/transparent"
            android:dividerHeight="0dp"
            android:background="#999"/>
    </android.support.v4.widget.DrawerLayout>

</LinearLayout>

Solution

  • Problem is canvas height that you have. You have height for a circle and you draw half of circle on it. Try this:https://github.com/natasam/DemoProgressViewsLibApp It has just what you need and you can easily customize ArcProgressBar to your needs. And height is height of arc, it is not the case of full circle like yours. You can also set padding, margins, width what you wish.