Styled ProgressBar - android

my goal is to create such view:
To achieve that I've created progress drawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<layer-list>
<item>
<shape android:shape="ring"
android:innerRadius="0dp"
android:thicknessRatio="2.2">
<solid android:color="#color/dark_mint"/>
</shape>
</item>
<item>
<shape
android:shape="ring"
android:innerRadiusRatio="2.17"
android:thicknessRatio="27">
<solid android:color="#color/mint"/>
</shape>
</item>
<item>
<shape
android:shape="ring"
android:innerRadiusRatio="2.34"
android:thicknessRatio="27">
<solid android:color="#FFFFFFFF"/>
</shape>
</item>
</layer-list>
</item>
<item android:id="#android:id/progress">
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="270"
android:toDegrees="270">
<shape
android:shape="ring"
android:innerRadiusRatio="2.31"
android:thicknessRatio="40"
android:useLevel="true">
<solid android:color="#color/light_red"/>
</shape>
</rotate>
</item>
</layer-list>
The view seems to render fine on Android 5 however when executed on e.g. Nexus5 (Marshmallow Android 6.0.1) it doesn't show at all. It seems using rings with ratio innerRadius/thickness spoils the thing.
I managed to fix that using only ovals with paddings but it forces me to use absolute dimentions like dp and the progress bar size can change.
Do you have any ideas on implementation ?

Related

Layer list gets cropped to drawable

This is the desired drawable which I am trying to build.
The problem:
As I know layer-list size depends on the last item in it. But if I use android:drawable inside tag <item>, layer list gets cropped to the drawable size doesn't matter in what position it is.
Here is my swipe_close.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:innerRadius="0dp"
android:shape="ring"
android:thickness="34dp"
android:useLevel="false">
<solid android:color="#ffffff" />
</shape>
</item>
<item android:drawable="#drawable/ic_close_swipe" />
<item>
<shape
android:innerRadius="34dp"
android:shape="ring"
android:thickness="10dp"
android:useLevel="false">
<solid android:color="#E6E6E6" />
</shape>
</item>
</layer-list>
And the ic_close_swipe.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="39dp"
android:height="39dp"
android:viewportWidth="39"
android:viewportHeight="39">
<path
android:pathData="M37.7269,5.2568C38.5079,4.4757 38.5079,3.2094 37.7269,2.4283L36.5711,1.2726C35.7901,0.4916 34.5238,0.4916 33.7427,1.2726L20.7758,14.2395C19.9947,15.0206 18.7284,15.0206 17.9473,14.2395L4.9804,1.2726C4.1994,0.4916 2.933,0.4916 2.152,1.2726L0.9962,2.4283C0.2152,3.2094 0.2152,4.4757 0.9962,5.2568L13.9632,18.2237C14.7442,19.0048 14.7442,20.2711 13.9632,21.0521L0.9962,34.0191C0.2152,34.8001 0.2152,36.0665 0.9962,36.8475L2.152,38.0032C2.933,38.7843 4.1994,38.7843 4.9804,38.0032L17.9473,25.0363C18.7284,24.2553 19.9947,24.2553 20.7758,25.0363L33.7427,38.0032C34.5238,38.7843 35.7901,38.7843 36.5711,38.0032L37.7269,36.8475C38.5079,36.0665 38.5079,34.8001 37.7269,34.0191L24.7599,21.0521C23.9789,20.2711 23.9789,19.0048 24.7599,18.2237L37.7269,5.2568Z"
android:fillColor="#C4C4C4"/>
</vector>
I would recommend changing swipe_close.xml as follows.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:innerRadius="0dp"
android:shape="ring"
android:thickness="34dp"
android:useLevel="false">
<solid android:color="#ffffff" />
</shape>
</item>
<item
android:bottom="25dp"
android:drawable="#drawable/ic_close_swipe"
android:left="25dp"
android:right="25dp"
android:top="25dp" />
<item>
<shape
android:shape="ring"
android:thickness="10dp"
android:useLevel="false">
<solid android:color="#E6E6E6" />
</shape>
</item>
</layer-list>
Hope that helps!

