How to create a custom ProgressBar
Edit:
Issue 1) Resolved. I tried using my own theme
(see code below).
I want my ProgressBar
to look like the image below. I’ve created a ProgressBar
above my ListView
. I use ListView
, ProgressBar
, and two TextViews
in RelativeLayout
My question:
1.) How can I align the
TextViews
above theProgressBar
in the way shown below?
2.) How can I set the Color of theProgressBar
itself and the Background Color of theProgressBar
?
MainActivity.xml
<ProgressBar
android:id="@+id/progressBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/progressBarText"
android:progress="0"
android:max="100"
android:paddingTop="0dp"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:theme="@style/progressBarTheme"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"/>
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="DialogTheme" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">@android:color/holo_green_dark</item>
</style>
<style name="progressBarTheme" parent="@style/Theme.AppCompat">
<item name="colorAccent">@color/myRedColor</item>
</style>
</resources>
Solution
1.) How can I align the TextViews above the ProgressBar in the way shown below?
Try this :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal">
<ProgressBar
android:id="@+id/progressCircle"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<TextView
android:id="@+id/txtvStatusCircle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/progressCircle"
android:layout_alignParentStart="true"
android:text="Daily Progress"
android:textSize="18sp" />
<TextView
android:id="@+id/txtPercent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/progressCircle"
android:layout_alignParentEnd="true"
android:text="0 %"
android:textSize="18sp" />
</RelativeLayout>
2.) How can I set the Color of the
ProgressBar
itself and the Background Color of theProgressBar
?
In your styles.xml:
<style name="progressBarBlue" parent="@style/Theme.AppCompat">
<item name="colorAccent">@color/myBlueColor</item>
</style>
Then set to the ProgressBar
theme in xml:
<ProgressBar
...
android:theme="@style/progressBarBlue" />
Regarding the ProgressBar
itself, whatever you choose for AccentColor
in the style will be set for the ProgressBar
. So change the color:
<item name="colorAccent">@color/colorAccent/item>
Will succeed.
Output: