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"

Adding Ripple effect to Recycler list view for both lollipop and pre lollipop

I am trying to add Ripple Effect to RecyclerView's item. I had a look online, but could not find what I need. I have tried android:background attribute to the RecyclerView itself and set it to "?android:attr/selectableItemBackground" but it did not work.
My adapter template is like this
<?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="wrap_content"
android:clickable="true"
android:background="?android:attr/selectableItemBackground"
xmlns:custom="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:id="#+id/anLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:weightSum="4">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="3">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.kahoindia.dev.customclasses.KaHOTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
style="#style/kaho_listview_label_heading"
android:id="#+id/txtTitle"
custom:CustomTextViewFont="#string/kaho_segoeui_semi_light_font"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.kahoindia.dev.customclasses.KaHOTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:maxLines="2"
android:id="#+id/txtDetail"
style="#style/kaho_content_small_textview_style"
custom:CustomTextViewFont="#string/kaho_segoeui_regular_font"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="7dp"
android:layout_gravity="center"
android:gravity="right">
<com.kahoindia.dev.customclasses.KaHOTextView
android:id="#+id/txtDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/kaho_content_small_textview_style"
custom:CustomTextViewFont="#string/kaho_segoeui_regular_font"
/>
</LinearLayout>
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/progressBar"
android:indeterminate="true"
android:visibility="gone"
style="#android:style/Widget.Holo.ProgressBar"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
</LinearLayout>
Please help me

Use this library it provide support for both lollipop and pre lollipop versions.And for better understanding about implementation is shown in below link.
https://github.com/traex/RippleEffect
compile line for this library
dependencies {
compile 'com.github.traex.rippleeffect:library:1.3'
}

In drawable folder add new xml file like named "ripple_effect" with:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/ripple_color">
<item android:id="#android:id/mask">
<shape android:shape="oval">
<solid android:color="#color/button_background_color" />
</shape>
</item>
</ripple>
u can implement this in xml like background for items or in java like setResourceBackground also u can use standard android implementation:
android:background="?attr/selectableItemBackground"

why there is some space in this layout?

I use this code for making this 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:layout_margin="20dp"
android:background="#android:color/transparent">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_centerInParent="true"
android:background="#drawable/rounded_white_bg">
<EditText
android:id="#+id/login"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#drawable/dialog_edittex"
android:layout_margin="10dp"/>
<EditText
android:id="#+id/password"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_margin="10dp"
android:background="#drawable/dialog_edittex"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textColor="#android:color/black"
android:text="AAAAAAAAAAAA"
android:layout_gravity="center"
android:textSize="20sp"
/>
<ImageView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:src="#drawable/dialog_button_bg"/>
</LinearLayout>
</RelativeLayout>
rouded_whiite.bg.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffff" />
<corners
android:radius="20dp"/>
</shape>
But when I do this I have see this result. As you can see there is some margin below of red button. I didn't set any margin or something but there is some space there. What should I do here for getting exact result as in fist image.

Remove the margin from your RelativeLayout and make your LinearLayout gravity android:layout_centerHorizontal="true"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_centerHorizontal="true"
android:background="#drawable/rounded_white_bg">

Use :
android:layout_centerHorizontal="true"
instead of
android:layout_centerInParent="true"
and remove margin from bottom...

<LinearLayout
android:layout_height="wrap_content"
it is because of this. remove the imageview from the linear layout and set in the relative layout and give property as alignparent bottom and for the linear layout give alignparent top and above the image view property,

Try This
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:background="#android:color/transparent">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:background="#drawable/rounded_white_bg">
<EditText
android:id="#+id/login"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#drawable/dialog_edittex"
android:layout_margin="10dp"/>
<EditText
android:id="#+id/password"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_margin="10dp"
android:background="#drawable/dialog_edittex"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textColor="#android:color/black"
android:text="AAAAAAAAAAAA"
android:layout_gravity="center"
android:textSize="20sp"
/>
<ImageView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:src="#drawable/dialog_button_bg"/>
</LinearLayout>
</RelativeLayout>

