Recreate switches similar to Android 12 settings - android

Android 12's settings' switches now look like this,
which its code is here:
https://android.googlesource.com/platform/packages/apps/Settings/+/c4cc279a2a32e6b5dfac9af4a16a4d98def82a22/res/xml/configure_notification_settings.xml#133
but neither androidx.preference.SwitchPreferenceCompat nor androidx.preference.SwitchPreference look like this in my app with updated material library (1.5.0, Material 3),
How can I have the same looking (and feeling, animation, etc) switches at least in Android 12 or how Android is doing it for itself? Thanks!

You can easily customize your switches to look like these.
In styles.xml add this :
<style name="App.Switches" parent="Widget.Material3.CompoundButton.Switch">
<item name="track">#drawable/switch_track</item>
<item name="android:thumb">#drawable/switch_thumb</item>
</style>
switch_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">
<solid android:color="#000000" />
<corners android:radius="56dp" />
<size
android:width="64dp"
android:height="28dp" />
</shape>
</item>
</layer-list>
switch_thumb.xml :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp">
<shape android:shape="oval">
<solid android:color="#000000" />
<size
android:width="20dp"
android:height="20dp" />
</shape>
</item>
</layer-list>
In the end add this line in your app's main theme to apply this style to all the switches in your app :
<item name="switchStyle">#style/App.Switches</item>

As Material 1.7.0 the suggestion is to use MaterialSwitch which more or less is like this by default,

Related

how to add line above tabs android tablayout

need help
I have searched for my requirement but didn't found so posting my own question.
I need to show line above tabs not below as all solution is for adding the line below the tabs text.
should I use custom tabs or android supports this scenario without making custom ??
links I have viewed are as follows
https://www.google.com.pk/search?q=fabric+documentation&rlz=1C1CHBD_enPK741PK753&oq=fabric+documentation+&aqs=chrome..69i57.5669j0j7&sourceid=chrome&ie=UTF-8#safe=active&q=how+to+adding+line+above+tabs+android
no code is posted as I want to know what should be used .. ur suggestion would be helpful .. thanks
Try this create a background in res/drawable folder and set app:tabBackground="#drawable/selector"
make your like this Tablayout
<android.support.design.widget.TabLayout
android:id="#+id/detail_tabs"
android:layout_width="match_parent"
app:tabSelectedTextColor="#color/colorPrimary"
app:tabIndicatorHeight="0dp"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabBackground="#drawable/selector" />
Here selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:state_pressed="false">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="3dp" android:left="-5dp" android:right="-5dp" android:bottom="-5dp">
<shape android:shape="rectangle">
<solid android:color="#color/colorWhite"/>
<stroke android:color="#color/colorPrimary" android:width="2dp"/>
</shape>
</item>
</layer-list>
</item>
<item android:state_selected="true" android:state_pressed="true">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="3dp" android:left="-5dp" android:right="-5dp" android:bottom="-5dp">
<shape android:shape="rectangle">
<solid android:color="#color/colorWhite"/>
<stroke android:color="#color/colorPrimary" android:width="2dp"/>
</shape>
</item>
</layer-list>
</item>
</selector>
Hope it will works if not then add comment.
app:tabIndicatorGravity="top"
Its very simple now to show the indicator at the top with this.

How to apply state press for a button in android xml, when I have already used up option of style and background?

