Custom logo as progress bar in android studio

rey
October 18, 2021
243 views
1 vote
2 Answers

I want to add my logo as a progress bar instead of rounded circle loading. I’ve already made the xml file for the logo, can anyone help me with that. Logo color to load is #4F576C

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="962dp"
    android:height="1000dp"
    android:viewportWidth="962"
    android:viewportHeight="1000">
  <path
      android:pathData="M273.49,0L354.35,0C369.89,1.61 385.42,3.33 400.95,5.09C548.19,24.24 688.17,94.89 790.98,202.02C843.12,255.89 885.78,318.88 916.81,387.1C918.52,390.97 918.63,395.84 916.54,399.58C911.55,405.74 903.84,408.49 896.99,411.98C875.62,421.58 855.08,432.91 833.94,442.97C829.86,445.37 824.64,444.68 820.72,442.31C815.61,437.63 813.09,430.95 810.07,424.89C761.35,321.35 678.62,234.51 578.23,179.78C484.58,128.9 376.16,104.74 269.79,113.89C261.95,114.12 252.83,116.37 246.11,110.87C241.48,103.88 242.44,95.03 241.61,87.1C240.59,65.4 238.8,43.74 237.67,22.04C237.24,15.34 237.3,6.62 244.68,3.73C253.81,0.4 263.99,1.32 273.49,0Z"
      android:fillColor="#4f576c"/>
  <path
      android:pathData="M282.45,174.59C302.9,173.59 323.4,173.82 343.87,174.24C446.84,181.28 547.83,220.48 627.01,286.99C643.97,300.59 658.93,316.39 674.21,331.79C706.02,366.37 732.36,405.82 753.05,447.98C756.62,455.72 761.73,463.24 762.07,472.03C761.85,476.86 758.43,481.16 754,482.98C730.08,495.14 705.91,506.83 682.05,519.11C677.63,521.58 672.38,522.55 667.38,521.72C659.55,518.06 657.61,508.98 653.96,502.02C622.96,435.87 572.21,379.14 509.6,341.44C438.85,297.69 353.1,279.14 270.53,288.37C262.8,290.62 254.57,285.33 253.74,277.2C251.56,249.68 250.58,222.06 248.41,194.54C246.87,187.68 249.99,179.38 257.06,177.12C265.4,175.34 273.97,175.22 282.45,174.59Z"
      android:fillColor="#4f576c"/>
  <path
      android:pathData="M302.45,341.55C343.79,339.56 385.19,347.21 424.1,360.91C441.27,367.37 457.72,375.61 473.96,384.12C515.97,408.35 552.6,442 579.76,482.23C591.22,500.05 601.71,518.57 609.94,538.12C611.57,542.38 612.79,547.4 610.73,551.71C608.94,556.2 603.87,557.8 600.05,560.08C576.6,571.54 553.38,583.47 529.96,594.99C525.88,596.33 521.32,599.09 517.05,597.01C511.62,594.8 508.78,589.26 506.83,584.08C485.26,530.51 440.25,486.77 385.96,467.02C351.98,454.17 314.43,450.85 278.61,456.56C272.42,457.25 265.46,453.03 264.57,446.58C262.88,436.79 263.07,426.81 262.27,416.94C261.28,397.61 259.35,378.33 258.94,358.97C257.42,352.6 262.1,345.64 268.4,344.47C279.61,342.27 291.08,342.17 302.45,341.55Z"
      android:fillColor="#4f576c"/>
  <path
      android:pathData="M277.44,532.58C326.43,527.13 377.01,545.48 411.79,580.21C448.27,614.64 466.21,666.34 462.04,716.01C459.36,744.56 449.39,772.45 433.05,796.04C425.07,808.16 414.47,818.2 405.7,829.72C373.32,870.64 340.76,911.42 308.41,952.38C305.91,955.16 303.76,958.45 300.59,960.55C294.21,963.76 285.97,962.25 281.83,956.19C251.9,918.15 221.66,880.34 191.6,842.39C183.35,832.01 175.28,821.47 166.28,811.72C139.9,782.1 124.86,742.7 124.93,703.01C122.77,648.93 150.65,595.71 194.06,564.08C218.31,546.26 247.47,535.25 277.44,532.58M282.41,623.54C273.49,624.49 265.02,627.91 257.19,632.16C232.39,645.69 216.89,674.81 220.11,702.98C221.58,729.22 239.06,753.49 263.04,763.94C285.82,774.83 314.16,771.95 335.01,758C345.41,751.59 353.06,741.6 359.18,731.21C373.63,704.24 369.18,668.3 347.83,646.16C331.46,628.44 306.28,619.57 282.41,623.54Z"
      android:fillColor="#4f576c"/>
</vector>

I want to load from bottom, when it loads the logo should come only to that particular area and rest of the area should be white or I’ll give a faded color. Can anyone help me with this? Thanks in advance.

Answers

You would use AnimationDrawable instead of ProgressBar, copy and modify from the original vector to quadruple vectors (like drawable/phase1.xml ~ drawable/phase4.xml) and list them in an animation list (like drawable/progress.xml). For example:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item
        android:drawable="@drawable/phase1"
        android:duration="100" />
    <item
        android:drawable="@drawable/phase2"
        android:duration="100" />
    <item
        android:drawable="@drawable/phase3"
        android:duration="100" />
    <item
        android:drawable="@drawable/phase4"
        android:duration="100" />
</animation-list>

Then you can load it into an ImageView and animate it:

ImageView progress.setImageResource(R.drawable.progress);
((AnimationDrawable) progress.getDrawable()).start();

- Cheticamp
- October 18, 2021 at 9:19 pm
- 0 votes
0
Your image has four segments: The pin and three arcs. Since this needs to behave as a progress bar, you will need a method to make the segments appear individually based upon a state. (Because progress bars are state-based, a simple animation will not be suitable.)

First, separate each segment into an individual drawable file and combine all these files into a Layer List Drawable.
```
<layer-list>
    <item android:drawable="@drawable/meter_pin" />
    <item android:drawable="@drawable/meter_bottom_arc" />
    <item android:drawable="@drawable/meter_middle_arc" />
    <item android:drawable="@drawable/meter_top_arc" />
</layer-list>
```
Now, you can access each layer individual to set its alpha value. The following code will look up a view that has the above drawable set as a background. The code then turns the pin and the bottom arc to be visible and the others invisible.
```
val view = findViewById<View>(R.id.view)
val bg = view.background as LayerDrawable
bg.getDrawable(0).alpha = 255
bg.getDrawable(1).alpha = 255
bg.getDrawable(2).alpha = 0
bg.getDrawable(3).alpha = 0
```
Which will give us this image:

You can set the alpha values for any combination from invisible to faded to fully visible. I would put this code into a separate class to make it more manageable and create a setProgress() function to change its appearance.

If you want to show the progress in more discrete steps, you can use a Clip Drawable.
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.