Develop Reference

How To get Ripple effect like play store on tab click with changing color of toolbar and notification bar?

I am new in android.i am trying to achive ripple effect on tab click with color chages of toolbar and notification bar like play store.how to do that?Please Help

If you just want to get ripple effect on devices of Android 5.0,new drawable ripple_bg_drawable:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#d10c1d" <!--ripple color-->
tools:targetApi="LOLLIPOP">
<item>
<shape android:shape="rectangle">
<solid android:color="#8cc476" />
</shape>
</item>
</ripple>
then add android:background="#drawable/ripple_bg_drawable" to your widget
or like this:
android:background="?attr/selectableItemBackgroundBorderless"
you should add this code to your layout file!,but this way you can't customize the ripple color!
but if you want to be compatible with devices below Android 5.0,the only way is you do it yourself by customizing!
Here is a open source project RippleView

There is a library that helps you achieve that:
https://github.com/armcha/PlayTabLayout
<io.armcha.playtablayout.core.PlayTabLayout
android:id="#+id/playTabLayout"
android:layout_width="match_parent"
android:layout_height="some_dp" />

Create res/drawable/ripple_effect.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#af0c0e"
tools:targetApi="lollipop">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#af0c0e" />
</shape>
</item>
</ripple>
Then create res/layout/ripple_animation.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:elevation="6dp">
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:gravity="center"
android:padding="10dp"
android:text="Ripple Animation/Effect in Android" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#fff"
android:elevation="6dp">
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#drawable/ripple_effect"
android:clickable="true"
android:gravity="center"
android:padding="10dp"
android:text="Ripple Animation/Effect in Android" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#fff"
android:elevation="6dp">
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:gravity="center"
android:padding="10dp"
android:text="Ripple Animation/Effect in TextView" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#fff"
android:elevation="6dp">
<TextView
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#drawable/ripple_effect"
android:clickable="true"
android:gravity="center"
android:padding="10dp"
android:text="Ripple Animation/Effect in TextView" />
</FrameLayout>
</LinearLayout>
Try this example. For set ripple effect use android:background="#drawable/ripple_effect".

set below properties to the view on which you need ripple effect.
android:background="?attr/selectableItemBackground"
android:clickable="true"

Show a selection mask effect on click on LinearLayout

Please see the layout below. I want to show a selection highlight on the entire LinearLayout if the user touches the ImageView or preferably entire layout. This is like a onclick effect. Although I have a selector its not working. How can I make this work?
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:background="#drawable/layout_selector"
android:orientation="vertical">
<ImageView
android:id="#+id/btnFromEasy"
android:layout_width="#dimen/normal_button_size"
android:layout_height="#dimen/normal_button_size"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/animals" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="#string/easy"
android:textColor="#color/subtitle_text_color"
android:textSize="#dimen/text_size_small"
android:textStyle="bold" />
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<color android:color="Blue" />
</item>
<item>
<color android:color="White" />
</item>
</selector>

Try this simple code.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/background_image_pressed" /> // image
<item
android:drawable="#drawable/background_image_default" /> // image
</selector>
and inside LinearLayout add android:clickable="true"
<LinearLayout
...
android:clickable="true"
...>
Hope this help.

Add android:clickable="true" to properties of LinearLayout and it work
Your code:
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:background="#drawable/layout_selector"
android:orientation="vertical">
-> add
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:background="#drawable/layout_selector"
android:orientation="vertical"
android:clickable="true">
Line android:layout_width="0dp" makes the layout can't be visible so I change it to "wrap_content"

ListView - Highlight sub layout of item

