Could you please help me to draw custom Seekbar like shown in this picture -
Here is my code:
<android.support.v7.widget.AppCompatSeekBar
android:id="#+id/volume_seekbar"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:progressDrawable="#drawable/seekbar_drawable"/>
seekbar_drawable.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:drawable="#drawable/seekbar_background" />
<item
android:id="#android:id/progress"
android:drawable="#drawable/seekbar_progress" />
</layer-list>
seekbar_background.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">
<gradient
android:layout_height="20dp"
android:centerY="0.5"/>
</shape>
</item>
<item>
<clip>
<bitmap
android:layout_height="10dp"
android:src="#drawable/volume_empty"
android:tileMode="repeat" />
</clip>
</item>
</layer-list>
seekbar_progress.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<clip>
<shape>
<gradient
android:centerY="0.5"
android:endColor="#color/colorWhite"
android:startColor="#color/colorWhite" />
</shape>
</clip>
</item>
<item>
<bitmap
android:src="#drawable/volume_empty"
android:tileMode="repeat" />
</item>
</layer-list>
where #drawable/volume_empty is volume_empty.png
I have found solution.
seekbar_background.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">
<gradient
android:centerY="0.5"/>
</shape>
</item>
<item>
<clip>
<bitmap
android:src="#drawable/ic_volume_empty"
android:tileMode="repeat" />
</clip>
</item>
</layer-list>
seekbar_progress.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<clip>
<bitmap
android:src="#drawable/ic_volume_full"
android:tileMode="repeat" />
</clip>
</item>
<item>
<bitmap
android:src="#drawable/ic_volume_empty"
android:tileMode="repeat" />
</item>
</layer-list>
I've added similar transparent padding in both images, like ic_volume_empty - ic_volume_empty and ic_volume_full - ic_volume_full
Related
Hi guys so i created 2 xmls for 3 shapes. 2 shapes are rectangle 1 is ring.
First XML
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#color/colorGrey"/>
<size android:height="40dp" android:width="10dp"/>
</shape>
Second XML
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#color/colorWhite"/>
<size android:height="40dp" android:width="40dp"/>
</shape>
Then i created a layer-list drawable like this
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap android:src="#drawable/rectangle"
android:gravity="center" />
</item>
<item android:top="40dp">
<bitmap android:src="#drawable/circle"
android:gravity="center" />
</item>
<item android:top="40dp">
<bitmap android:src="#drawable/rectangle"
android:gravity="center" />
</item>
</layer-list>
My main goal was to create this. Main problem is they are stacking top of each other.
Try this (I've assumed a 40x40dp image size based on your code and a white background based on your image):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle">
<solid android:color="#color/white"/>
<size android:height="40dp" android:width="40dp"/>
</shape>
</item>
<item
android:right="18dp"
android:left="18dp">
<shape
android:shape="rectangle">
<solid android:color="#color/green"/>
<size android:height="40dp" android:width="4dp"/>
</shape>
</item>
<item android:gravity="center">
<shape
android:shape="oval">
<solid android:color="#color/green"/>
<size android:height="15dp" android:width="15dp"/>
<stroke android:width="2dp" android:color="#color/white"/>
</shape>
</item>
</layer-list>
I want to make custom radio button.I have created a drawable for normal(radio_normal) state.But I find it difficult to create a shape for checked state(radio_pressed).I have tried creating my desired way.But didn't work out well.I don't know if I have done it the right way.For checked state the shape should look like this.The outer border and the inner circle must be white in color.Can anybody help me with that?
radio_normal:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:useLevel="false">
<solid
android:color="#2196f3"></solid>
</shape>
radio_pressed:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#android:color/transparent">
</solid>
<size
android:height="60dp"
android:width="60dp">
</size>
<stroke
android:color="#ffffff"
android:width="1dp"
>
</stroke>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid
android:color="#ffffff">
</solid>
</shape>
<size
android:height="30dp"
android:width="30dp">
</size>
</item>
</layer-list>
radio_bg:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="true"
android:drawable="#drawable/radio_pressed"
>
</item>
<item
android:state_checked="false"
android:drawable="#drawable/radio_normal"
>
</item>
</selector>
activity_main:
<RadioButton
android:id="#+id/radio"
android:layout_centerInParent="true"
android:layout_width="10dp"
android:button="#drawable/radio_bg"
android:layout_marginTop="100dp"
android:layout_height="10dp"
/>
This is about as close as I can get you, hope it works on your side and that it helps :)
radio_normal:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:useLevel="false">
<solid android:color="#2196f3" />
<size
android:width="25dp"
android:height="25dp" />
</shape>
radio_pressed:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:padding="3dp">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:useLevel="false">
<solid android:color="#android:color/white" />
<size
android:width="25dp"
android:height="25dp" />
</shape>
</item>
<item
android:bottom="7dp"
android:left="7dp"
android:right="7dp"
android:top="7dp">
<shape
android:shape="oval"
android:useLevel="false">
<solid android:color="#android:color/white" />
</shape>
</item>
</layer-list>
radio_bg:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="true"
android:drawable="#drawable/radio_pressed"
>
</item>
<item
android:state_checked="false"
android:drawable="#drawable/radio_normal"
>
</item>
</selector>
activity_main:
<RadioButton
android:id="#+id/radio"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:button="#drawable/radio_bg"/>
Let me know if this worked for you :)
Is this maybe what you were looking for ?
radio_pressed:
<?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="ring"
android:useLevel="false">
<solid android:color="#android:color/white" />
<size
android:width="10dp"
android:height="10dp" />
</shape>
</item>
<item
android:bottom="3dp"
android:left="3dp"
android:right="3dp"
android:top="3dp">
<shape
android:shape="oval"
android:useLevel="false">
<solid android:color="#android:color/white" />
</shape>
</item>
</layer-list>
Reaction to comment:
The code:
<?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="ring"
android:useLevel="false">
<solid android:color="#android:color/white" />
<size
android:width="150dp"
android:height="150dp" />
</shape>
</item>
<item
android:bottom="50dp"
android:left="50dp"
android:right="50dp"
android:top="50dp">
<shape
android:shape="oval"
android:useLevel="false">
<solid android:color="#android:color/white" />
</shape>
</item>
</layer-list>
Note: The only changes made was in the sizes to accomodate your imageview of 150dp X 150dp. When using it for your radio button I highly reccomend using the 10x10dp sizes
I want to draw a line in the XML with rounded corners.I am not getting how to create that.I want to use this line for the Seekbar. I want to give rounded corners to the line just like rectangle.
<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape android:shape="line">
<stroke
android:width="5dp"
android:color="#7b7878" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape android:shape="line">
<stroke
android:width="5dp"
android:color="#FF0000" />
</shape>
</clip>
</item>
You need to setStrokeCap() to Paint.Cap.ROUND
you can do it like this
//seek_bar.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:drawable="#drawable/seek_bar_background"/>
<item android:id="#android:id/progress"
android:drawable="#drawable/seek_bar_progress" />
</layer-list>
//seek_bar_background.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="270"
android:startColor="#8a8c8f"
android:endColor="#58595b" />
<corners android:radius="5dip" />
</shape>
//seek_bar_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:drawable="#drawable/seek_bar_background"/>
<item android:id="#android:id/progress">
<clip android:drawable="#drawable/seek_bar_progress_fill" />
</item>
</layer-list>
//seek_bar_progress_fill.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:startColor="#b3d27e"
android:endColor="#93c044"
android:angle="270"
/>
<corners android:radius="5dip" />
</shape>
Ref link
I need to set size for item in layer-list. For using as windowBackground in launch activity. I wrote this XML file and Android Studio displays it correctly. But in application the logo always full screen. How to make it?
<?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:endColor="#000004"
android:gradientRadius="1000"
android:startColor="#1f3371"
android:type="radial" >
</gradient>
</shape>
</item>
<item>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/texture_5"
android:tileMode="repeat" />
</item>
<item android:drawable="#drawable/logo"
android:height="100dp"
android:width="77dp"
android:gravity="center"
>
</item>
</layer-list>
I found solution, but I expected better way.
Here is final code:
<?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:endColor="#000004"
android:gradientRadius="1000"
android:startColor="#1f3371"
android:type="radial" >
</gradient>
</shape>
</item>
<item>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/texture_5"
android:tileMode="repeat" />
</item>
<item android:drawable="#drawable/logo"
android:bottom="214dp"
android:top="214dp"
android:left="100dp"
android:right="100dp"
android:gravity="center"
android:tileMode="repeat"
>
</item>
</layer-list>
At least it works at xxhdpi and xhdpi without distortion.
Starting from API 23, it is possible to set width and height right within the "item" tag:
<item android:drawable="#drawable/logo" android:width="..." android:height="..." />
You can do the followin
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/blanco"/>
<item
android:width="200dp"
android:height="200dp"
android:gravity="center">
<bitmap
android:gravity="fill"
android:src="#drawable/your_image"
android:mipMap="true"/>
</item>
</layer-list>
Just change width and height
I had the same problem and found the solution here.
I had to use my vector drawable as the source to a bitmap object:
<item>
<bitmap
android:gravity="center"
android:src="#drawable/ic_logo_splash"/>
</item>
I want to create a shape with selector as solid color.
On Android 5.0+, this code works perfectly, but on 4.X, it doesn't works.
shape.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/my_selector"/>
<size android:height="40dp" android:width="40dp"/>
<corners android:radius="10dp" />
</shape>
my_selector.xml
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:color="#color/color_1"
android:state_checked="false"/>
<item
android:color="#color/color_2"
android:state_checked="true"/>
</selector>
This drawable is applied to CheckBox background.
you should change order to write state like this and use your shape in item:
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape android:shape="rectangle" >
<solid android:color="#color/my_selector"/>
<size android:height="40dp" android:width="40dp"/>
<corners android:radius="10dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<solid android:color="#color/my_deselec"/>
<size android:height="40dp" android:width="40dp"/>
<corners android:radius="10dp" />
</shape>
</item>
</selector>
Use in this manner
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>.......</shape>
</item>