I am going to customize the Seekbar in Android and I am having one problem with it.
This is what I am going to do :
This is now I get :
And Here is my code:
<SeekBar
android:id="#+id/blueSlider"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_marginStart="50dp"
android:layout_marginTop="50dp"
android:layout_marginEnd="10dp"
android:splitTrack="false"
android:maxHeight="40dp"
android:shape="oval"
android:thumbOffset="-20dp"
android:secondaryProgress="0"
android:progressDrawable="#drawable/styled_progress"
android:max="#integer/slider_max_value"
android:thumb="#drawable/oval_seekbar_thumb"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintEnd_toStartOf="#+id/blueText"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
styled_progress.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape android:shape="rectangle">
<corners
android:radius="25dp"/>
<gradient
android:startColor="#color/gradient_start"
android:endColor="#color/gradient_end"
android:angle="0" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape android:shape="rectangle">
<corners
android:radius="90dp"/>
</shape>
</clip>
</item>
</layer-list>
oval_seekbar_thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#color/white" />
<size android:height="25dp" android:width="25dp"/>
</shape>
</item>
</selector>
Please help me on this problem.(missing white line)
Thank you
you can try adding a margin around your secondary progress
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- BACKGROUND-->
<item android:id="#android:id/background">
<shape android:shape="rectangle">
<corners
android:radius="25dp"/>
<size android:height="30dp"
android:width="200dp" />
<gradient
android:startColor="#color/primary"
android:endColor="#color/primary_light"
android:angle="0" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress"
android:left="10dp"
android:top="14dp"
android:right="10dp"
android:bottom="14dp">
<shape android:shape="rectangle">
<solid android:color="#color/white" />
</shape>
</item>
</layer-list>
Related
I have this image of the seekbar that I want to build:
But my seekbar is looking like this:
My seekbar has no transparency and I can not make it thinner.
How can I do this?
Here are the codes:
Seekbar:
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:alpha="0.75"
android:max="25"
android:min="7"
android:progress="1"
android:splitTrack="false"
android:progressDrawable="#drawable/progress_seek_bar_settings"
android:thumb="#drawable/thumb_seekbar_settins" />
Thumb:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="oval">
<size
android:height="20dp"
android:width="20dp" />
<solid android:color="#color/color_primary_dark" />
</shape>
</item>
</layer-list>
Progress:
<?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>
<gradient
android:startColor="#color/color_primary"
android:endColor="#color/color_primary"/>
<size
android:width="1dp"
android:height="2dp"
/>
<corners android:radius="3dp" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<gradient
android:startColor="#color/color_primary"
android:endColor="#color/color_primary" />
<size
android:width="1dp"
android:height="2dp"
/>
<corners android:radius="3dp" />
</shape>
</clip>
</item>
</layer-list>
I need help getting it as close to the first image as possible. Thank you!!
Hello in drawable/progress_seek_bar_settings transform
<item android:id="#android:id/background">
in
<item android:id="#android:id/background"
android:height="3dp"
android:gravity="center_vertical"
>
UPDATE
drawable/thumb_seekbar_settins.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="oval">
<size
android:height="20dp"
android:width="20dp" />
<solid android:color="#ebeb" />
</shape>
</item>
</layer-list>
drawable/progress_seek_bar_settings.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:height="3dp"
android:gravity="center_vertical"
>
<shape>
<gradient
android:startColor="#ebeb"
android:endColor="#ebeb"/>
<size
android:width="1dp"
android:height="2dp"
/>
<corners android:radius="3dp" />
</shape>
</item>
<item android:id="#android:id/progress"
android:height="3dp"
android:gravity="center_vertical"
>
<clip>
<shape>
<gradient
android:startColor="#ebeb"
android:endColor="#ebeb" />
<size
android:width="1dp"
android:height="2dp"
/>
<corners android:radius="3dp" />
</shape>
</clip>
</item>
</layer-list>
activity
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="40dp"
android:background="#android:color/black"
>
<SeekBar
android:layout_marginTop="40dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:alpha="0.75"
android:max="100"
android:min="7"
android:progress="1"
android:splitTrack="false"
android:progressDrawable="#drawable/progress_seek_bar_settings"
android:thumb="#drawable/thumb_seekbar_settins" />
</android.support.constraint.ConstraintLayout>
looks like this:
Hello i am trying to customize a seekbar on android but i think there is something wrong on thumb view. the problem is two side of thumb.
hear is my code.
<SeekBar
android:id="#+id/seekBar"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:max="10"
android:thumb="#drawable/thm_s"
android:secondaryProgress="5"
android:progress="5"
android:progressDrawable="#drawable/seekbar_background"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="94dp" />
thm_s.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#ffffff"/>
<size
android:width="20dp"
android:height="20dp"/>
</shape>
seekbar_background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/secondaryProgress">
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<gradient
android:angle="270"
android:endColor="#403F41"
android:startColor="#403F41" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<gradient
android:angle="270"
android:endColor="#00AEEF"
android:startColor="#00AEEF" />
</shape>
</clip>
</item>
</layer-list>
please view this image.
https://drive.google.com/file/d/0BxpdBDS2CMCWTExFREVqVmt6Nk0/view?usp=drivesdk
I want to create a drawable xml file for the shape below. It will be like a horizontal line should fill the width of the layout and a circle in the middle.
Can anyone help me on this? Thanks in advance.
Keep it simple
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:height="1dp"
android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="#ff0000" />
</shape>
</item>
<item
android:width="56dp"
android:height="56dp"
android:gravity="center">
<shape android:shape="oval">
<solid android:color="#ff0000" />
</shape>
</item>
</layer-list>
output
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txtstep"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="6dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/simple_border_white"
android:textSize="3dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/round_with_shadow"
android:gravity="center"
android:text="1"
android:textColor="#color/colorPrimaryDark"
android:textSize="26sp" />
</RelativeLayout>
simple_border_white.xml
<?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="#android:color/transparent" />
<!--background color of box-->
</shape>
</item>
<item
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#color/accentcolor" />
</shape>
</item>
</layer-list>
round_with_shadow.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#color/accentcolor"/>
<stroke
android:width="4dp"
android:color="#color/colorPrimaryLight"/>
<size android:width="40dp" android:height="40dp"/>
</shape>
hope this helps
Create your drawable file and put below code.
And change your color code red.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#color/colorAccent" />
<size
android:width="10dp"
android:height="10dp" />
</shape>
</item>
<item>
<rotate
android:fromDegrees="180"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="90">
<shape
android:shape="line"
android:top="1dp">
<stroke
android:width="0.5dp"
android:color="#color/colorAccent" />
</shape>
</rotate>
</item>
Use below drawable XML into your views background :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="100dp"
android:height="100dp"
android:gravity="center">
<shape android:shape="oval">
<solid android:color="#android:color/holo_red_dark" />
<!--background color of box-->
</shape>
</item>
<item
android:height="10dp"
android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="#android:color/holo_red_dark" />
<!--background color of box-->
</shape>
</item>
</layer-list>
Attributes height and width in <item/> are supported since 23 api.
For earlier versions you can use following code:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:gravity="center">
<shape android:shape="rectangle">
<size android:height="1dp" />
<solid android:color="#ff0000" />
</shape>
</item>
<item android:gravity="center">
<shape android:shape="oval">
<size
android:width="30dp"
android:height="30dp" />
<solid android:color="#ff0000" />
</shape>
</item>
How can a vertical line be drawn within an XML drawable when using a layer-list? I declared 3 shapes within the drawable but for some reason it doesn't appear as expected.
<?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/green"/>
</shape>
</item>
<item android:top="0dp" android:left="1dp" android:bottom="0dp" android:right="5dp">
<shape android:shape="rectangle">
<size android:width="3dp"/>
<solid android:color="#android:color/white"/>
</shape>
</item>
<item android:top="0dp" android:left="5dp" android:bottom="0dp" android:right="1dp">
<shape android:shape="rectangle">
<size android:width="3dp"/>
<solid android:color="#android:color/white"/>
</shape>
</item>
</layer-list>
Current result
Expected result
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="16dp"
android:left="15px">
<shape
android:shape="rectangle">
<solid android:color="#color/colorAccent" />/>
<size android:width="5dip" />
<stroke android:color="#color/colorAccent" />
</shape>
</item>
<item
android:width="16dp"
android:left="80px">
<shape
android:shape="rectangle">
<solid android:color="#color/colorAccent" />/>
<size android:width="5dip" />
<stroke android:color="#color/colorAccent" />
</shape>
</item>
<item
android:width="16dp"
android:left="140px">
<shape
android:shape="rectangle">
<solid android:color="#color/colorAccent" />/>
<size android:width="5dip" />
<stroke android:color="#color/colorAccent" />
</shape>
</item>
</layer-list>
Try this solution
drawable/shape.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/colorAccent" />/>
<size android:width="5dip" />
<stroke
android:color="#color/colorAccent"
/>
</shape>
Include in the layout file the following
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<View
android:layout_width="15dip"
android:layout_height="wrap_content"
android:layout_margin="#dimen/activity_horizontal_margin"
android:background="#drawable/shape"></View>
<View
android:layout_width="15dip"
android:layout_height="wrap_content"
android:layout_margin="#dimen/activity_horizontal_margin"
android:background="#drawable/shape"></View>
<View
android:layout_width="15dip"
android:layout_height="wrap_content"
android:layout_margin="#dimen/activity_horizontal_margin"
android:background="#drawable/shape"></View>
</LinearLayout>
Change the colors and fix the margins of the layout.
Attache the image for reference Image Screenshot
Please find the code of my layout below..I m new to android ..Trying to learn...Stuck with this from past few days...
I dont want to see that background as white for thumb
Let me know in case any details are required..
Attache the image for reference
Thumb.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape = "oval"
android:tintMode="multiply">
<gradient
android:angle="360"
android:endColor="#color/colorPrimaryDark"
android:startColor="#color/colorPrimaryDark" />
<size
android:height="5dp"
android:width="5dp"/>
</shape>
SeekBar:
<?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="rectangle">
<corners android:radius="5dp"/>
<gradient
android:endColor="#6c6e6a"
android:startColor="#61635f" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape android:shape="rectangle" >
<corners android:radius="5dp" />
<gradient
android:endColor="#303F9F"
android:startColor="#303F9F" />
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape android:shape="rectangle" >
<corners android:radius="5dp" />
<gradient
android:endColor="#303F9F"
android:startColor="#303F9F" />
</shape>
</clip>
</item>
</layer-list>
Content:
<SeekBar
android:id="#+id/ProgressBar"
android:layout_width="fill_parent"
android:layout_height="20dp"
android:progress="20"
android:progressDrawable="#drawable/seekbar_size"
android:thumb="#drawable/thumb3"
/>