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"
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 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>
I have a custom switch element which looks great on Android 5 and 6. But there is a problem with Android 4.
The question is how to keep shape of the toggle circular?
Android 5,6. Picture 1
Android 4. Picture 2
Here is my code:
<Switch
android:id="#+id/row_device_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textOn="ON"
android:thumb="#drawable/customswitchselector"
android:track="#drawable/custom_track"
android:textOff="OFF"
android:layout_marginRight="14dp"
android:switchMinWidth="#dimen/custom_switcher_track_width"
/>
custom_track.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle"
android:visible="true"
android:dither="true"
android:useLevel="false"
>
<corners
android:radius="#dimen/cutsom_switcher_track_radius"/>
<size
android:width="#dimen/custom_switcher_track_width"
android:height="#dimen/custom_switcher_track_height" />
<stroke
android:width="#dimen/custom_switcher_stroke_thickness"
android:color="#android:color/white"
/>
</shape>
</item>
<item
android:left="#dimen/custom_switcher_track_line_horizontal_margin"
android:right="#dimen/custom_switcher_track_line_horizontal_margin"
>
<shape
android:shape="line"
>
<stroke
android:width="#dimen/custom_switcher_екфсл_thickness"
android:color="#android:color/white"
/>
</shape>
</item>
</layer-list>
customswitchselector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true">
<layer-list>
<item>
<shape
android:shape="oval"
android:visible="true"
android:dither="true"
android:useLevel="false"
>
<solid
android:color="#color/colorListEnd"
/>
<size
android:width="#dimen/custom_switcher_circle_size"
android:height="#dimen/custom_switcher_circle_size" />
<stroke
android:width="#dimen/custom_switcher_stroke_thickness"
android:color="#android:color/white"/>
</shape>
</item>
<item
android:left="#dimen/custom_switcher_between_circles_margin"
android:right="#dimen/custom_switcher_between_circles_margin"
android:top="#dimen/custom_switcher_between_circles_margin"
android:bottom="#dimen/custom_switcher_between_circles_margin"
>
<shape
android:shape="oval"
>
<size
android:width="#dimen/custom_switcher_inner_circle_size"
android:height="#dimen/custom_switcher_inner_circle_size" />
<solid
android:color="#android:color/white"/>
</shape>
</item>
</layer-list>
</item>
<item android:state_checked="false">
<layer-list>
<item>
<shape
android:shape="oval"
android:visible="true"
android:dither="true"
android:useLevel="false">
<solid
android:color="#color/colorListEnd"
/>
<size
android:width="#dimen/custom_switcher_circle_size"
android:height="#dimen/custom_switcher_circle_size" />
<stroke
android:width="#dimen/custom_switcher_stroke_thickness"
android:color="#android:color/white"/>
</shape>
</item>
<item
android:left="#dimen/custom_switcher_between_circles_margin"
android:right="#dimen/custom_switcher_between_circles_margin"
android:top="#dimen/custom_switcher_between_circles_margin"
android:bottom="#dimen/custom_switcher_between_circles_margin"
>
<shape
android:shape="oval">
<size
android:width="#dimen/custom_switcher_inner_circle_size"
android:height="#dimen/custom_switcher_inner_circle_size"
/>
<stroke
android:width="#dimen/custom_switcher_stroke_thickness"
android:color="#android:color/white"
/>
</shape>
</item>
</layer-list>
</item>
</selector>
There are several small issues with Switch making it not work uniformly. In your case you need to use android:textOff and android:textOn with value "". Otherwise the width of the track and of the thumbs will be adjusted to hold the text. Also you need to define android:thumbTextPadding to assure the size of the thumb. The drawable is just a background and doesn't effect it directly.
<Switch
android:id="#+id/row_device_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="14dp"
android:switchMinWidth="#dimen/custom_switcher_circle_radius"
android:textOff=""
android:textOn=""
android:thumb="#drawable/customswitchselector"
android:thumbTextPadding="#dimen/switch_thumb_radius"
android:track="#drawable/custom_track" />
The #dimen/custom_switcher_circle_radius should have a value of half of the #dimen/custom_switcher_circle_size dimension.
I have implemented a custom switch (like iOS) in android. It's working perfectly in xhdpi devices (Nexus 4, moto g3). But can't reduce the track width of switch in Nexus S. its too lengthy.
custom_switch_thumb
<?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="#66AAFF00"
android:endColor="#6600FF00"
android:angle="270"/>
<corners
android:radius="20dp"/>
<size
android:width="30dp"
android:height="30dp" />
<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="#ff0000"
android:endColor="#ff0000"
android:angle="270"/>
<corners
android:radius="20dp"/>
<size
android:width="30dp"
android:height="30dp" />
<stroke
android:width="4dp"
android:color="#0000ffff"/>
</shape>
</item>
custom_switch_track
<?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="#27170432"
android:endColor="#27170432"
android:angle="270"/>
<corners
android:radius="20dp"/>
<size
android:width="60dp"
android:height="30dp" />
</shape>
Switch placed in layout
<Switch
android:id="#+id/notification_client_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="8dp"
android:gravity="center"
android:showText="true"
android:switchMinWidth="0dp"
android:switchTextAppearance="#style/SwitchTextAppearance"
android:textOff="#string/no_label"
android:textOn="#string/yes_label"
android:thumb="#drawable/custom_switch_selector"
android:track="#drawable/custom_switch_track" />
I have changed track width and Switch "android:switchminwidth" with different values but no effect is found.
Code for toogle Button
<ToggleButton
android:id="#+id/notification_client_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/toggleBackground"
android:checked="true"
android:textOff=" "
android:textOn=" " />
xml for your drawable toggleBackground
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/on_image"
android:state_checked="true" />
<item android:drawable="#drawable/off_image"
android:state_checked="false" />