I have been searching for the straight answer to this question for quite some time now. What I want to know is how to implement a custom highlight on a ListView that will only hightlight (over top, preferably) a sub layout of the ListView item (in this case, I'm looking to highlight the RelativeLayout of the item).
Here is a screen shot of what I've got going on:Fail
Here is the code for list_item.xml:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="72dp"
android:clickable="false">
<RelativeLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#drawable/card_layout">
<LinearLayout android:id="#+id/linearLayout_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_vertical">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/imageView_thumbnail"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="50dp"
android:orientation="vertical"
android:layout_toRightOf="#+id/linearLayout_thumbnail"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView_title"
android:paddingLeft="5dp"
android:textSize="18dp"
android:text="SOME TEXT" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView_subtitle"
android:paddingLeft="5dp"
android:textSize="12dp" />
</LinearLayout>
<TextView
android:id="#+id/textView_other"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="12dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"/>
</RelativeLayout>
</FrameLayout>
And the code for the ListView for that picture:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#e5e5e5">
<ListView android:id="#+id/listView_something"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:listSelector="#drawable/list_item_selector"
android:drawSelectorOnTop="true"/>
</LinearLayout>
The code for list_item_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/list_item_selected" android:state_pressed="true"/>
<item android:drawable="#android:color/transparent" android:state_focused="true"/>
<item android:drawable="#android:color/transparent"/>
</selector>
Here's the file for the card_layout.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="7dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
</shape>
</item>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/list_item_selected" android:state_pressed="true"/>
<item android:drawable="#android:color/transparent" android:state_focused="true"/>
<item android:drawable="#android:color/transparent"/>
</selector>
Here's what happens when I switch the RelativeLayout's background to the selector that the ListView is using, and change the ListView so that it's selector is transparent: Sort of working
So for whatever reason, the card_layout.xml file isn't allowed to have the two items before the selector information and everything goes weird. Can anyone tell me how this is properly implemented? Like Google Play Music (This might not be the best example because it looks like a GridView or something along those lines)
Do I have to implement a GridView to display this list?

I found a solution, I don't know if it's the best solution, but it got what I wanted done.
Put simply, I've found that adding the selector code inside the card_layout.xml file does not work. What you should do is create a layout xml file for each state that you wish to implement on the button or list item and embed that layout in the selector itself, like in the answer for this SO post here: Android Using layer-list for button selector.
Since I didn't want to bother finding out colors and transparencies I would need to implement the background for three different states I've basically placed a RelativeLayout which lies over top of the entire list item to act as the select-able part of the item.
The code for this is here:
<?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="72dp">
<RelativeLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#drawable/card_layout">
<LinearLayout android:id="#+id/linearLayout_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_vertical">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/imageView_thumbnail"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="50dp"
android:orientation="vertical"
android:layout_toRightOf="#+id/linearLayout_thumbnail"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView_title"
android:paddingLeft="5dp"
android:textSize="18dp"
android:text="SOME TEXT" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView_subtitle"
android:paddingLeft="5dp"
android:textSize="12dp"
android:text="SOME TEXT" />
</LinearLayout>
<TextView
android:id="#+id/textView_extra"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="12dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="#drawable/list_item_selector"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"/>
</FrameLayout>
So, now this is working, screenshot here:

Make button background transparent using selector

Here we go. I have a button that has a non-pressed state background as transparent. As soon as the button is pressed, the background is no longer transparent (see the pics). I use nine patch for all my images.
This is my selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/starfighterstartbtndown" android:state_pressed="true"/>
<item android:drawable="#drawable/starfighterstartbtn"/>
</selector>
And here is the layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/mainMenuImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/starfighter" >
</ImageView>
<RelativeLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/btnStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#android:color/transparent"
android:clickable="true"
android:hapticFeedbackEnabled="true"
android:src="#drawable/startselector" >
</ImageButton>
<ImageButton
android:id="#+id/btnExit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:clickable="true"
android:src="#drawable/exitselector"
android:background="#android:color/transparent"
android:hapticFeedbackEnabled="true" >
</ImageButton>
</RelativeLayout>
Not Clicked:
Clicked:
I have also tried the following methods with no luck
button.getBackground().setAlpha(0);
button.setBackgroundColor(Color.TRANSPARENT);
Also tried the following inside the onClickListener()
view.getBackground().setAlpha(0);
view.setBackgroundColor(Color.TRANSPARENT);
button.getBackground().setAlpha(0);
button.setBackgroundColor(Color.TRANSPARENT);
Still no luck. Good luck :)