trouble with layer-list in xml drawable?

I am trying to design a layout using xml. it's a chat bubble layout. I just need a shape to be place after a shape. basically i am using 2 rectangles 1 rectangle rotated by 45 degree. i need tilted rectangle to placed after a normal rectangle.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="-45"
android:pivotX="0%"
android:pivotY="0%"
android:toDegrees="0" >
<shape android:shape="rectangle" >
<solid android:color="#color/chat_incoming_color" />
</shape>
</rotate>
</item>
<item android:left="16dp">
<shape android:shape="rectangle" >
<solid android:color="#color/chat_incoming_color" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
http://imgur.com/j556772
image is shown in the link in that image first part is ok but second layout's background should be made accordingly..
Try this I hope it will help you to understand your problem.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate android:fromDegrees="45"
android:pivotX="-35%"
android:pivotY="91%"
android:toDegrees="0">
<shape>
<solid android:color="#android:color/darker_gray"/>
</shape>
</rotate>
</item>
<item android:left="16dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/darker_gray"/>
<corners android:radius="4dp"/>
</shape>
</item>
</layer-list>

Android: How to set inner boarder shadow in a drawable?

I want to create an inner boarder shadow to a layout. However so far no luck. Currently I am testing a drawable but the effect is not as pleasant as expected.
Here is my attempt:
<?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:startColor="#FFFFFF"
android:centerColor="#000000"
android:endColor="#FFFFFF"
android:angle="0" />
</shape>
</item>
<item
android:bottom="20dp"
android:left="20dp"
android:right="20dp"
android:top="20dp">
<shape android:shape="rectangle">
<solid android:color="#70D159"/>
</shape>
</item>
I want to achieve something like this:
Is there a better approach to achieve this? Thank you in advance!

Progress bar shadow only on filled part

Implementing a progress bar in android, trying to get a drop shadow on the bottom part of the filled section only, like this:
API level is KitKat and up but i wont mind a solution that applies to LOLLIPOP and up only.
Elevation does not seem to work, nor do the card View.
any sugesstions?
Create the following xml shape and place it as your progressBar background.
** The 10dp in the xml assumes the progressBar is 20dp in Height and that you want the shadow to be exactly half of it.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<layer-list>
<item android:bottom="10dp">
<shape android:shape="rectangle">
<solid android:color="#color/orange" />
</shape>
</item>
</layer-list>
</item>
<item android:id="#android:id/progress">
<clip>
<layer-list>
<item>
<shape android:shape="rectangle">
<solid android:color="#color/green" />
</shape>
</item>
<item android:top="10dp">
<shape android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="#color/black"
android:startColor="#color/white" />
</shape>
</item>
</layer-list>
</clip>
</item>
</layer-list>

How can I create the following layout in xml to use as a background for my android activities?

I'd like to create a gradient with 3 rings overlaid on it and use this as a background for all screens in my android app, either using the android:background property in xml or the SetBackgroundResource method depending on how each activity is being created.
Example background layout :
I have the following xml in my drawable folder
<?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">
<gradient
android:startColor="#C0F57C9B"
android:endColor="#C0C70F3F"
android:angle="225" />
</shape>
</item>
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="90dp"
android:thickness="8dp"
android:useLevel="false">
<solid android:color="#24f45995" />
</shape>
</item>
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="60dp"
android:thickness="10dp"
android:useLevel="false">
<solid
android:color="#24f45995" />
</shape>
</item>
<item>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="40dp"
android:thickness="6dp"
android:useLevel="false">
<solid
android:color="#24f45995" />
</shape>
</item>
</layer-list>
The problem I have is how to position the rings.
Is a layer-list the right way to go or should I be using some other method?
Grateful for any advice.

Categories

Resources