I created a custom seekbar thumb, it looks very good on android studio previews, but when running the app on my device, it looks wrong !
what it should look like
what it actually look like on my device
my seekbar_thumb.xml code
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:height="35dp" android:width="35dp" >
<shape android:shape="oval">
<solid android:color="#fff" />
</shape>
</item>
<item android:gravity="center" android:height="15dp" android:width="15dp">
<shape android:shape="oval">
<solid android:color="#color/colorPrimary" />
</shape>
</item>
my seekbar code
<SeekBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/seekBar"
android:max="100"
android:progress="50"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:thumb="#drawable/seekbar_thumb"
android:progressDrawable="#drawable/progress_bar_background"
android:layout_marginBottom="#dimen/seekbar_margin_bottom"
android:layout_marginRight="#dimen/seekbar_margin_rt"
android:layout_marginLeft="#dimen/seekbar_margin_lt"
android:thumbOffset="0dp"/>
Try this seekbar_thumb.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#00f"/>
<size
android:width="15dp"
android:height="15dp"/>
</shape>
</item>
<item>
<shape android:shape="oval">
<stroke android:color="#android:color/transparent"
android:width="5dp"/>
<solid android:color="#f00"/>
<size
android:width="10dp"
android:height="10dp"/>
</shape>
</item>
</layer-list>
And activity_main.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_margin="40dp">
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/seekBar"
android:max="100"
android:progress="50"
android:thumb="#drawable/seekbar_thumb" />
</RelativeLayout>
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:
I am trying shadow text view like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="top|center"
android:background="#drawable/gradient">
<TextView
android:layout_width="300dp"
android:layout_height="50dp"
android:text="#string/ph"
style="#style/TextBox"
android:textSize="16sp"/>
</LinearLayout>
gradient.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<gradient
android:endColor="#FFFFFF"
android:startColor="#FFFFFF"
android:type="linear"
android:centerColor="#E3F2FD"
android:angle="90">
</gradient>
</shape>
</item>
This code can't get my design. Is it possible to textview like my picture?
Here i tried to create same shadow as your requirement which will look like this. I know the shadow color is not blur as u want
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/shadow"
android:orientation="vertical"
android:paddingBottom="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rectangle_shape"
android:padding="10dp"
android:text="Phone Number" />
</LinearLayout>
drawable/shadow.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#220000ff" />
<corners android:radius="20dp" />
</shape>
drawable/rectangle_shape.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFFFFF" />
<corners android:radius="20dp" />
</shape>
make xml backround_with_shadow and paste this code-
<?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="#87ceeb" />
<corners android:radius="5dp"/>
</shape>
</item>
and set xml as background of layout
<item android:right="1dp" android:left="1dp" android:bottom="2dp">
<shape
android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="5dp"/>
</shape>
</item>
</layer-list>
How to implement this shape of Departments header using shape and xml without 9-patch ?
I mean rectangle with arrow on the left.
My code snippet:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="1px"
android:left="#dimen/edittext_border"
android:right="#dimen/edittext_border"
android:top="#dimen/edittext_border">
<shape android:shape="rectangle">
<stroke
android:width="#dimen/edittext_border_width"
android:color="#color/menu_divider" />
<solid android:color="#color/background" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
if you are looking for someting like this, try the following code..
Make a xml arrow_shape in your drawable folder.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate android:fromDegrees="45" android:toDegrees="45"
android:pivotX="-40%" android:pivotY="87%" >
<shape android:shape="rectangle" >
<stroke android:color="#c6802a" android:width="10dp"/>
<solid android:color="#c6802a" />
</shape>
</rotate>
</item>
</layer-list>
Make a xml rectangle_shape in your drawable folder.
<?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="#B2E3FA" />
</shape>
</item>
In your main xml file
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.stpl.myapplication.MainActivity">
<RelativeLayout
android:id="#+id/arrow"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#drawable/arrow_shape"
android:rotation="270" />
<RelativeLayout
android:id="#+id/rectangle"
android:layout_width="150dp"
android:layout_height="50dp"
android:background="#drawable/rectangle_shape"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:android="http://schemas.android.com/tools" />
</LinearLayout>
A solution with a gradient:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:width="2dp" android:height="2dp"
android:top="4dp" android:left="3dp">
<rotate android:fromDegrees="45"
android:pivotX="0"
android:pivotY="0">
<shape>
<solid android:color="#D83945"/>
</shape>
</rotate>
</item>
<item android:width="50dp" android:height="11dp" android:left="3dp">
<shape>
<gradient
android:startColor="#D83945"
android:endColor="#F9700C"
/>
<corners
android:radius="2dp"
/>
</shape>
</item>
</layer-list>
The final result is:
I want to have my switch widget larger and so I have to change the height of the switch.
But I have no solution to this.
I looked at this question: Change height of switch
And I made a drawable like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:width="0dp" android:height="30dp">
<solid android:color="#FF4444" />
</shape>
Then I setted my switch like this:
<Switch
android:id="#+id/sw_trackLiveData"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tv_liveData"
android:layout_alignRight="#+id/btn_stoptrip1"
android:layout_alignLeft="#+id/btn_stoptrip1"
android:layout_marginTop="10dp"
android:thumbTextPadding="25dp"
android:switchMinWidth="56dp"
android:track="#drawable/roundedbutton"
android:layout_centerHorizontal="true"
android:textSize="20dp" />
But it doesnt work. I do something wrong. Can anyone give me an example how to do right? Or can anyone guide me through this?
Change your roundedButton.xml like that:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<size
android:height="20dp"
android:width="56dp" />
<solid android:color="#FF4444" />
</shape>
Change your switch Selector to below in drawable (custom_selector.xml)
<?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"
android:visible="true"
android:dither="true"
android:useLevel="false">
<gradient
android:startColor="#color/colorAccent"
android:endColor="#color/colorAccent"
android:angle="270"/>
<corners
android:radius="20dp"/>
<size
android:width="37dp"
android:height="37dp" />
<stroke
android:width="4dp"
android:color="#0000ffff"/>
</shape>
</item>
<item android:state_checked="false">
<shape
android:shape="rectangle"
android:visible="true"
android:dither="true"
android:useLevel="false">
<gradient
android:startColor="#android:color/white"
android:endColor="#android:color/white"
android:angle="270"/>
<corners
android:radius="20dp"/>
<size
android:width="37dp"
android:height="37dp" />
<stroke
android:width="4dp"
android:color="#0000ffff"/>
</shape>
</item>
</selector>
and Create Track in drawable (custom_track.xml)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:visible="true"
android:dither="true"
android:useLevel="false">
<gradient
android:startColor="#color/card_background"
android:endColor="#color/card_background"
android:angle="270"/>
<corners
android:radius="20dp"/>
<size
android:width="50dp"
android:height="26dp" />
</shape>
And in Xml file :
<Switch
android:id="#+id/switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginRight="16dp"
android:textOff="OFF"
android:scaleX="2"
android:scaleY="2"
android:textOn="ON"
android:thumb="#drawable/customswitchselector"
android:track="#drawable/custom_track" />
just change
android:layout_width="wrap_content"
android:layout_height="wrap_content"
to
android:layout_width="200dp"
android:layout_height="100dp"
this is my code below which show dash line on center of textview i want to show below the textview like this:
How can I change this to show below the textview dash line
<?xml version="1.0" encoding="utf-8"?>
<TableRow xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/apprentTemp"
android:textColor="#000000"
android:background="#drawable/dotted"
android:paddingLeft="10dp"
android:gravity="left"/>
<TextView
android:id="#+id/localTime"
android:textColor="#000000"
android:background="#drawable/dotted"
android:gravity="center"/>
</TableRow>
<---- dashed.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke
android:color="#000000"
android:dashWidth="5px"
android:dashGap="5px" />
</shape>
use
android:drawableBottom="#drawable/dotted"
instead
android:background="#drawable/dotted"
EDIT:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:left="-5dp"
android:right="-5dp"
android:top="-5dp">
<shape
android:shape="rectangle">
<stroke
android:width="1dp"
android:dashGap="5dp"
android:dashWidth="5dp"
android:color="#android:color/black" />
</shape>
</item>
</layer-list>
Try this
dashed.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line" >
<stroke
android:dashGap="2dip"
android:dashWidth="2dip"
android:color="#android:color/black" />
<size android:width="60dp"
android:height="6dp"/>
</shape>
then use
android:drawableBottom="#drawable/dashed"
in your TextView
instead of
android:background="#drawable/dotted"
Output:
This is how i did it.Little modifications and worked.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:gravity="center_vertical"
>
<shape
android:shape="line">
<stroke
android:width="1dp"
android:dashGap="0dp"
android:dashWidth="5dp"
android:color="#color/statusLight" />
</shape>
</item>
Just add android:dashGap to whatever value you desire.
If you want to show the dashed line in the center of the view then use the below code. like -------- Or continue with ----------
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:left="-5dp"
android:right="-5dp"
android:gravity="center_vertical">
<shape
android:shape="line">
<stroke
android:width="1dp"
android:dashGap="2dp"
android:dashWidth="5dp"
android:color="#android:color/darker_gray" />
</shape>
</item>
Try this
<TextView
android:id="#+id/total"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:text="TextView"
android:drawableBottom="#drawable/dividerline"/>
Make one xml as below
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<size
android:height="1dp"
android:width="70dp" />
<solid android:color="#android:color/black" />
</shape>