I'm trying to customize an indeterminate progress bar in xml but I can't find a way to square the edges. I've found the default xml drawables from the SDK resources but they just reference PNGs with no mention of shape.
This is the default xml from the SDK resources:
<?xml version="1.0" encoding="utf-8"?>
<animation-list
xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item android:drawable="#drawable/progressbar_indeterminate1" android:duration="200" />
<item android:drawable="#drawable/progressbar_indeterminate2" android:duration="200" />
<item android:drawable="#drawable/progressbar_indeterminate3" android:duration="200" />
</animation-list>
progressbar_indeterminate1, 2 and 3 are just square PNGs but it always displays the progress bar with rounded edges.
I've tried creating a shape and using the PNGs as a background with this:
<animation-list
xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item
android:drawable="#drawable/progressbar_indeterminate1"
android:duration="200">
<shape>
<corners android:radius="0dp" />
</shape>
</item>
</animation-list>
But it doesn't change the shape. I'd post images but I don't have enough reputation yet.
What am I missing? Thanks for any help.
I just had the same problem and it seems that indeterminate drawable that is set using XML has rounded corners. In case you need square (or probably any other) edges then you need to set indeterminate drawable with the code:
// line below is needed to have sharp corners in the indeterminate drawable,
// ProgressBar when parsing indeterminate drawable from XML sets rounded corners.
progressBar.setIndeterminateDrawable(context.getResources().getDrawable(R.drawable.progressbar_indeterminate));
And then example of progressbar_indeterminate that I used:
<?xml version="1.0" encoding="UTF-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
<item android:drawable="#drawable/progress_2b" android:duration="100" />
<item android:drawable="#drawable/progress_1b" android:duration="100" />
</animation-list>
I needed to have images repeated so I created progress_1b (and 2b) as follows:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/progress_1"
android:tileMode="repeat" >
</bitmap>`
Where drawable/progress_1 are real images that I want to be repeated as background of indeterminate progressbar.
This solution worked for me.
This worked for me. No PNGs. Just colors.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape>
<corners android:radius="0dip" />
<stroke android:width="2px" android:color="#80c4c4c4"/>
<solid android:color="#08000000"/>
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="0dip" />
<solid android:color="#11416a"/>
</shape>
</clip>
</item>
</layer-list>
I was looking to create a horizontal indeterminate ProgressBar without rounded corners that simply swept from left to right over and over again. To that end I created the following drawable:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape android:shape="rectangle">
<solid android:color="#color/white"/>
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape android:shape="rectangle">
<solid android:color="#color/app_orange"/>
</shape>
</clip>
</item>
</layer-list>
This works just fine for a normal ProgressBar but when I set it as the indeterminateDrawable in the ProgressBar's layout file I got the correct animated behavior but the size of the ProgressBar became tiny and refused to stretch across the entire page as I had set in the layout.
After despairing of making this work I decided to create a custom view and animate it myself. To that end I used ObjectAnimator which was introduced in API 11. To use it in API 10 (and lower) I included the jar from the NineYearOldAndroid project. Worked like a charm.
The final step was to create my custom view:
public class ProgressLoad extends ProgressBar
{
public ProgressLoad(Context context, AttributeSet attrs)
{
super(context, attrs);
ObjectAnimator animator = ObjectAnimator.ofInt(this, "progress", 0, 101); // Need the 101 for the progress bar to show to the end.
animator.setDuration(2000);
animator.setRepeatCount(ObjectAnimator.INFINITE);
animator.setRepeatMode(ObjectAnimator.RESTART);
animator.start();
}
}
Then I simply included this custom view in my layout:
<com.example.views.ProgressLoad
android:id="#+id/pb_load"
style="#android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_gravity="top"
android:progressDrawable="#drawable/content_progress_bar_determinate"/>
And voila, I had a horizontal rectangular progress bar (without rounded corners) whose progress bar swept across repeatedly. When I was done with it I simply removed the custom view from its parent.
The advantage of this technique is that one can set the speed at which the animation sweeps across by simply changing the value passed to animator.setDuration(int value).
Related
I am using a custom layout for a progressbar which consist of small bars depending on the count of steps. A layout can be seen below:
I want to create an item that shows a black bar and a white bar which looks like space in between progresses.
Now, I know its possible to create this with two separate item. But I the item as progress of a progressbar. For example:
<!-- Define the progress properties like start color, end color etc -->
<item android:id="#android:id/progress">
<clip>
<shape 1>
<shape 2>
</clip>
</item>
Now, how can I create a custom item that can consist of two shapes inside it?
progress.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="3dp"
android:height="2dp"
android:drawable="#drawable/text_field"
android:start="#dimen/dimen_5dp" />
<item
android:width="3dp"
android:drawable="#drawable/text_field"
android:end="#dimen/dimen_5dp" />
</layer-list>
text_field.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true">
<shape>
<gradient
android:endColor="#color/white"
android:startColor="#color/white"/>
<corners android:radius="5dp"/>
</shape>
</item>
</selector>
I need to create a speech bubble background for an icons container like the white one in this image:
Required Appearance
I decided to use a drawable xml rather than a 9 patch image, so I can control of the rounded corner radii in my code. So, with the help of this answer to a related question, I have created the following xml:
bg_icons_container.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="0dp"
android:top="27dp"> <!-- How to make this 50% of height? -->
<rotate
android:fromDegrees="-45"
android:toDegrees="0"
android:pivotX="0%"
android:pivotY="0%"> <!-- How to make the triangle more acute? -->
<shape
android:shape="rectangle" >
<solid
android:color="#color/white"/>
</shape>
</rotate>
</item>
<item
android:left="10dp">
<shape
android:shape="rectangle">
<solid
android:color="#color/white"/>
<corners
android:radius="#dimen/border_radius_small"/>
</shape>
</item>
</layer-list>
This results in:
Actual Apperance (enlarged)
My problem is that the triangular part of the drawable is too wide. How can I make it more acute? (My minSdkVersion is 16, so I cannot use android_width on the first item to try and stretch it.)
Also, I am having to hard code android:top of the first item to 27dp. Is it possible to make this 50%, so it will correctly adjust when the height of the drawable changes?
Hi I am trying to create a background drawable for my splash screen which I'll be setting in theme itself. But the bitmap drawable used to keep in the center is getting stretched and I am not able to figure how to keep it normal. Below is my drawable code:
splash_screen_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="360"
android:centerColor="#color/colorAccentXDark"
android:endColor="#color/Black"
android:gradientRadius="500dp"
android:startColor="#color/colorAccentXDark"
android:type="radial"
android:useLevel="false" />
</shape>
</item>
<item
android:bottom="50dp"
android:top="50dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="500dp"
android:innerRadiusRatio="1"
android:shape="oval">
<gradient
android:angle="360"
android:centerColor="#color/colorAccentXDark"
android:endColor="#color/colorAccentXDark"
android:gradientRadius="400dp"
android:startColor="#color/colorAccent"
android:type="radial"
android:useLevel="false" />
</shape>
</item>
<item android:gravity="center">
<bitmap android:src="#drawable/ty_logo" />
</item>
</layer-list>
Here is code where I am setting this drawable as background of an activity:
<style name="TYTheme" parent="SearchActivityTheme.NoActionBar">
<item name="colorPrimaryDark">#color/colorAccentXDark</item>
<item name="android:alertDialogTheme">#style/AlertDialogTheme</item>
<item name="android:windowBackground">#drawable/splash_screen_bg</item>
</style>
So here the bitmap drawable ty_logo is an png is getting stretched in my phone. Since there is no scaleType option with bitmapDrawable I don't know how to handle it.
Add gravity to your bitmap set to center.
<item android:gravity="center">
<bitmap android:src="#drawable/ty_logo"
android:gravity="center" />
</item>
I hope that ty_logo is of suitable pixels and you have provided different pixels image for various device screens (ldpi, mdpi, hdpi, xhdpi, etc).
If not, do go through this answer to a similar problem you find yourself in : Resize images in bitmap in xml
Otherwise, this can be easily solved if your target version is for API 23 as <item> has width,height,gravity attributes provided for them.
And if not, the following code should work, using gravity attribute for bitmap. Again, this is going by the assumption that your logo is not having more pixels than resolution of the devices.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
...
<item>
<bitmap android:src="#drawable/ty_logo"
android:gravity="center" />
</item>
...
</layer-list>
You can wrap bitmap inside ScaleDrawable <scale> and use ScaleDrawable inside LayerListDrawable.
<item android:gravity="center">
<scale android:drawable="#drawable/ty_logo"
android:scaleHeight="80%"
android:scaleWidth="80%" >
</scale>
</item>
I am creating an app which has a progress bar as one of the components.
I want to customize the color of the progress bar with that of my device theme. I am unable to get through it.
The min level of my app is 11.
Following are the images. But I have given the color to the progress bar explicitly. But I want it that according to different devices theme, the color of the progress should also change.
E.g., in the images attached, the color of the tab selection and the progress bar progress is the same.
Please use below code...
seekbar_progress.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"
android:dither="true"
android:drawable="here set your gray image">// if possible so use 9-patch image
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<gradient
android:angle="270"
android:centerColor="#FFFFFF"
android:centerY="0.75"
android:endColor="#FFFFFF"
android:startColor="#FFFFFF" />
</shape>
</clip>
</item>
<item
android:id="#android:id/progress"
android:drawable="#drawable/seekbar_progress_bg"/>
</layer-list>
seekbar_progress_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<clip>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="Here use your blue image"// if possible so use 9-patch images
android:tileMode="repeat"
android:antialias="true"
android:dither="false"
android:filter="false"
android:gravity="left"
/>
</clip>
</item>
</layer-list>
please set background as seek_bar.xml in progressbar..
You can use this site to create a custom theme for you. Just download the folder and copy all of the files into their proper res folder (don't replace because you'll lose all of your already made layouts and style as well as your values) and then set the style of the progress bar as well as any other element to the corresponding style within those files. I like this method over doing everything by hand because it saves time and energy for simple tasks like changing the general app theme as well as specific elements.
Is there a way I can change yellow color in the SeekBar android widget?
Any soln?
Step 1: Create Your Image Drawables (9-Patch)
Before creating any XML drawables, make sure you create the image drawables (including one 9-patch drawable) needed for the seekbar background, handle, and progress sections. The 9-patch drawables will be put to use by the XML drawables in the steps below.
Create the following drawables and place them in your /res/drawable/ folder:
Step 2: SeekBar Progress Drawable
Now create an XML drawable for the Android seekbar progress (the blue-striped section in the example), call it seekbar_progress_bg.xml, and place it in your /res/drawable/ folder:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<clip>
<shape>
<gradient
android:startColor="#FF5e8ea3"
android:centerColor="#FF32a0d2"
android:centerY="0.1"
android:endColor="#FF13729e"
android:angle="270"
/>
</shape>
</clip>
</item>
<item>
<clip>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/stripe_bg"
android:tileMode="repeat"
android:antialias="true"
android:dither="false"
android:filter="false"
android:gravity="left"
/>
</clip>
</item>
</layer-list>
The above XML first draws a semi-transparent, blue gradient, then layers the semi-transparent stripe image on top of the gradient. The highlighted line of code (line 20) refers to the stripe (semi-transparent) image inside your drawable folder, created in Step 1.
For more information on creating custom shapes via XML, check out the Android drawable resources docs, specifically the bitmap and shape sections.
Step 3: SeekBar Background Drawable
Next create the main seekbar progress drawable; it’ll assign a drawable to the seekbar progress and secondaryProgress actions inside your seekbar. Name your drawable something like seekbar_progress.xml, place it inside your /res/drawable/ folder:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<nine-patch
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/seekbar_background"
android:dither="true"
/>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<gradient
android:startColor="#80028ac8"
android:centerColor="#80127fb1"
android:centerY="0.75"
android:endColor="#a004638f"
android:angle="270"
/>
</shape>
</clip>
</item>
<item
android:id="#android:id/progress"
android:drawable="#drawable/seekbar_progress_bg"
/>
</layer-list>
The first bit of highlighted code above (line 8) is referring to the seekbar background image (9-patch drawable) created in Step 1 and (line 29) is referring to the drawable you created above in Step 2.
Step 4: Bringing it all together…
At this point, all you need to do is call your seekbar_progress drawable when declaring your seekbar:
<SeekBar
android:id="#+id/frequency_slider"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:max="20"
android:progress="0"
android:secondaryProgress="0"
android:progressDrawable="#drawable/seekbar_progress"
android:thumb="#drawable/seek_thumb"
/>
The two lines of highlighted code are setting the progress and thumb drawables for the SeekBar item. The #drawable/seekbar_progress refers to the XML drawable created in the previous step.