I have added a switch in my android app and it's using Material Design. I followed their guidelines and also a bunch of example but every single time, it's kind of shrinking. I force a 60dp width and 32dp height and I can clearly see that the 60dp is not respected but the height is.
And it's also looking as below:
But I am trying to get something like this: This is checked = false status, for the checked = true, I just change the background to green.
I do not understand why the thumb is also as big as the track when I set as well both height.
Below is my layout:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/switchLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="90dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/settingsSwitch"
app:layout_constraintBottom_toBottomOf="#id/settingsSwitch"
android:orientation="vertical">
<TextView
android:id="#+id/switchSettingsName"
android:textAppearance="#style/SubHead2_bld14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/cell_padding"
android:text="#{item.name}"
tools:text="Notification Category Preference" />
<TextView
android:id="#+id/switchSettingsDescription"
android:textAppearance="#style/Body_12"
android:textColor="#color/gray200"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginStart="#dimen/cell_padding"
android:text="#{item.description}"
tools:text="Notification Category Preference" />
</androidx.appcompat.widget.LinearLayoutCompat>
<com.google.android.material.materialswitch.MaterialSwitch
android:id="#+id/settingsSwitch"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginTop="14dp"
android:layout_marginEnd="#dimen/cell_padding"
android:layout_marginBottom="14dp"
android:checked="#{item.enabled}"
style="#style/SwitchStyle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
and the SwitchStyle is defined as below:
<style name="SwitchStyle" parent="Widget.Material3.CompoundButton.MaterialSwitch">
<item name="android:thumb">#drawable/switch_thumb</item>
<item name="thumbTint">#color/white</item>
<item name="track">#drawable/custom_track</item>
<item name="trackTint">#color/switch_selector</item>
<item name="android:background">#null</item>
</style>
switch_thumb.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="28dp"
android:height="28dp"
android:viewportWidth="28"
android:viewportHeight="28">
<path
android:fillColor="#FFFFFF"
android:pathData="M14,14m-14,0a14,14 0,1 1,28 0a14,14 0,1 1,-28 0" />
</vector>
custom_track.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">
<size android:height="32dp" android:width="60dp" />
<solid android:color="#color/green300" />
<corners android:radius="14dp" />
</shape>
</item>
<item android:state_checked="false">
<shape android:shape="rectangle">
<size android:height="32dp" android:width="60dp" />
<corners android:radius="14dp" />
</shape>
</item>
</selector>
and also the switch_selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/green300" android:state_checked="true" />
<item android:color="#color/lightness200" android:state_checked="false" />
</selector>
Any idea how to prevent this ratio change and also not having the thumb bigger ?
Related
I made a custom style for my buttons. It is perfectly appearing in Layout Preview (through Android Studio XML Preview) but when I'm running the app, the button has not the wanted borders.
Any idea of the reason(s) that may cause this ?
activity_main.xml
<style name="Button.Pink" parent="Button">
<item name="android:background">#drawable/rounded_corners_button</item>
<item name="android:backgroundTint">#color/pink</item>
<item name="android:textColor">#color/white</item>
</style>
styles.xml
<Button
style="#style/Button.Pink"
android:id="#+id/btn_sale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|start"
android:enabled="false"
android:foreground="?attr/selectableItemBackground"
android:text="#string/sale"
android:layout_marginTop="4dp"
android:layout_marginStart="4dp"
android:visibility="gone"
tools:visibility="visible" />
rounded_corners_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="65dp" />
</shape>
</item>
</selector>
EDIT :
Adding some pictures of renderers
What the XML Preview Layout Design shows :
What the app shows :
Try change this line
<style name="Button.Pink" parent="Button">
To
<style name="Button.Pink" parent="Widget.AppCompat.Button"> //AppCompat style to support backports.
UPDATED
If you are targeting min api 21 then try latest material button introduced in support library 28..
<android.support.design.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sale"
app:backgroundTint="#color/colorAccent"
app:cornerRadius="50dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp" />
Maybe you just forgot to remove android:visibility="gone"? :)))
Also why are you using android:backgroundTint and android:foreground?
Maybe you can do something more simple, like this
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/"
<corners android:radius="65dp" />
</shape>
And also create shapes for other states and than create one selector
Use below code I hope it will help you
Button
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:textColor="#ffffff"
android:background="#drawable/rounded_corners_button"
android:text="Buttons" />
rounded_corners_button in draweble
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<shape android:shape="rectangle" >
<corners android:radius="5dip" />
<stroke android:width="1dip" android:color="#00FFFF" />
<gradient android:angle="-90" android:startColor="#8dbab3" android:endColor="#58857e" />
</shape>
</item>
</selector>
I created the following design for a button
by using
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:right="245dp">
<shape android:shape="rectangle" >
<corners android:radius="3dp" />
<solid android:color="#000" />
</shape>
</item>
<item android:left="0dp">
<shape android:shape="rectangle" >
<corners android:radius="3dp" />
<solid android:color="#80000000" />
</shape>
</item>
</layer-list>`
What I want to achieve is:
The + sign is supposed to change in a 'tick' signed once the fragment that will be opened is completed(an address). How can I make the opacity of the black rectangle lower ? I still haven't figured out how to make the + sign, so any ideas are welcomed.
And the main question is: How can I set those styling values by using code in android ? I want to change the size of the first item(245dp) to 5% of the width of the button.
layout of my button:
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_marginTopPercent="7%"
app:layout_marginBottomPercent="6%"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
app:layout_widthPercent="50%"
android:layout_below="#id/button7"
android:background="#drawable/btnstyle"
android:text="Create"
android:textColor="#fff" />
and btnstyle is defined above.
Assuming the background is background.xml placed in drawables folder.
You can use this-
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:background="#drawable/background"
android:orientation="horizontal">
<ToggleButton
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:checked="false"
android:drawablePadding="80dp"
android:drawableRight="#drawable/button_image"
android:textColor="#android:color/white"
android:textOff="Button1"
android:textOn="Button1"/>
</LinearLayout>
For the drawable button_image.xml, here is the code-
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:state_focused="true" android:drawable="#drawable/plus_img"/>
<item android:state_checked="false" android:state_focused="false" android:drawable="#drawable/plus_img"/>
<item android:state_checked="true" android:state_focused="true" android:drawable="#drawable/tick_img"/>
<item android:state_checked="true" android:state_focused="false" android:drawable="#drawable/tick_img"/>
</selector>
On the clickListener of your toggleButton, you can open up the fragment and setChecked of your togglebutton to !toggleButton.isChecked(). Basically like this- toggleButton.setChecked(!toggleButton.isChecked());
Regarding opacity
In your xml that you have written, the color of first item in rectangle is in the format #RGB. It can also be #ARGB where 'A' is for alpha. So if you set A = 0, the view will be transparent and with A = f, the view will be opaque.
Here is my editext, i want to change bottom line color of edittext. i use android:backgroundTint but its only work in API 21 and above it.
<EditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:backgroundTint="#color/edittintcolor"
android:drawableLeft="#drawable/lock"
android:hint=" Password"
android:padding="15dp"
android:textColor="#color/edittintcolor"
android:textColorHint="#color/edittintcolor"
android:textSize="18sp"
android:typeface="serif" />
I want to change this color using XML or style not in java code
bg.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FDEEF4" />
<corners
android:radius="15dp" />
<stroke android:width="1dip" android:color="#F9966B" />
<EditText
android:id="#+id/password"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/bd=g"
android:hint="#string/password"
android:inputType="textPassword" >
</EditText>
Create a drawable xml for your edittext background.. Use this following 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="#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="#android:color/white" />
<!-- color of edittext line -->
</shape>
</item>
</layer-list>
and set that drawable xml as your edittext background. :)
use command like below in edit text
<EditText
android:id="#+id/password"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/edittextborder"
android:hint="#string/password"
android:inputType="textPassword" >
<requestFocus />
</EditText>
then proceed with below code inside drawable folder
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FDEEF4" />
<corners
android:radius="15dp" />
<stroke android:width="1dip" android:color="#F9966B" />
EDEEF4 represents the tint color
We can achieve by using two ways,
Method 1:
We can design background image using selector drawable,
create backgroundEditText.xml in drawable,
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_window_focused="false"
android:state_enabled="true"
android:drawable="#drawable/textfield_default" />
<item
android:state_window_focused="false"
android:state_enabled="false"
android:drawable="#drawable/textfield_disabled" />
<item
android:state_pressed="true"
android:drawable="#drawable/textfield_pressed" />
<item
android:state_enabled="true"
android:state_focused="true"
android:drawable="#drawable/textfield_selected" />
<item
android:state_enabled="true"
android:drawable="#drawable/textfield_default" />
<item
android:state_focused="true"
android:drawable="#drawable/textfield_disabled_selected" />
<item
android:drawable="#drawable/textfield_disabled" />
textfield_pressed.9.png
[![textfield_pressed.9][4]][4]
textfield_selected.9.png
[![textfield_selected.9][5]][5]
We need to set backgroundEditText for EditText in layout file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<EditText
android:id="#+id/edit1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/edit1_text"
android:inputType="text"
android:background="#drawable/edit_text"
/>
</LinearLayout>
[![Final Output ][6]][6]
Method 2:
Using android.support.v4 support library, we can give backward compatibility.
You can use this site to generate your own EditText style.
Generate drawable and set it as background, like:
android:background="#drawable/generated_theme_edit_text"
I have a ListView where I've implemented a Cards UI-type look to it. If an item in the ListView is in the "selected" or "pressed" state, there is a white border around the item. I would like the entire view to have the blue color, but not sure how to achieve that:
ListView item layout
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<RelativeLayout
android:id="#+id/itemLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:background="#drawable/bg_cards_ui"
>
<TextView
android:id="#+id/title"
android:layout_alignParentTop="true"
android:paddingBottom="4dip"
/>
<TextView
android:id="#+id/summary"
android:paddingBottom="4dip"
android:layout_below="#id/text"
/>
<TextView
android:id="#+id/siteName"
android:layout_below="#id/summary"
/>
<TextView
android:id="#+id/date"
android:layout_below="#id/summary"
/>
</RelativeLayout>
</FrameLayout>
bg_card_ui.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:dither="true">
<corners android:radius="2dp"/>
<solid android:color="#ccc" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle" android:dither="true">
<corners android:radius="2dp" />
<solid android:color="#android:color/white" />
<padding
android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp"
/>
</shape>
</item>
<item>
<selector>
<item android:state_pressed="true" android:drawable="#color/my_blue_color" />
<item android:state_selected="true" android:state_pressed="false" android:drawable="#color/my_blue_color" />
<item android:state_activated="true" android:state_selected="false" android:state_pressed="false" android:drawable="#color/my_blue_color" />
<item android:state_selected="false" android:state_pressed="false" android:drawable="#android:color/transparent" />
</selector>
</item>
</layer-list>
Check this out:ListView - Highlight sub layout of item. I've implemented exactly what I think you're looking to do.
Basically, for what you've got, you need to have the selector reference a background xml file in the "drawable" property of the each item. You would need at least two background xml files, one for normal state and one for pressed which has the color changes you want. Should work after that.
I am trying to make the seekbar below
appear like this
i use the following xml attribute with minheight and maxheight but the thumb is not moving to bottom.
The minHeight and maxHeight only affect the seekbar. How can i achieved desired result i.e. thumb at seekbar bottom.
<SeekBar
android:id="#+id/seekbar_duree"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/eight_dp"
android:layout_marginRight="#dimen/eight_dp"
android:background="#color/fulll_transparent"
android:indeterminate="false"
android:max="48500"
android:maxHeight="60dip"
android:minHeight="60dip"
android:indeterminateDrawable="#android:drawable/progress_indeterminate_horizontal"
android:paddingLeft="#dimen/twenty_sp"
android:thumb="#drawable/nine_patch"
android:progressDrawable="#drawable/progress_bar"
/>
:UPDATE: THIS IS MY THUMB. HOW CAN I PUT IT BELOW THE PROGRESS
I use xml-thumb like this with seek_thumb.9.png wich has the same physical size like min/maxHeight value defined on seekbarlayout
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:constantSize="false">
<item android:state_pressed="true"
android:drawable="#drawable/seek_thumb_pressed_60" />
<item android:state_focused="true"
android:drawable="#drawable/seek_thumb_pressed_60" />
<item android:drawable="#drawable/seek_thumb_60" />
<item >
<shape android:shape="rectangle" />
</item>
</selector>
seekbar-layout also referencing xml-seekbar
<SeekBar
android:id="#+id/seekbar"
android:layout_width="320dp"
android:layout_height="60dp"
android:layout_marginLeft="0dp"
android:layout_marginTop="10dp"
android:max="30"
android:maxHeight="60dp"
android:minHeight="60dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:progress="15"
android:progressDrawable="#drawable/seekbar"
android:secondaryProgress="0"
android:thumb="#drawable/seek_thumb"
android:thumbOffset="0dp" />
seekbar.xml using *.9.png
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#+android:id/background">
<nine-patch
android:dither="true"
android:src="#drawable/seekbar_back_60" />
</item>
<item android:id="#+android:id/progress">
<clip
android:clipOrientation="horizontal"
android:gravity="left">
<shape android:shape="rectangle" />
<nine-patch
android:dither="true"
android:src="#drawable/seekbar_front_60" />
</clip>
</item>
</layer-list>