-6

I am creating a View as below design here

enter image description here

Please suggest way to create this type of custom view.

Ryan M
  • 18,333
  • 31
  • 67
  • 74
Amol Nage
  • 85
  • 10
  • Are you trying to make circular progress bar? – Ronak Thakkar Jun 02 '17 at 11:05
  • May [this](https://stackoverflow.com/questions/14688117/how-to-make-circle-custom-progress-bar-in-android) one help you brother.. – Rajesh Naddy Jun 02 '17 at 11:10
  • `Please suggest way to create this type of custom view.` I can suggest you to google for some tutorial, instead of asking for tutorials here. – Phantômaxx Jun 02 '17 at 13:20
  • Always start with an official documentation. Here is the link: https://developer.android.com/training/custom-views/index.html Edited: or there are plenty customizable progress bars available on the Github. Here is one of them https://github.com/lzyzsd/CircleProgress – Konstantin Kiriushyn Jun 02 '17 at 11:06
  • yes but i want to create my own Custom View. without using external library's – Amol Nage Jun 02 '17 at 11:12
  • Sure, that's why follow the official documentation. And then ask more specific questions if you have any. – Konstantin Kiriushyn Jun 02 '17 at 11:16
  • yes i already saw official document but i didn't get anything from it. that's why i came here. – Amol Nage Jun 02 '17 at 11:24

1 Answers1

1

You need to create two drawable files for this

Create this two files in res > drawable

1. circle_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="2.8"
    android:thickness="10dp"
    android:useLevel="false">
    <solid android:color="#CCC" />

</shape>

2. circular_progress_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="270"
    android:toDegrees="270">
    <shape
        android:innerRadiusRatio="2.8"
        android:shape="ring"
        android:thickness="10dp"
        android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->

        <gradient
            android:angle="0"
            android:endColor="#e2d631"
            android:startColor="#dcdc38"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

now in your layout.xml i.e in res > layout > (your layout file)

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

                    <ProgressBar
                        android:id="@+id/pb_syllabus"
                        style="?android:attr/progressBarStyleHorizontal"
                        android:layout_width="120dp"
                        android:layout_height="120dp"
                        android:layout_centerInParent="true"
                        android:background="@drawable/circle_shape"
                        android:progress="60"
                        android:progressDrawable="@drawable/circular_progress_bar" />

                    <TextView
                        android:layout_width="40dp"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:gravity="center"
                        android:text="60%"
                        android:textColor="#ffffff"
                        android:textSize="21sp"
                        android:textStyle="bold" />
                </RelativeLayout>
Mayur_Thakur
  • 651
  • 8
  • 15