Here's my view:
<FrameLayout 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:background="#drawable/bg_rounded"
android:backgroundTint="#color/view_primary_color"
android:elevation="4dp"
android:foregroundTint="#android:color/white">
<com.google.android.material.textview.MaterialTextView
android:id="#+id/tvTitle"
style="#style/Header4.Semibold16.White"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:gravity="center"
android:text="Add to cart"
android:textAllCaps="false"
app:tint="#android:color/white"
tools:ignore="ContentDescription" />
<ProgressBar
android:id="#+id/pbLoading"
style="?android:attr/progressBarStyleSmall"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:visibility="gone" />
</FrameLayout>
And here's #color/view_primary_color
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/colorPrimary" android:state_enabled="true" />
<item android:color="#color/colorPrimaryDisabled" android:state_enabled="false" />
</selector>
When view's state is enabled it's color is colorPrimary.
When state is disabled view's color is colorPrimaryDisabled which is almost the same as colorPrimary but only with 20% of alpha.
Here's how my view looks like is idle (enabled) state.
But when I click on the view it became like this.
View supposed to just change it's color to slightly translucent, but for some reason there's some shadow inside it.
If I use non-translucent color everything is ok. Or if I remove elevation from the view everything is ok as well.
Feels like this is some kind of bug. Do you have any idea what is this?
Thanks!
using MaterialButton instead of textView like this
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_add_to_card"
android:layout_width="120dp"
android:layout_height="40dp"
android:layout_gravity="center"
android:layout_marginTop="24dp"
android:layout_marginBottom="16dp"
android:elevation="0dp"
android:enabled="false"
android:fontFamily="#font/sans_normal"
android:gravity="center"
android:insetLeft="0dp"
android:insetTop="0dp"
android:insetRight="0dp"
android:insetBottom="0dp"
android:minWidth="0dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:stateListAnimator="#null"
android:text="#string/addToCard"
android:textColor="#color/white"
android:textSize="16sp"
android:translationZ="0dp"
app:backgroundTint="#color/btn_primary_state"
app:cornerRadius="24dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/scrollview_edittext" />
background tint:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="true"
android:color="#color/green_button" />
<item
android:state_enabled="false"
android:color="#color/gray_button"
/>
</selector>
Related
I want to customized Material Toggle Button like the following. I have tried but not succeed to achieve this output. following is xml code I tried but not desired output. I go through the Offical Documents but no help about this. Please help me if anyone knows about this
Thanks
xml
<com.google.android.material.button.MaterialButtonToggleGroup
android:id="#+id/outdoor_toggle_buttonGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:singleSelection="true"
app:checkedButton="#+id/btn_walking"
android:layout_marginTop="#dimen/_5sdp"
android:layout_marginBottom="#dimen/_20sdp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
>
<Button
android:id="#+id/btn_walking"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/walking"
android:textColor="#color/white"
android:textAllCaps="false"
android:backgroundTint="#color/green"
style="#style/Widget.MaterialComponents.Button"
app:shapeAppearance="#style/CustomShapeAppearance"
/>
<Button
android:id="#+id/btn_running"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/running"
android:textColor="#color/black"
android:textAllCaps="false"
android:backgroundTint="#color/white"
style="#style/Widget.MaterialComponents.Button"
app:shapeAppearance="#style/CustomShapeAppearance"
/>
<Button
android:id="#+id/btn_cycling"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/cycling"
android:textColor="#color/black"
android:textAllCaps="false"
android:backgroundTint="#color/white"
style="#style/Widget.MaterialComponents.Button"
app:shapeAppearance="#style/CustomShapeAppearance"
/>
</com.google.android.material.button.MaterialButtonToggleGroup>
Style
<style name="CustomShapeAppearance">
<item name="cornerSizeTopLeft">20dp</item>
<item name="cornerSizeTopRight">20dp</item>
<item name="cornerSizeBottomLeft">20dp</item>
<item name="cornerSizeBottomRight">20dp</item>
</style>
output
This can be achieved using a TabLayout inside a MaterialCardView. The MaterialCardView is needed to draw the corner radius of the outer section and the TabLayout to draw each Tab. The TabLayout has a property app:tabBackground which can be used to set a Drawable selector for the Tab Selected/Unselected state.
Xml layout:
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:strokeWidth="0dp"
app:strokeColor="#android:color/transparent"
app:cardCornerRadius="20dp">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="40dp"
android:backgroundTint="#android:color/white"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabIndicatorColor="#android:color/transparent"
app:tabIndicatorHeight="0dp"
app:tabRippleColor="#android:color/transparent"
app:tabTextColor="#android:color/black"
app:tabSelectedTextColor="#android:color/white"
app:tabBackground="#drawable/tabs_selector"
app:tabTextAppearance="#style/CustomTabTextAppearance">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Walking" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Running" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cycling" />
</com.google.android.material.tabs.TabLayout>
</com.google.android.material.card.MaterialCardView>
where #drawable/tabs_selector is the Tab Drawable Selector to set the Selected/Unselected state like below:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_selected="true"
android:drawable="#drawable/tab_bg_selected" />
<item
android:drawable="#drawable/tab_bg_unselected" />
</selector>
For #drawable/tab_bg_selected Selected state:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#31d480" />
<corners android:radius="20dp" />
</shape>
For #drawable/tab_bg_unselected Unselected State:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/transparent" />
</shape>
and #style/CustomTabTextAppearance is a custom Tab TextAppearance in case you want to change for each Tab the Text Size or Font Family like below:
<style name="CustomTabTextAppearance" parent="TextAppearance.MaterialComponents.Button">
<item name="fontFamily">#font/roboto_mono</item>
<item name="android:fontFamily">#font/roboto_mono</item>
<item name="android:textAllCaps">false</item>
<item name="android:textSize">14sp</item>
</style>
Result:
I created a dialog and there is a button.
I want different style of button. So I made this file and applied to the background attribute of the button.
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/my_pink_color">
<item
android:id="#android:id/background"
android:drawable="#drawable/btn_line_border_dialogue"></item>
</ripple>
I don't know why it has shadow around the button. It has two buttons. And the second button doesn't have any thing. When I remove the second button, the shadow seems gone.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:orientation="vertical">
<Button
android:id="#+id/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:clickable="true"
android:background="#drawable/btn_ripple"
android:text="Close"
android:textAllCaps="false"
android:textColor="#color/my_text_color"
android:textSize="17sp"
android:textStyle="bold" />
<Button
android:id="#+id/btn_close2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/btn_ripple"
android:clickable="true"
android:text="Don't show this in 24hours"
android:textAllCaps="false"
android:textColor="#color/my_text_color"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
When I just apply btn_line_border_dialogue.xml without the ripple. It is the same.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/my_yellow" />
<stroke
android:width="1dp"
android:color="#color/my_pink" />
</shape>
How can I remove this effect?
Use style="?android:attr/borderlessButtonStyle" inside your Button
refer : https://developer.android.com/guide/topics/ui/controls/button.html#Borderless
Or If you don't need Button particularly, use TextView instead
try to set elevation t0 0 dp or you can use TextView or Layout instead of button.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:orientation="vertical">
<TextView
android:id="#+id/btn_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:clickable="true"
android:background="#drawable/btn_ripple"
android:text="Close"
android:textAllCaps="false"
android:textColor="#color/my_text_color"
android:textSize="17sp"
android:textStyle="bold" />
<TextView
android:id="#+id/btn_close2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/btn_ripple"
android:clickable="true"
android:text="Don't show this in 24hours"
android:textAllCaps="false"
android:textColor="#color/my_text_color"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
This can be also fixed by setting android:stateListAnimator="#null" globally in Resources\values\styles.xml:
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<style name="AppTheme" parent="AppTheme.Base">
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:buttonStyle">#style/NoShadowButton</item>
</style>
<style name="NoShadowButton" parent="android:style/Widget.Button">
<item name="android:stateListAnimator">#null</item>
</style>
</resources>
set the stateListAnimator on the button as = "#null" in the xml. It will remove the shadow from the button.
I want to create a switch which looks like this
i have done that in this way
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Available"
android:textColor="#82BCB4"
android:textSize="20sp"
/>
<Switch
android:id="#+id/theSwitchId"
android:textOn=""
android:textOff=""
android:layout_width="wrap_content"
android:layout_height="20dp"
android:thumbTextPadding="5dp"
android:switchMinWidth="90dp"
android:layout_marginStart="40dp"
android:minHeight="60dp"
android:layout_gravity="center|center_vertical" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="UnAvailable"
android:layout_marginStart="40dp"
android:textColor="#224e6d"
android:textSize="20sp"
/>
</LinearLayout>
i am not able to change the height of the switch and it doesnt look how its in this image. Please help me with this
all you need to do is just use a custom drawable as track of switch
this is the code for custom drawable:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape android:shape="rectangle">
<corners
android:radius="#dimen/_40sdp" />
<solid
android:color="#android:color/darker_gray" />
<padding
android:bottom="#dimen/_5dp"
android:left="#dimen/_5dp"
android:right="#dimen/_5dp"
android:top="#dimen/_5dp" />
</shape>
</item>
Further make these modification to your existing layout
add android:thumbTint="#android:color/holo_blue_dark" or any color that meets your requirement
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Available"
android:textColor="#82BCB4"
android:textSize="20sp" />
<Switch
android:id="#+id/theSwitchId"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_gravity="center|center_vertical"
android:layout_marginStart="40dp"
android:minHeight="60dp"
android:switchMinWidth="90dp"
android:textOff=""
android:textOn=""
android:thumbTextPadding="5dp"
android:thumbTint="#android:color/holo_blue_dark"
android:track="#drawable/track_background" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="40dp"
android:text="UnAvailable"
android:textColor="#224e6d"
android:textSize="20sp" />
hope this helps
click here to view the resulting screenshot
screenshot
In style.xml
<style name="switchCompatStyle">
<item name="colorControlActivated">#color/colorPrimary</item>
</style>
And code for switch is like
<android.support.v7.widget.SwitchCompat
android:id="#+id/switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/_10sdp"
app:theme="#style/switchCompatStyle" />
You create Thumb in drawable xml:
thumb.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="#drawable/ic_thumbselecter"/>
<item android:drawable="#drawable/ic_thumbselecter"/>
</selector>
And put into switch (in my case I was using that):
<Switch
app:kswThumbDrawable="#drawable/thumb"/>
Change the thumb (circle on the switch) color by using:
android:thumbTint="#color/thumbColor"
On your colors.xml:
<color name="thumbColor">#FFFFFF</color>
Ripple effect is not working with the below code! Using the below relative layout as item in recycler view. Building with Xamarin platform.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativelayout"
android:layout_width="fill_parent"
android:layout_height="120dp"
android:paddingBottom="1dp"
android:focusable="true"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground">
<ImageView
android:id="#+id/bugImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/grey_small"
android:clickable="false"/>
<TextView
android:id="#+id/textBugName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/bugImage"
android:layout_alignTop="#id/bugImage"
android:layout_alignBottom="#id/bugImage"
android:gravity="left"
android:text="Klebsiella pneumoniae"
android:textColor="#ffffffff"
android:textSize="30dp"
android:layout_marginRight="145dp"
android:padding="10dp"
android:shadowColor="#000000"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="25"
android:clickable="false"/>
<TextView
android:id="#+id/textBugCount"
android:layout_width="135dp"
android:layout_height="wrap_content"
android:layout_alignRight="#id/bugImage"
android:layout_alignTop="#id/bugImage"
android:layout_alignBottom="#id/bugImage"
android:gravity="right"
android:text="234"
android:textColor="#ffffffff"
android:textSize="30dp"
android:padding="10dp"
android:shadowColor="#000000"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="25"
android:clickable="false"/>
</RelativeLayout>
I have already tried this android:foreground="?android:attr/selectableItemBackground" and it didn't work!
How to fix this? I tested it on api 22.
Not sure what you're trying to accomplish with this (i.e. setting foreground):
android:foreground="?android:attr/selectableItemBackground"
Try this:
android:background="?android:attr/selectableItemBackground"
though I use a custom drawable to have control over coloring, as shown here:
Set the background on your RelativeLayout android:background="#drawable/mybackground"
in res/drawable, mybackground.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#color/disabledBackground" />
<item android:state_activated="true" android:drawable="#color/colorAccent" />
<item android:drawable="#color/listBackground" />
</selector>
in res/drawable-v21, mybackground.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple android:color="#color/disabledBackground" xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<selector>
<item android:state_pressed="true" android:drawable="#color/disabledBackground" />
<item android:state_activated="true" android:drawable="#color/colorAccent" />
<item android:drawable="#color/listBackground" />
</selector>
</item>
</ripple>
Here you've specified the ripple effect, supported on platforms v21+. You can adjust the colors and states to your needs, disabledBackground, colorAccent, listBackground are just examples of named color attributes
With a RelativeLayout as a root view you should set the native ripple with background="" instead of foreground=""
Or you may try to implement a cardview which will properly respond to foreground=""
android:foreground="?android:attr/selectableItemBackground"
works only for frame layout.
use
android:background="?android:attr/selectableItemBackground"
or it is better to use:
android:background="?attr/selectableItemBackground"
if you are using compat library
Just add android:onClick="add on click listener here" and android:background="?android:attr/selectableItemBackground" to your layout where you need a ripple effect. It worked for me.
I have troubles making my RelativeLayout change background drawable on click. I made it clickable and focusable but this make nothing change. The background remains static to enables drawable. Thanks in advance.
<RelativeLayout
android:id="#+id/bttn_type_rl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:background="#drawable/day_bttn_bg_red"
android:clickable="true"
android:focusable="true"
android:paddingLeft="5dp"
android:paddingRight="5dp" >
<ImageView
android:id="#+id/bttn_type_iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:contentDescription="#string/app_name"
android:src="#drawable/relationship" />
<TextView
android:id="#+id/bttn_type_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/bttn_type_iv"
android:layout_centerHorizontal="true"
android:layout_marginTop="1dp"
android:text="#string/type_bttn_txt"
android:textSize="#dimen/data_fill_bttn_txt_size"
android:textStyle="bold" />
</RelativeLayout>
Here is the selector xml in drawable:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/bttn_red_p_bg" android:state_enabled="false" android:state_pressed="true"></item>
<item android:drawable="#drawable/bttn_red_a_bg" android:state_enabled="true"></item>
</selector>