Custom logo as progress bar in android studio - android

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.

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();

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.

Related

How can use ImageView with 2 images in android to hide or show clip one of the 2 images?

I see that i can set 2 images in one ImageView in android using a new Drawable XML file under resources, called for this example my2img.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/img1" />
<item android:drawable="#drawable/img2" />
</layer-list>
and Apply to the imageView.
testimage.setImageDrawable(getResources().getDrawable(R.layout.my2img));
But how can i access one of the 2 images from Java code ?
For example on runtime i want to show the first image full overlapped by a only a slice of the other image, another moment the full second image..and so on... just like a progress bar behaviour.
Is there any code sample ?

Creating a ProgressBar in Android with no background

I would like to create a ProgressBar with no background. I've been able to turn the background transparent, but there is still padding in the space where the background normally shows. Setting padding to 0 does not change this. Is it possible to achieve what I want without creating a custom drawable?
The issue is that the default 9Patch images used for ProgressBar have space around them. For example below is the standard holo_dark image used for the primary progress, secondary progress and background . As you can see, they each have areas of transparent space in their images.
progress_primary_holo_dark.9.png
progress_secondary_holo_dark.9.png
progress_bg_holo_dark.9.png
To achieve what you are after, you'll need to supply your own 9Patch images which do not have this extra space. Use setProgressDrawable() in your code or android:progressDrawable in xml, to set the Drawable for your ProgressBar.
You can combine all the necessary images in a single LayerList Drawable like the Android OS does. For example:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background"
android:drawable="#drawable/my_progress_bg" />
<item android:id="#android:id/secondaryProgress">
<scale android:scaleWidth="100%"
android:drawable="#drawable/my_progress_secondary" />
</item>
<item android:id="#android:id/progress">
<scale android:scaleWidth="100%"
android:drawable="#drawable/my_progress_primary" />
</item>
</layer-list>
You can find all the default graphic resources used by Android in the sdk/platforms/android-xx/data/res/ folder on the computer you're developing on.

Touch feedback for ImageButton (Android)

I'm developing an app for ICS. I like the way in which buttons in action bar feedbacks to user's touch (blue glow around), is there some simple way to add the same feedback for ImageButton?
Something like this, but with ImageButton:
Yes, go into your SDK.
Navigate to Platforms->android-15->data->res
You are now in the res folder for the system. If you hunt in the drawable folder you should be able to find the xml selector that represents the default system button. That selector should make reference to some images that are stored in the other drawable folders. Pick a resolution and go into its folder and find all of the required images.
Once you've got all the required resources you can include them in your own project. Then use your own selector to show the alternate image when it is pressed.
Im not certain the effect you are after but I think if you set btn_default_holo_pressed.9.png as the background of an image view with an image in the src it should appear with the blue bar around the outside of it. With the selector you can make this happen during the press action.
If you are just trying to add feedback
Use the drawable as the ImageButton background.
<ImageButton
android:id="#+id/btn_show_filter_dialog"
android:layout_width="24dp"
android:layout_height="24dp"
android:background="#drawable/ic_filter_state"/>
Create the drawable file for your Image button:
ic_filter_state.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="false"
android:drawable="#drawable/ic_filter_disable" />
<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="#drawable/ic_filter_click" />
<item
android:state_focused="true"
android:state_enabled="true"
android:drawable="#drawable/ic_filter_roll" />
<item
android:state_enabled="true"
android:drawable="#drawable/ic_filter_solid" />
</selector>
For feedback, you will only really need state_pressed="true" and state_enabled="true" drawables
Here is an example with a vector drawable, but you can add your own drawable.
Change the fillColor column for each state:
ic_filter_solid.xml:
<vector android:alpha="1" android:height="24dp"
android:viewportHeight="512" android:viewportWidth="512"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#ffffff" android:pathData="M487.976,0H24.028C2.71,0 -8.047,25.866 7.058,40.971L192,225.941V432c0,7.831 3.821,15.17 10.237,19.662l80,55.98C298.02,518.69 320,507.493 320,487.98V225.941l184.947,-184.97C520.021,25.896 509.338,0 487.976,0z"/>
</vector>
I think this might be what you're looking for:
Image in Canvas with touch events
Imagebuttons and imageviews are pretty much similar to each other.

Android Image Button Styling

How do I style an image button so that it displays as a PNG icon but on click/touch, the PNG shape gets a soft glowing edge?
You probably want to look at 9-patch
Basically you create a transparent png with the glow effect baked into the image, and it'll scale the edges while keeping the corners intact and letting you place the content within a predefined area of the image.
To map your images to a button, you need a selector, which is a xml file and goes into your projects drawables. A sample grabbed from another answer looks like this
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/red_button_pressed" />
<item android:state_focused="true" android:drawable="#drawable/red_button_focus" />
<item android:drawable="#drawable/red_button_rest" />
</selector>

seekbar progress customization

Using progress_horizontal.xml as a base drawable for my seekbar i was able to customize it pretty well. But unfortunately i stuck with the following problem. I need my progress to be made from two horizontal lines with different color something like this http://picasaweb.google.com/manigoad/Other#5442553107070487330 . In this case a blue line and transparent line below it.
So how can i make my progress to be made from two different colors.
Tnaks
I've had a look into creating the "stack" of shapes that you are looking for using "drawable" XML, but the padding/height values seem to be ignored.
There are two possible workarounds that I can think of:
Create a class that implements Drawable for the background and the progress and draw the custom colours/gradients yourself.
-OR-
Create a PNG of the background (on the right) and progress (on the left) from your mockups. About 30px wide should be fine (if you make them 1px wide, it will be put more pressure on the layout because it has to be repeated more times). Throw those in res/drawable/ and then load them into your styles using <bitmap>:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<bitmap android:src="#drawable/scroll_bg" />
</item>
<item android:id="#android:id/progress">
<clip>
<bitmap android:src="#drawable/scroll_progress" />
</clip>
</item>
</layer-list>

Categories

Resources