Clever Geek Handbook

Android half-circle progress bar - semicircle drawing

I created a semicircular progress bar using this devadvance \ circleSeekBar and it looks like this when I select this custom view from the palette.

progress bar in palette...

In this I have two relative weights layouts. The weight of the layout containing the progress bar is 2 and the bottom one has a weight of 3. Both the layout width and the progress bar height are set to wrap the content.

So my problem is, why does the progress bar look like this when selected from the palette? Does the canvas size occupy a perfect square? I want the semi-circular progress bar to be completely covered by a 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>
Run codeHide result


+1


source to share


3 answers


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



-1


source


add this

android:layout_height="0dp"

insted this

android:layout_height="match_parent"

for ur relative layout where you added weight property.



for

android:id="@+id/exercise_frame"   
android:id ="@+id/calorie_frame"

ids change height = "0dp"

hope it works ...

0


source


I still haven't found a reason why it is happening as shown, but I guess it should work like this. Anyway I replaced it with this lzyzsd / CircleProgress and it works well enough for my use.

Similar amazing things can be found here android-arsenal

0


source






More articles:


All Articles