to make your button's background transparent in non pressed state , your selector should be like this :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/starfighterstartbtndown" android:state_pressed="true"/>
<item android:drawable="#android:color/transparent"/>
</selector>
And in your imageButton's declaration in xml should use the selector as a background and dont make anything as a source of your imageButton:
<ImageButton
android:id="#+id/btnStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/startselector"
android:background="#android:color/transparent"
android:clickable="true"
android:hapticFeedbackEnabled="true" />

You could use Color.argb(). It takes four int parameters, each ranging from 0 to 255.
Let's say you want a blue button with 50% alpha:
button.setBackgroundColor(Color.argb(125, 0, 0, 255));

You can also try this
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackground"/>

color of linear layout influenced by color of underlaying linear layout

i included some linearlayouts in a linear layout. But i want the linear layout on top (the included one) to be greyish, and just the background orange. When i try this, everything is orange! Is there some way i can prevent this?
my ll:
<?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"
android:background="#color/orange">
<include
android:id="#+id/bt_overview_list_places"
layout="#layout/single_overview_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<include
android:id="#+id/bt_overview_list_agenda"
layout="#layout/single_overview_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<include
android:id="#+id/bt_overview_list_shopping"
layout="#layout/single_overview_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<include
android:id="#+id/bt_overview_list_food"
layout="#layout/single_overview_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
</LinearLayout>
the one i include:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/lloverview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#color/custom_button_grey"
>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
>
<ImageView
android:id="#+id/ivoverviewimage"
android:layout_width="50dp"
android:layout_height="50dp" android:src="#drawable/ic_launcher" android:scaleType="centerCrop"
android:layout_margin="10dp"
android:layout_weight="1"/>
<LinearLayout
android:layout_width="225dp"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/tvoverviewname"
android:layout_width="225dp"
android:layout_height="wrap_content"
android:layout_gravity="left|top"
android:layout_marginLeft="10dip"
android:text="naam"
android:textSize="16dip"
android:maxLines="1"
android:ellipsize="marquee"
android:textColor="#color/black"/>
<TextView
android:id="#+id/tvoverviewtext"
android:layout_width="225dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:maxLines="3"
android:text="tip"
android:textSize="12dip"
android:ellipsize="end"
android:textColor="#color/black"/>
</LinearLayout>
<ImageView
android:id="#+id/arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/iconarrowsmall"
android:layout_gravity="center_vertical"
android:layout_margin="2dip"
/>
</LinearLayout>
<ImageView
android:id="#+id/bottom_border"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/custombuttonlist_bottomborder"
/>
</LinearLayout>
I already tried giving the linear layouts colors programmatically:
lPlaces= (LinearLayout)findViewById(R.id.bt_overview_list_places);
llPlaces.setBackgroundColor(R.color.custom_button_grey);
but everything just stays orange (with some difference in color).
I checked my color, and i think it should be 100% NOT transparent:
<color name="custom_button_grey_text">#585850</color>
even with the FF added in front of it:
<color name="custom_button_grey_text">#FF585850</color>

try like this in xml
android:background="#FF4500"
in place of
android:background="#color/custom_button_grey"

You should override the background parameter for each included layout. You can override any attribute using android:layout_*
Take a look at the official documentation using <include> tag.

Ok i get it:
i created an drawable file:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- focused -->
<item android:state_focused="true" android:drawable="#color/list_even" />
<!-- focused and pressed-->
<item android:state_focused="true" android:state_pressed="true" android:drawable="#color/list_even" />
<!-- pressed -->
<item android:state_pressed="true" android:drawable="#color/list_even" />
<!-- default -->
<item android:drawable="#color/list_odd" />
</selector>
(now i have nice colorchange when i press it too)
and set that as background resource:
llPlaces.setBackgroundResource(R.drawable.overview_background_color_even);