I have XML progressDrawable file for my ListView. It works well, but I found that if I use one Drawable XML file to make background for few object in one time, it works wrong.
Now I'm just created few XML Drawable files for each item from my ListView.
Now, my solution is like that:
for (int i = 0; i < 3; i++) {
View v1 = getActivity().getLayoutInflater().inflate(R.layout.item_results, null);
ProgressBar bar = v1.findViewById(R.id.MyDonut);
bar.setProgressDrawable(getResources().getDrawable(i==0?R.drawable.circle1:i==1?R.drawable.circle2:R.drawable.circle3));
listView.addHeaderView(v1);
}
Here, the circle1,circle2,circle3 - similar XML Drawable files. I think that my solution is too unflexible.
My circle:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="ring"
android:thicknessRatio="10"
android:useLevel="false">
<solid android:color="#color/orange" />
</shape>
</item>
<item>
<rotate
android:fromDegrees="270"
android:toDegrees="270"
android:pivotX="50%"
android:pivotY="50%">
<shape
android:shape="ring"
android:thicknessRatio="10"
android:useLevel="true">
<solid android:color="#color/green" />
</shape>
</rotate>
</item>
<item android:left="75dp" android:gravity="center">
<rotate android:pivotX="0%" android:fromDegrees="270" android:toDegrees="270">
<shape
android:shape="line"
android:useLevel="false">
<size android:width="75dp" android:height="75dp"/>
<stroke android:width="3dp" android:color="#color/light"/>
</shape>
</rotate>
</item>
<item android:left="75dp" android:gravity="center">
<rotate android:pivotX="0%" android:fromDegrees="270" android:toDegrees="630">
<shape
android:shape="line"
android:useLevel="false">
<size android:width="75dp" android:height="75dp"/>
<stroke android:width="3dp" android:color="#color/light"/>
</shape>
</rotate>
</item>
item-results just contains:
<ProgressBar
android:progress="0"
android:id="#+id/MyDonut"
android:layout_width="150dp"
android:layout_height="150dp"
android:background="#color/light"
style="?android:progressBarStyleHorizontal"/>
What about the other solutions of this issue?
Finaly, I found a good solution. We can use drawable.mutate() to set the other Drawable, with all properties from parent Drawable.
Documentation: https://developer.android.com/reference/android/graphics/drawable/Drawable#mutate()
It is possible to use this this way:
progressBar.setProgressDrawable(getResources().getDrawable(R.drawable.circle).mutate());
Related
i want to have a half drawable ring just like an arc.
i have a code that just creates the ring but i am confused how to make it a half ring.
how do i achieve this half ring drawable?
<shape android:shape="ring"
android:innerRadius="15dp"
android:thickness="20dp"
android:useLevel="false"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/blue"/>
<size android:height="200dp" android:width="200dp"/>
</shape>
This is the image that exactly looks like what am trying to achieve.
click here
you can create like this
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:end="0dp"
android:left="-500dp">
<shape>
<corners android:radius="500dp" />
<solid android:color="#color/colorPrimary" />
</shape>
</item>
<item
android:end="100dp"
android:bottom="100dp"
android:top="100dp"
android:start="-400dp">
<shape>
<corners android:radius="500dp" />
<solid android:color="#color/white" />
</shape>
</item>
</layer-list>
if you went to perfect view then create svg file for this
I'm trying to do a custom circular seekbar but i haven't being able to achieve this shape yet.
The problem is basically that long circle shape because i did a custom circular seekbar before:
This is the code from the second picture:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="ring"
android:thicknessRatio="16"
android:useLevel="false">
<solid android:color="#color/black" />
</shape>
</item>
<item>
<rotate
android:fromDegrees="270"
android:toDegrees="270">
<shape
android:shape="ring"
android:thicknessRatio="16"
android:useLevel="true">
<solid android:color="#color/green" />
</shape>
</rotate>
</item>
</layer-list>
I've tried changing the size but it obviously give it a different form:
Does anyone have any clue for me to get this?
I'm in the process of developing a compound view that I'm trying to get to look like the following image. I've marked (with a red arrow) the part that I'm having trouble with):
However, at present I'm unable to get the arc to cleanly start and finish (as shown below):
My code for this inner (dashed) progress drawable is as follows:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/secondaryProgress">
<rotate
android:fromDegrees="90"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="90">
<clip>
<shape
android:shape="oval"
android:useLevel="true">
<size
android:width="60dp"
android:height="60dp" />
<stroke
android:width="13dp"
android:color="#android:color/darker_gray"
android:dashWidth="3dp"
android:dashGap="5dp" />
</shape>
</clip>
</rotate>
</item>
<item android:id="#android:id/progress">
<rotate
android:fromDegrees="90"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="90">
<clip>
<shape
android:shape="oval"
android:useLevel="true">
<size
android:width="60dp"
android:height="60dp" />
<stroke
android:width="13dp"
android:color="#android:color/white"
android:dashWidth="3dp"
android:dashGap="5dp" />
</shape>
</clip>
</rotate>
</item>
</layer-list>
The surrounding progress drawables that I've made work fine with android:shape="ring" and removing the <clip> tags, but I can't seem to get the same clean clockwise progress behaviour using an android:shape="oval".
In case it helps, my code for setting the drawable to my ProgressBar is as follows:
<ProgressBar
android:id="#+id/progressbar_dashed_gauge"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="150dp"
android:layout_height="150dp"
android:indeterminate="false"
android:max="100"
android:scaleX="0.75"
android:scaleY="0.75"
android:progress="80"
android:progressDrawable="#drawable/dashed_gauge"
android:secondaryProgress="80"
/>
Any help with getting this dashed ProgressBar to show progress in a manner similar to my other ProgressBar views would be incredibly appreciated!
I have a rectangle box that I set the spinner background as but I would like to keep the down arrow that comes along with the spinner. Here is my code for the rectangle:
<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffff" />
<stroke android:width="2dp" android:color="#80000000" />
<padding android:left="2dp" android:top="2dp" android:right="2dp" android:bottom="2dp" />
See the picture below:
On the left is what i currently have, on the right is what I'm trying to achieve or at least have a down arrow in there somewhere. Any ideas on how to create this background?
I checked your code with the help of uiautomator and the spinner dropdown arrow does not show up with the background set.
You could use a LayerList and have a bitmap with gravity right. Now the bitmap is part of the background set to spinner.
<?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">
<solid android:color="#ffffff"/>
<stroke
android:width="2dp"
android:color="#80000000"/>
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp"/>
</shape>
</item>
<item>
<bitmap
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:src="#mipmap/ic_launcher" />
</item>
</layer-list>
Result :
Of course there is no border around the bitmap. You can check this link How to change the spinner background design and color for android? and see if it fits your requirement
Add Spinner inside a RelativeLayout.
In my case, the icon disapper because of parent layout's height and width.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="30dp"
android:background="#drawable/startbg"
android:layout_marginLeft="5dp"
>
<Spinner
android:id="#+id/timerSpin"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:spinnerMode="dropdown"
android:backgroundTint="#color/white"
android:layout_centerInParent="true"
android:textColor="#color/white"
android:pointerIcon="arrow"
/>
</RelativeLayout>
Check the below XML code to achieve what you need. It is similar to what Raghunandan posted / answered, but with some minor tweaks. Hope this will help you,
<?xml version="1.0" encoding="UTF-8" ?>
<selector xmlns:android = "http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape android:thickness="2dp">
<gradient android:angle = "90" android:endColor = "#ffffff" android:startColor = "#ffffff" android:type = "linear"/>
<stroke android:width = "1dp" android:color = "#80000000"/>
<corners android:radius = "5dp"/>
<padding android:bottom = "3dp" android:left = "3dp" android:right = "3dp" android:top = "3dp"/>
</shape>
</item>
<item>
<rotate
android:fromDegrees = "90"
android:pivotX = "85%"
android:pivotY = "50%"
android:toDegrees = "90">
<shape
android:shape = "line"
android:thickness="2dp"
android:top = "1dp">
<stroke
android:color="#80000000"
android:width = "1dp"/>
</shape>
</rotate>
</item>
<item>
<bitmap
android:gravity = "center|right" android:src = "#drawable/abc_btn_check_to_on_mtrl_015"/>
</item>
</layer-list>
</item>
</selector>
use the required drawable in the placeholder images i added in the code.
Hope this will help you,
Good Luck
I'm currently developing an android app where I use transparent png's as buttons for the user interface.
The buttons look kinda like this:
When the user presses the button I want to automatically tint the non-transparent pixels in the image to a darker color.
Currently I use an xml selector with different drawables for each state. This obviously doesn't scale well since I need to make several versions of each image in photoshop.
Any solutions? I heard that you can use the setColorFilter method on ImageView's to achieve this, but a full explanation would be great!
Thanks!
set this image as source to ImageButton and set ImageButton's state (backgriund) using xml state list, something like this
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape
>
<gradient
android:startColor="#android:color/background_light"
android:endColor="#android:color/darker_gray"
android:angle="90"/>
<stroke
android:width="1dp"
android:color="#999999" />
<corners
android:radius="9dp"/>
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp"/>
</shape>
</item>
<item android:state_focused="true">
<shape>
<gradient
android:endColor="#android:color/transparent"
android:startColor="#android:color/transparent"
android:angle="270"/>
<stroke
android:width="1dp"
android:color="#989797" />
<corners
android:radius="9dp"/>
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp"/>
</shape>
</item>
<item>
<shape>
<gradient
android:endColor="#android:color/transparent"
android:startColor="#android:color/transparent"
android:angle="90"/>
<stroke
android:width="1dp"
android:color="#999999" />
<corners
android:radius="9dp"/>
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp"/>
</shape>
</item>
</selector>