I have a num keypad that I have created using buttons and have hide my android soft keyboard.
This is how my every button looks like for different numbers
<Button
android:id="#+id/seven"
android:text="7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
style="#style/CustomStyle"
android:background="#drawable/gridlayout_border"
/>
Notice that I am using CustomStyle whose code looks like this with the filename button_style.xml
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="CustomStyle">
<item name="android:textSize">24dp </item>
<item name="android:textColor">#fdfdfd</item>
<item name="android:textStyle">bold </item>
<item name="android:padding">20dp</item>
</style>
</resources>
Also, I am using gridlayout_border as a background
gridlayout_border.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="-10dp" android:right="0dp" android:top="-10dp"
>
<shape android:shape="rectangle">
<!--apply button background transparent, full opacity-->
<solid android:color="#00ffffff"/>
<stroke android:color="#ffffff" android:width="2dp"/>
</shape>
</item>
</layer-list>
Since, I have used up the style and background tag in button. How can I now apply one more style/color when my button is being pressed on num keypad?
Thanks in advance
You can use selector to determine different states of a view. Something like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true">
<!-- Write your focused state code-->
</item>
<item android:state_pressed="true">
<!-- Write your pressed state code-->
</item>
<item>
<layer-list>
<item android:left="-10dp" android:right="0dp" android:top="-10dp"
>
<shape android:shape="rectangle">
<!--apply button background transparent, full opacity-->
<solid android:color="#00ffffff"/>
<stroke android:width="2dp" android:color="#ffffff"/>
</shape>
</item>
</layer-list>
</item>
</selector>

Floating button Android Lollipop

