Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create Custom Horizontal progress bar

Please help to create horizontal progress bar like thisenter image description here

like image 800
Amon Olimov Avatar asked Nov 30 '13 23:11

Amon Olimov


People also ask

How do you make a horizontal progress bar?

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.

How do I create a custom progress bar in react native?

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.

What is ProgressBar in android?

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.


2 Answers

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:

enter image description here I hope this post maybe helpful for someone..

like image 55
Ranjithkumar Avatar answered Sep 20 '22 21:09

Ranjithkumar


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

like image 28
plattnum Avatar answered Sep 20 '22 21:09

plattnum