Menu
Please help to create horizontal progress bar like this
800
In Android, by default a progress bar will be displayed as a spinning wheel but If we want it to be displayed as a horizontal bar then we need to use style attribute as horizontal. It mainly use the “android. widget. ProgressBar” class.
js : import React, { useEffect, useState, useRef } from 'react'; import { Text, View, StyleSheet } from 'react-native'; import Constants from 'expo-constants'; const App = () => { return ( <View style={styles. container}> <Text> We Will Start Here </Text> </View> ); } export default App; const styles = StyleSheet.
Android ProgressBar is a graphical view indicator that shows some progress. Android progress bar displays a bar representing the completing of the task. Progress bar in android is useful since it gives the user an idea of time to finish its task.
Set style for horizontal progress bar
style="?android:attr/progressBarStyleHorizontal"
Create custom progress drawable: green_progress_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#779d9e9d"
android:centerColor="#995a5d5a"
android:centerY="0.75"
android:endColor="#ff747674"
android:angle="270"
/>
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#80ffd300"
android:centerColor="#80ffb600"
android:centerY="0.75"
android:endColor="#a0ffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
<item
android:id="@android:id/progress"
>
<clip>
<shape>
<corners
android:radius="5dip" />
<gradient
android:startColor="#33FF33"
android:endColor="#008000"
android:angle="270" />
</shape>
</clip>
</item>
</layer-list>
My progressbar code:
<ProgressBar
android:progressDrawable="@drawable/green_progress_drawable"
style="?android:attr/progressBarStyleHorizontal"
android:id="@+id/mf_progress_bar"
app:layout_widthPercent="80%"
app:layout_heightPercent="8%"
app:layout_marginTopPercent="5%"
android:layout_gravity="center_horizontal"
/>
Code credit to @Ryan https://stackoverflow.com/a/5745923/3879847
My output:
I hope this post maybe helpful for someone..
55
You do not need a custom progress bar. Use style="@android:style/Widget.ProgressBar.Horizontal" in your layout xml file. You will also need to use
ProgressBar.incrementProgressBy(int progress);
See Android Developers|ProgressBar
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
