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.
Related
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.
Material design button with style not working
I have a button with background color as DarkBlue, I need Material design style for that button like this below:
How it is possible
<Button
android:id="#+id/login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:background="#0040FF"
android:textColor="#FFFF"
android:layout_marginRight="10dp"
android:text="Login" />
I need to use :
style="?android:attr/buttonStyleSmall"
android:background="?android:attr/selectableItemBackground"
normally when i use
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:paddingRight="15dp"
android:layout_gravity="center"
android:text="Login"
android:paddingLeft="15dp"
android:id="#+id/login" />
It works with Design .
Is it possible to perform material design button style with background image / color.
sorry for simple question i m working in UI.
Use a drawable ripple.xml in your drawable-v21 directory for your background such as:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item android:drawable="?attr/colorPrimary"/>
</ripple>
for less than sdk 21 you'll have to create a custom selector ripple.xml in drawable folder. then it will load in pre lollypop devices
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/primaryPressed" android:state_pressed="true"/>
<item android:drawable="#color/primaryFocused" android:state_focused="true"/>
<item android:drawable="#color/primary"/>
</selector>
Use custom color according to your needs
then
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:paddingRight="15dp"
android:layout_gravity="center"
android:text="Login"
android:paddingLeft="15dp"
android:background="#drawable/ripple"
android:id="#+id/login" />
I have a Toggle Button as:
<ToggleButton
android:id="#+id/tv_pmpSwitch"
android:layout_width="0dp"
android:layout_weight="0.1"
android:layout_height="wrap_content"
android:background="#drawable/toggle_view"
android:layout_gravity="center_vertical"
android:gravity="center"
android:textOn=""
android:textOff=""
android:focusable="false"
android:focusableInTouchMode="false"
android:layout_centerVertical="true"
android:paddingTop="16dp"
android:layout_marginLeft="16dp"
/>
And my toggle_view drawable is :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use grey -->
<item android:drawable="#drawable/ic_list_action"
android:state_checked="true" />
<!-- When not selected, use white-->
<item android:drawable="#drawable/ic_grid_action"
android:state_checked="false"/>
</selector>
I don't understand why the image in background is stretched ?? I've tried various size images.
You can simply set in the xml layout file:
android:minWidth="0dp"
android:minHeight="0dp"
The image will not stretch anymore
<ToggleButton
android:id="#+id/tv_pmpSwitch"
android:layout_width="0dp"
android:layout_height="28dp"
android:layout_weight="0.1"
android:background="#drawable/toggle_view"
android:textOff=""
android:textOn="" />
Try this on your code and adjust only layout height parameter!
EDIT
The way to get a non stretched image is using a bitmap and not a drawable.
use following as your xml as your background.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<bitmap android:src="#drawable/ic_list_action"
android:gravity="center_vertical|left" />
</item>
<item>
<bitmap android:src="#drawable/ic_grid_action"
android:gravity="center_vertical|left" />
</item>
</layer-list>
After trying out a few things I found what was wrong:
The weightSum was the culprit and the assigned weight was stretching the image.
<LinearLayout
android:layout_width="0dp"
android:layout_weight="0.1"
android:layout_height="wrap_content">
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tv_pmpSwitch"
android:background="#drawable/ic_toggle_list"
/>
</LinearLayout>
Putting the whole code inside a LL parent did the trick
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>
I have this relative layout:
<RelativeLayout
android:id="#+id/relativeLayout5"
android:layout_width="fill_parent"
android:layout_height="110dp"
android:layout_below="#+id/relativeLayout4"
android:background="#drawable/pigs_banner_selector"
android:clickable="true"
>
<ImageView
android:id="#+id/imageView9"
android:layout_width="220dp"
android:layout_height="60dp"
android:layout_marginTop="60dp"
android:layout_marginLeft="0dp"
android:layout_marginBottom="-10dp"
android:src="#drawable/banner_games_pighunt_hill" />
<TextView
android:id="#+id/textView3"
android:fontFamily="sans-serif-condensed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/gluecksschweinjagd"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white"
android:textSize="31sp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
android:layout_marginTop="6dp"
android:textStyle="bold" />
</RelativeLayout>
and the selector of the RelativeLayout:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_focused="true" android:drawable="#color/white"/>
<item android:state_pressed="true" android:drawable="#color/highlight_pigs_banner" />
<item android:drawable="#color/pigs_banner"/>
</selector>
The behavior is this: The relativeLayout changes it´s color as intended. But I want the Child elements (the ImageView) to also get the color of the selector (#color/highlight_pigs_banner).
EDIT:
The color highlight_pigs_banner basically puts alpha value on the color. How can I achieve this also on the imageview (child element) by still clicking only the RelativeLayout
I tried adding android:clickable="true" to the child elements, which didnt work, and android:addStatesFromChildren="true" to the relativeLayout which gave me an stackoverflow exception. Anyone knows how to achieve this? Thanks.
You should use Selector for ImageView and TextView as well.
<TextView android:id="#+id/textView3"
android:fontFamily="sans-serif-condensed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#drawable/text_selector" />
text_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="false"
android:state_pressed="false"
android:color="#color/normal"/>
<item android:state_pressed="true"
android:color="#drawable/highlight"/>
<item android:state_selected="true"
android:state_pressed="false"
android:color="#drawable/highlight"/>
</selector>
colors.xml
<drawable name="highlight">#ff590d</drawable>