I want to make circular progress bar inside button.
but I don't want to use library like dmytrodanylyk/circular-progress-button, etc..
I think this solution is used drawable.
so, i make circular_progress.xml,
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1"
android:toDegrees="360" >
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="8"
android:useLevel="false" >
<size
android:height="48dip"
android:width="48dip" />
<gradient
android:centerColor="#f0f0f0"
android:centerY="0.50"
android:endColor="#000000"
android:startColor="#ffffff"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
and,
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Log In"
android:layout_below="#+id/passwordWrapper"
android:layout_marginTop="5dp"
android:theme="#style/AppTheme.SignButton"
android:id="#+id/loginButton"
android:drawableRight="#drawable/circular_progress"
/>
but, progress bar is stopped.
second solution is to make custom button class having progressbar.
but i don't know to make custom button class having progressbar.
Use ProgressBar inside your button like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Log In"
android:layout_below="#+id/passwordWrapper"
android:layout_marginTop="5dp"
android:theme="#style/AppTheme.SignButton"
android:id="#+id/loginButton"
/>
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"/>
</RelativeLayout>
and in your activity initialize the ProgressBar like this
ProgressBar progressBar = (ProgressBar) findViewById(R.id.progress_bar);
and add this when you want the ProgressBar to be visible
progressBar.setVisibility(View.VISIBLE);
and then add this when you want to hide your ProgressBar
progressBar.setVisibility(View.GONE);
Related
This is my custom white-transparent wheel ProgressBar
progressbar_circle.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadiusRatio="2.5"
android:thickness="4dp"
android:useLevel="false">
<gradient
android:type="sweep"
android:startColor="#android:color/white"
android:centerColor="#android:color/white"
android:endColor="#android:color/transparent"
/>
</shape>
In the preview window of Android studio, this element has showed correctly.
But after debug testing in both emulator (Android 9) and device (Android 6), ProgressBar showed as #color/colorAccent wheel Progressbar.
I have tried to change android:shape, android:innerRadiusRatio, android:thickness, even change gradient to solid color. Nothing changed.
Here is my progress_task_layout.xml
<?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:orientation="vertical">
<ImageView
android:id="#+id/correct_icon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/correct_icon"
android:padding="#dimen/padding_large"
android:visibility="gone" />
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="8dp"
android:padding="#dimen/padding_large"
android:progressDrawable="#drawable/progressbar_circle"
android:visibility="gone" />
</RelativeLayout>
How to accomplish custom android ProgressBar on xml without dynamically programming in java?
Create progress.xml file in drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="8"
android:useLevel="false">
<size
android:width="76dip"
android:height="76dip" />
<gradient
android:angle="0"
android:endColor="#1672B6"
android:startColor="#android:color/transparent"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
Then use it like this:
<ProgressBar
android:id="#+id/pbarLoading"
android:layout_width="36dp"
android:layout_height="36dp"
android:indeterminateDrawable="#drawable/progress"/>
I have the mic icon and surrounding the mic icon, I need to place the Progress Bar to handle some running process like below:
<ImageView
android:id="#+id/iv_mic_movable"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="68dp"
android:src="#drawable/record" />
<ProgressBar
android:id="#+id/pb_assist"
style="?android:attr/progressBarStyleLarge"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="53dp"
android:visibility="gone" />
The above code shows the UI as follows:
I want to show the progress bar like this, But this progress is very Thick. How to make it somewhat thinner with only 1dp?
None of the above answers worked for me. Struggling around found a below working solution.
progressbar_circular.xml. Use android:thicknessRatio for thickness of the circle. More the value will be, thinner it will be.
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="0"
android:toDegrees="360" >
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="40"
android:useLevel="false" >
<size
android:height="48dip"
android:width="48dip" />
<gradient
android:centerColor="#color/colorPrimary"
android:centerY="0.50"
android:endColor="#color/color_black"
android:startColor="#color/colorPrimary"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
Progress bar layout will be like below:
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="?android:attr/progressBarStyleLarge"
android:indeterminateDrawable="#drawable/progressbar_circular"
android:layout_gravity="center_horizontal"
android:visibility="visible"/>
Here is custom ProgressBar. You can set thickness of progress inside shape.
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="172dp"
android:layout_height="172dp"
android:indeterminate="false"
android:max="100"
android:visibility="visible"
android:progress="0"
android:layout_gravity="center_horizontal" //updated line
android:layout_marginTop="53dp" //updated line
android:background="#drawable/circle_shape"
android:progressDrawable="#drawable/circle_progress_foreground"
/>
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.2"
android:thickness="5dp"
android:useLevel="false">
<solid android:color="#ABBAC2" />
</shape>
circle_progress_foreground.xml
Change android:thickness as per your requirement
<?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.7"
android:shape="ring"
android:thickness="2dp"
android:useLevel="true">
<solid android:color="#fbcb09" />
</shape>
</rotate>
You can also achieve this by adding mimimum width and height
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="23dp"
android:layout_marginTop="20dp"
android:indeterminate="false"
android:max="100"
android:minHeight="5dp"
android:minWidth="200dp"
android:progress="1" />
try to add this below style on your xml progessBar layout,
style="#android:style/Widget.ProgressBar.Large.Inverse"
Update
try to add this property:
android:progressDrawable="#android:drawable/progress_horizontal"
this is my code from layout...
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/rotate"
android:layout_centerInParent="true"
android:progressDrawable="#drawable/b"
android:visibility="gone" />
(b is a PNG)
android still showing default one
then tried this
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/rotate"
android:layout_centerInParent="true"
android:progressDrawable="#drawable/rotate"
android:visibility="gone" />
as you can see I set progressDrawable to an drawable XML which I tried to copy from everywhere so I think the problem cant be there.
but anyway I will post it
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="90"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="7.0">
<gradient
android:centerColor="#007DD6"
android:endColor="#007DD6"
android:startColor="#007DD6"
android:angle="0"
android:type="sweep"
android:useLevel="false" />
</shape>
this is an extract from tutorials point
but android still showing the default one
also I made this but I have a suspicion that is a terrible mistake
<?xml version="1.0" encoding="utf-8"?>
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="90"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360">
<bitmap android:src="#drawable/b"/>
</rotate>
but there is no way...
I am stuck no matter what I do Android still showing default one. anyone can help?
Use indeterminateDrawable , not progressDrawable.
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/rotate"
android:layout_centerInParent="true"
android:indeterminateDrawable="#drawable/b"
android:visibility="gone" />
You cant use android:progressDrawable="some value" for animation.
1)Assign some id to rotate tag
2)write this in your activity.java file
Animation anim=AnimationUtils.loadAnimation(this,R.anim.id_of_your_rotate)
3)Retrieve the reference of ProgressBar
ProgressBar demo=new ProgressBar(this);
demo.setAnimation(anim);
i am using progressbar in toolbar ,by default its loading Accent color,i want to customize the color of progressbar .i am using support library 22.0.0
?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/my_aweseome_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:background="?attr/colorPrimary">
<ProgressBar
android:id="#+id/progress_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:indeterminate="true"
/>
so i tried to change progressbar color using setColor filter
progressBar = (ProgressBar) findViewById(R.id.progress_spinner);
progressBar.getIndeterminateDrawable().setColorFilter(Color.parseColor("#FF104D"),//Pink color
android.graphics.PorterDuff.Mode.MULTIPLY);
progressBar.setVisibility(View.VISIBLE);
but i tried to set as pink ,but out put is some other different color.
progressBar.getIndeterminateDrawable().setColorFilter(Color.WHITE,android.graphics.PorterDuff.Mode.MULTIPLY)),
when i set as white color,its not even showing up..
Use :
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:indeterminateDrawable="#drawable/progress"
/>
use create progress.xml in your drawable folder :
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="720" >
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="8"
android:useLevel="false" >
<size
android:height="86dip"
android:width="86dip" />
<gradient
android:angle="0"
android:endColor="#color/blue"
android:startColor="#android:color/transparent"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
try this ,
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" >
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="20"
android:useLevel="false" >
<size
android:height="48dp"
android:width="48dp" />
<gradient
android:centerColor="#color/tranparent"
android:centerY="0.50"
android:endColor="#color/red"
android:startColor="#color/tranparent"
android:type="sweep"
android:useLevel="false" />
</shape>
Try with PorterDuff.Mode.SRC_IN. It works for me, at least with SeekBar.
I got a circular ProgressBar.
I want the circular not to rotate, but to fill in. Like say maxvalue is 100... let's say setprogress(10) then 10 % of the progress bar is colored... and so on
how can this be done? How can I handle it? it keeps rotating over and over....
progress_bar.xml
<ProgressBar
android:id="#+id/progress"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginBottom="20dp"
android:indeterminate="false"
android:indeterminateDrawable="#drawable/progress_bar"
android:max="100" />
progress_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:pivotX="50%"
android:pivotY="50%">
<shape android:shape="ring" android:innerRadiusRatio="4"
android:thicknessRatio="48" android:useLevel="false">
<size android:width="18dip" android:height="18dip" />
<gradient android:type="sweep" android:useLevel="false"
android:startColor="#52c1b1" android:centerColor="#52c1b1"
android:endColor="#ffffff" android:centerY="0.50" />
</shape>
</animated-rotate>
There is not direct way to achieve what you want. The only way, AFAIK, is to have a custom ProgressBar and override onDraw. Through the canvas you get as parameter you can draw an arc, for instance representing the percentage of your progress.