I am trying to create Monzo (Android) style switch in my android app. I managed to create it very close by custom drawable for Thumb and Track, but still not same.
Things still missing:
I gave top and bottom padding, but still not padding showing. There is no option of Margin in Thumb and Track drawable.
In Monzo app, both names are showing, but in my case name only showing based on switch on/off
I am attaching both screenshots - from Monzo App and from mine test app. I am also attaching my Thumb & Track drawables code.
Could someone please advise, how can I achieve same design. If Switch is not right component then which other component I can use.
Monzo:
My App:
Thumb Drawable code:
<?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="#android:color/white"/>
<size android:width="160dp"/>
<corners android:radius="20dp"/>
</shape>
</item>
<item android:state_checked="false">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<size android:width="160dp"/>
<corners android:radius="20dp"/>
</shape>
</item>
</selector>
Track Drawable code:
<?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="#android:color/darker_gray"/>
<size android:height="40dp"/>
<corners android:radius="20dp"/>
<padding android:top="10dp"
android:right="10dp"
android:bottom="10dp"
android:left="10dp"/>
</shape>
</item>
<item android:state_checked="false">
<shape android:shape="rectangle">
<solid android:color="#android:color/darker_gray"/>
<size android:height="40dp"/>
<corners android:radius="20dp"/>
<padding android:top="10dp"
android:right="10dp"
android:bottom="10dp"
android:left="10dp"/>
</shape>
</item>
</selector>
Try below code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"
android:orientation="horizontal"
android:background="#drawable/bg_track">
<LinearLayout
android:id="#+id/llFeed"
android:layout_weight=".5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/bg_thumb"
android:orientation="horizontal"
android:gravity="center"
android:paddingTop="10dp"
android:paddingBottom="10dp">
<TextView
android:id="#+id/tvFeed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Feed"
android:textSize="14sp"/>
</LinearLayout>
<LinearLayout
android:id="#+id/llManage"
android:layout_weight=".5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:paddingTop="10dp"
android:paddingBottom="10dp">
<TextView
android:id="#+id/tvManage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Manage"
android:textSize="14sp"
android:textColor="#color/white"/>
</LinearLayout>
</LinearLayout>
Output for above :
Actually, I was able to solve this via setting Stroke for "Thumb" of the same color as "Track". Next issue was that it not displaying text on the track side...means when switch is off there was not text on other side.
The way I resolve that was by create 2 lables and constraint them to be on top of Switch, and i kept Switch On Off text as empty "".
Thumb Code:
<?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="#android:color/white"/>
<size android:width="160dp"/>
<corners android:radius="20dp"/>
<stroke android:color="#color/lightGray"
android:width="5dp"/>
</shape>
</item>
<item android:state_checked="false">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<size android:width="160dp"/>
<corners android:radius="20dp"/>
<stroke android:color="#color/lightGray"
android:width="5dp"/>
</shape>
</item>
</selector>
Related
I have a ImageView and a tag_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#272822">
</solid>
<stroke android:color="#686868" android:width="1dp">
</stroke>
<corners android:radius="8dp"/>
</shape>
What changes should i make so to :
change the background colour of the background when the imageview is clicked. i have used this tag_layout as :
<ImageView
android:background="#drawable/tag_layout"
android:padding="5dp"
android:scaleType="fitCenter"
android:layout_marginRight="5dp"
android:layout_width="0dp"
android:layout_height="37dp"
android:src="#drawable/zoomin"
android:layout_weight="1"
/>
How do i assign on click colours in a xml file ?
This should be enough
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#yourcoloronpressed"/>
<stroke android:color="#686868" android:width="1dp"/>
<corners android:radius="8dp"/>
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#272822"/>
<stroke android:color="#686868" android:width="1dp"/>
<corners android:radius="8dp"/>
</shape>
</item>
</selector>
Replace the yourcoloronpressed by your color.
You can also change the other atributes like stroke and corners on pressed, of course.
How to create round circle for the rectangle edges like StickerView Have.
I don't want to use StickerView, because it does not support EditText like function.
My xml code for Rectangle. I would like to add Corners with round big dots.
<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<corners
android:bottomRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp"/>
</shape>
Below is the mainactivity.xml code where I implement the borders for RotatableAutofitEditText.
<com.agilie.RotatableAutofitEditText xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:autofit="http://schemas.android.com/apk/res-auto"
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="128dp"
android:layout_marginTop="272dp"
android:background="#drawable/borders"
android:gravity="center"
android:hint="#string/hint_add_some_text"
android:text="Type Here"
android:textColor="#android:color/white"
android:textColorHint="#android:color/darker_gray"
autofit:clipBounds="false"
autofit:layout_constraintStart_toStartOf="parent"
autofit:layout_constraintTop_toTopOf="parent"
autofit:maxTextSize="#dimen/autoresize_max_text_size"
autofit:minTextSize="#dimen/autoresize_min_text_size"
autofit:minWidth="#dimen/autoresize_min_width"
autofit:movable="true"
autofit:resizable="true"
autofit:rotatable="true" />
You can customize this template with your colors.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="8dp"
android:end="8dp"
android:start="8dp"
android:top="8dp">
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimary" />
</shape>
</item>
<item android:gravity="start|top">
<shape android:shape="oval">
<size
android:width="16dp"
android:height="16dp" />
<solid android:color="#android:color/black" />
</shape>
</item>
<item android:gravity="end|top">
<shape android:shape="oval">
<size
android:width="16dp"
android:height="16dp" />
<solid android:color="#android:color/black" />
</shape>
</item>
<item android:gravity="start|bottom">
<shape android:shape="oval">
<size
android:width="16dp"
android:height="16dp" />
<solid android:color="#android:color/black" />
</shape>
</item>
<item android:gravity="end|bottom">
<shape android:shape="oval">
<size
android:width="16dp"
android:height="16dp" />
<solid android:color="#android:color/black" />
</shape>
</item>
</layer-list>
A list of Github link for StickerView
https://github.com/nimengbo/StickerView
https://github.com/kencheung4/android-StickerView
https://github.com/uptechteam/MotionViews-Android
https://github.com/wuapnjie/StickerView
https://github.com/sangmingming/StickerView
https://github.com/niravkalola/Android-StickerView
https://github.com/Kaka252/StickerView
https://github.com/yovenny/StickerView
https://github.com/lukehutch/android-multitouch-controller
This handles 3 in 1 facility. On Multi-Touch, you can pan your image, you can scale your image and at the same time you can also rotate your image. And you can add number of stickers as you want.
I have a custom seekbar that's not quite working.
I want the seekbar to look like this:
But this is as close as I have been able to get
Ignoring the slight coloring and size issues, the problem I'm having is with the green progress size. Is there some way to make this smaller than the background? I've tried size and padding tags in the XML, and even tried fiddling with two rectangles on top of each other with clip gravity, but no luck yet.
Here is my Seekbar 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">
<shape android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="#color/fofo_grey" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="#color/signup_green" />
</shape>
</clip>
</item>
</layer-list>
And the Seekbar in the layout fragment
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/seekBar"
android:layout_below="#+id/textView6"
android:layout_centerHorizontal="true"
android:splitTrack="false"
android:progressDrawable="#drawable/custom_seekbar"
android:thumb="#drawable/thumb_seekbar"
android:max="100"
android:progress="50"
android:indeterminate="false" />
for change height progress drawble just add android:minHeight="2dp" and android:maxHeight="2dp" to layout.
UPDATE:
<androidx.appcompat.widget.AppCompatSeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:max="100"
android:minHeight="2dp"
android:maxHeight="2dp"
android:background="#android:color/transparent"
android:progressDrawable="#drawable/sb_progress_drawable"
android:progress="0"
android:secondaryProgress="0"
android:thumbOffset="0dp"
android:thumb="#drawable/sb_thumb" />
sb_progress_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">
<shape android:shape="rectangle">
<solid android:color="#26FFFFFF"/>
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<scale
android:scaleWidth="100%" >
<shape android:shape="rectangle">
<solid android:color="#26FFFFFF"/>
</shape>
</scale>
</item>
<item android:id="#android:id/progress">
<scale
android:scaleWidth="100%" >
<shape android:shape="rectangle">
<solid android:color="#FFFFFF"/>
</shape>
</scale>
</item>
</layer-list>
sb_thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<size android:width="20dp" android:height="20dp" />
<solid android:color="#FFFFFF" />
</shape>
<?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="20dp"/>
<solid android:color="#color/fofo_grey" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape android:shape="rectangle">
<corners android:radius="20dp"/>
<solid android:color="#color/signup_green" />
<stroke android:width="6dp"
android:color="#color/fofo_grey" />
</shape>
</clip>
</item>
</layer-list>
just add stroke attribute in seekbar drawable
Managed to fix this. Can't believe it took me so long to think of the solution...
<clip>
<shape android:shape="rectangle">
<stroke android:color="#color/fofo_grey" android:width="6dp"/>
<corners android:radius="20dp" />
<solid android:color="#color/signup_green" />
</shape>
</clip>
Added a stroke with the same colour as the background element, and tweaked the stroke width to achieve the desired effect.
I'm trying to set a custom drawable to a EditText as expected below:
So I wrote this custom drawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:paddingBottom="12dp"
android:paddingLeft="36dp"
android:paddingRight="12dp"
android:paddingTop="12dp">
<item>
<shape>
<corners android:radius="6dp"/>
<solid android:color="#android:color/white"/>
<stroke
android:width="1dp"
android:color="#BBBBBB"/>
</shape>
</item>
<item
android:width="32dp"
android:gravity="left">
<shape android:shape="rectangle">
<size android:width="32dp"/>
<corners
android:bottomLeftRadius="6dp"
android:topLeftRadius="6dp"/>
<solid android:color="#AAAAAA"/>
</shape>
</item>
<item android:left="8dp">
<bitmap
android:gravity="left"
android:src="#drawable/ic_email"
android:tileMode="disabled"/>
</item>
</layer-list>
The result in preview is quite good (except different corner size, not handled by Android Studio)
But in device, it totally not works...
The second item is stretched and does not respect the width attribute.
I know, I can do it with a 9-patch, but I want to know if is it possible with drawables?
Managed to do it with a single background drawable and a compound drawable on the EditText.
bg_edittext_icon.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<corners android:radius="6dp" />
<solid android:color="#android:color/white" />
</shape>
</item>
<item>
<shape>
<solid android:color="#AAAAAA" />
<corners android:radius="6dp" />
</shape>
</item>
<item
android:left="34dp">
<!-- left is icon size + 2x side padding around icon-->
<!-- 18 + 8 + 8 -->
<shape>
<solid android:color="#android:color/white" />
<corners android:radius="6dp"
android:topRightRadius="6dp"
android:topLeftRadius="0dp"
android:bottomRightRadius="6dp"
android:bottomLeftRadius="0dp"/>
</shape>
</item>
<item>
<shape>
<corners android:radius="6dp" />
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#BBBBBB" />
</shape>
</item>
</layer-list>
In your layout, use it like that:
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_edittext_icon"
android:inputType="textEmailAddress"
android:drawableLeft="#drawable/ic_email_white_18dp"
android:drawablePadding="20dp"
android:paddingLeft="8dp"
android:paddingRight="12dp"
android:paddingTop="12dp"
android:paddingBottom="12dp"
android:hint="Email"
/>
With paddingLeft the icon padding inside the grey box and drawablePadding the padding inside the grey box + padding of the edit zone.
Here is the result from Genymotion (aka, real device):
Hope you like it !
I am trying to style a button with different colors for different states. The coloring (and border radius) works for normal state, but not for state_pressed="true". What can be wrong with my code?
This is the button element:
<Button
android:text="#string/login_button_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="220dp"
android:textColor="#FFF"
android:background="#drawable/loginbtn"
android:clickable="true"/>
And this one is loginbtn.xml in drawable folder:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="rectangle" >
<corners android:radius="4dp" />
<solid android:color="#27ae60"/>
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle" >
<corners android:radius="4dp" />
<solid android:color="#2ecc71"/>
</shape>
</item>
</selector>
Thank you.
You need to swap the order of your definition as Android picks up the first one that matches, in this case the one without a state defined. Move it to be last:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle" >
<corners android:radius="4dp" />
<solid android:color="#2ecc71"/>
</shape>
</item>
<item >
<shape android:shape="rectangle" >
<corners android:radius="4dp" />
<solid android:color="#27ae60"/>
</shape>
</item>
</selector>