If your using drawable for imageview as .png or .jpg use the following drawable for your image may be it would help. save this as backgroung_bg.xml or anything else as you wish
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<shape >
<corners android:bottomLeftRadius="20dp"
android:bottomRightRadius="20dp"
android:topLeftRadius="0dp"
android:topRightRadius="0dp"/>
<solid android:color="#CF4647"/>
<padding android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp"/>
</shape>
</item>
when you apply this you would get following warning just ignore and run it. if you need gradient type of color ask me
The graphics preview in the layout editor may not be accurate:
Different corner sizes are not supported in Path.addRoundRect. (Ignore for this session)

Add semi-transparent overlay to activity backround at runtime

I have an app that i set the background to an image from xml. I get the view by calling
setContentView(R.)
.
How can i place a semi-transparent overlay on this background at runtime depending on a condition. I would like to have a red overlay with its alpha set to 50%.
I have tried creating a seperate xml file with the view duplicated and a different image/overlay but its messy as i have to inflate all the buttons/textview when i use the new view.
thanks matt
[edit1]
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/carefreebgscaledlighting"
android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="#+id/textviewcompanyname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#003F87" />
<TextView
android:id="#+id/textViewYouAreSignedIn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_alignParentTop="true"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#003F87"
/>
<TextView
android:id="#+id/textViewUnsentTransactions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_below="#id/textViewYouAreSignedIn"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#003F87"
/>
[edit2]
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<RelativeLayout
android:id="#+id/transparentOverlay"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/red_transparent" >
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/carefreebgscaledlighting"
android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="#+id/textviewcompanyname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#003F87" />
<TextView
android:id="#+id/textViewYouAreSignedIn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_alignParentTop="true"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#003F87"
/>
[edit3]
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:id="#+id/ll1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/carefreebgscaledlighting"
android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="#+id/textviewcompanyname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#003F87" />
.
if(status.equalsIgnoreCase(IN)){
youAreSignedInAt.setText("You are signed in at " + name);
LinearLayout layout =(LinearLayout)findViewById(R.id.ll1);
layout.setBackgroundResource(R.drawable.carefreebgscaledlightingred);
}else{
youAreSignedInAt.setText("You are not signed in");
LinearLayout layout =(LinearLayout)findViewById(R.id.ll1);
layout.setBackgroundResource(R.drawable.carefreebgscaledlighting);
}

Off the top of my head, you could declare the background color including alpha component in a resource file (i.e. colors.xml)
<color name="red_transparent">#66FF0000</color>
And then put a view (i.e. RelativeLayout), on top of the rest of the views.-
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- All your views -->
<!-- Transparent layer -->
<RelativeLayout
android:id="#+id/transparentOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/red_transparent" />
</RelativeLayout>
All you need to do is changing visibility of R.id.transparentOverlay as you desire.

How to draw two horizontal lines for the layout(top and bottom) in android

I need to draw two horizontal lines to the layout.One line want to be at the top and the second one should want to be at the bottom.
How to achieve this?
Thanks for you precious time..

I think, it will help you.
<?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:background="#android:color/white" >
<View
android:layout_width="match_parent"
android:layout_alignParentTop="true"
android:layout_height="2dp"
android:background="#android:color/black" />
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_alignParentBottom="true"
android:background="#android:color/black" />
</RelativeLayout

use this code
<View
android:id="#+id/line_top"
android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="#FF0000"
android:layout_alignParentTop="true"/>
<View
android:id="#+id/line_bottom"
android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="#FF0000"
android:layout_alignParentBottom="true"/>

Method1
Use a relative layout. You can define other ui elements also. Have View with a specified height and place it at the top and the bottom.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<View
android:layout_width="fill_parent"
android:layout_height="20dp" // specify a number in dp to increase or decrease height
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#FF2824" change do your desired color
android:orientation="vertical"
/>
<View
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="20dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#FF2824"//change do your desired color
android:orientation="vertical"/>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/linearLayout1"
android:layout_marginLeft="102dp"
android:layout_marginTop="106dp"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button1"
android:layout_below="#+id/button1"
android:layout_marginTop="66dp"
android:text="Button" />
</RelativeLayout>
Resulting snap shot.
Method 2
Here you are not using any new views. Just add a custom background to the existing layout. This will occupy less memory than the above coz you are not creating any new views.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/bkg" //add custom background
tools:context=".MainActivity" >
create a drawable folder under resources and define bkg.xml under it.
<?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="#FF0000" />
</shape>
</item>
<item android:top="20dp" android:bottom="20dp" >
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</item>
</layer-list>