I have a style so defined:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval"
android:dither="true">
<solid
android:color="#CCFF0000" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="oval"
android:dither="true">
<solid android:color="#F44336" />
</shape>
</item>
</layer-list>
I would try to draw this ->
But i can draw the shadow. I can't use android:elevation because i would maintain compability with previous versions of android. How can i simulate the shadow as in the picture?
If you don't want to use elevation I suggest you to use a Shadow's picture as: [https://github.com/futuresimple/android-floating-action-button/blob/master/library/src/main/res/drawable-hdpi/fab_bg_mini.png][1]

Android : Image button or button Highlighted with Effect when Pressed

Here when i pressed on these left and right arrow button at that time I want to see these type of effects on button. These same thing happens in Iphone/IOS by default.
Can i make this type of effect?
Here i mentioned the pic what exactly i want.
Here i used this xml files but didnt got success.
button_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"><shape>
<gradient android:angle="180" android:centerColor="#657377" android:endColor="#AFFFFFFF" android:startColor="#FFFFFFFF" android:type="linear"/>
<corners android:radius="10dp" />
</shape></item>
</selector>
EDIT
I used android:background="#drawable/button_pressed.xml" line but i did not got which i want Exactly.
Tried :
I used this xml file as per Piyush's Answer but i didnt get success and i am getting this effect.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<solid android:color="#color/transparent" />
</shape>
</item>
<item>
<shape
android:innerRadiusRatio="4"
android:shape="ring"
android:thicknessRatio="9"
android:useLevel="false" >
<gradient
android:endColor="#00000000"
android:gradientRadius="250"
android:startColor="#ffffffff"
android:type="radial" />
</shape>
</item>
</layer-list>
I agreed top and bottom part cuts because i have limited space in layout for this button. that we will think later but why its not taking effect like shadow and alpha and all that same like which i mentioned?
OUTPUT :
Please help me If any body has idea about this.
Thanks in Advance.
The shape has to be radially drawn with fading from white to black outwards.
Try this:
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#ffffffff"
android:endColor="#00000000"
android:gradientRadius="100"
android:type="radial"/>
</shape>
Also, you cannot directly set this as a background to your button. You will have to create a selector drawable file in which you specify different backgrounds based on the state of the button. In this case, you need this background to be set only when button is pressed. The selector will look something like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/button_pressed"/>
<item android:state_selected="true" android:drawable="#drawable/button_pressed"/>
<item android:state_focussed="true" android:drawable="#drawable/button_pressed"/>
<item android:drawable="#android:color/transparent" />
</selector>
PS: It is not recommended to replicate iOS design when designing an Android app. For Android design guidelines, please refer: http://developer.android.com/design/building-blocks/buttons.html
can try this regarding for circular shape, can set your colors accordingly.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<solid android:color="#color/transparent" />
</shape>
</item>
<item>
<shape
android:shape="ring"
android:useLevel="false" >
<gradient
android:endColor="#00000000"
android:gradientRadius="200"
android:startColor="#ffffffff"
android:type="radial" />
</shape>
</item>

How to get gravity 'bottom' working on a drawable in xml

I have a simple aim. I want a light grey background on my FrameLayout with a black dividing line underneath it (only undernearth, not all around). So far I have this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" android:gravity="center">
<solid android:color="#EEEEEE" />
</shape>
</item>
<item>
<shape android:shape="line" android:gravity="bottom" >
<stroke android:width="1dip" android:color="#010101"/>
</shape>
</item>
</layer-list>
But it draws the line through the centre, i.e. ignores the gravity='bottom' bit. How can I fix this?
EDIT: This question is very old. The selected answer may or may not be in-line with current APIs, etc. You are encouraged to start your own question rather than add to this one, which is no longer monitored.
I've struggled a lot with this as well. Basically, to create a border at the bottom, you have to think in opposite direction from what you expect. You start with a rectangle with your Border color. On top of that, you draw the actual color, with an offset from the bottom.
I use this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- CREATE A RECTANGLE WITH YOUR BORDER COLOR -->
<item>
<shape android:shape="rectangle" >
<solid android:color="#fff"/>
</shape>
</item>
<!-- NOW DEFINE THE NORMAL COLOR-->
<item android:bottom="BOTTOM_BORDER_THICKNESS E.G. 4dp">
<shape android:shape="rectangle" >
<solid android:color="#ccc"/>
</shape>
</item>
</layer-list>
Or, as Juan Pablo Saraceno suggested :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<color android:color="YOUR_BORDER_COLOR" />
</item>
<item android:top="YOUR_BORDER_THICKNESS">
<color android:color="YOUR_BG_COLOR" />
</item>
</layer-list>
Unfortunately I have not found a way to get the gravity working for drawables, but I found how you can achieve what you want with pure xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:top="-2dp"
android:left="-2dp"
android:right="0dp"
android:bottom="1dp"
>
<shape android:shape="rectangle">
<solid android:color="#EEEEEE"/>
<stroke android:width="1dp" android:color="#010101"/>
</shape>
</item>
</layer-list>
Good luck:)
I'd recommend using a nine-patch image for this - here's an example that should do the job:
(It's only tiny but it is there!)
If you place this in your drawable folder and set your FrameLayout's background to it then you should get the desired result. The content will go in the grey area and the #010101 pixel will be stretched horizontally to form a line at the bottom. Just make sure to keep the .9.png extension to ensure it gets loaded as a nine-patch.
Hope that helps you
This works!
<item>
<bitmap
android:gravity="left|bottom"
android:src="#drawable/myDrawable" />
</item>
I know it's pretty old question but given answers didn't work for me. Turns out in order to gravity property work you just need to add size tag in drawable item.
So following will work as expected:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="#EEEEEE" />
</shape>
</item>
<item
android:gravity="bottom">
<shape android:shape="line">
<size android:height="2dp"/>
<stroke android:width="1dip" android:color="#010101"/>
</shape>
</item>
</layer-list>
ps. this feature added in api level 23
https://developer.android.com/reference/android/graphics/drawable/LayerDrawable#setLayerGravity%28int,%20int%29
<?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/Black" />
</shape>
</item>
<item android:bottom="5dp">
<shape android:shape="rectangle" >
<solid android:color="#color/White" />
</shape>
</item>
</layer-list>
Well, it's pretty old question, but none of the answers seem to answer the actual question (how to make gravity working) so here's a working example:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="#2196F3"/> <!-- Background color -->
</item>
<item android:gravity="bottom">
<shape>
<size android:height="10dp" /> <!-- I would suggest 1dp -->
<solid android:color="#F50057" /> <!-- Line color -->
</shape>
</item>
</layer-list>
By analogy, if you want to use gravity left or right change attribute height to width

Categories

Resources