Develop Reference

Using LinearLayout as Custom Options Menu for RecyclerView Item

Looking at many examples (mostly the messaging apps like Facebook etc) - I made a LinearLayout which describes all the options (in this case DELETE / EDIT etc along with few other icons) and added it to all items in my RecyclerView. When item in RecyclerView is Tapped and Hold I am making it visible with an animation.
This works fine for the most part but I feel like this is not the right way as each of my RecyclerView item has this LinearLayout attached but just hidden (taking too many resources) and then I am changing the Visibility State to visible or gone in case of Tap and Hold and Sigle Tap respectively.
My RecyclerView Item code is the following
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="#+id/item_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="10dp"
android:orientation="horizontal">
<refractored.controls.CircleImageView
android:layout_gravity="top"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/item_image"
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_marginTop="2dp"
android:src="#drawable/profile" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lineSpacingExtra="5dp"
android:layout_marginLeft="10dp"
android:paddingBottom="13dp"
android:paddingTop="13dp"
android:paddingLeft="15dp"
android:paddingRight="25dp"
android:text="111"
android:textColor="?attr/chatTextColor"
android:background="#drawable/rect_message_rec"
android:elevation="1dp"
android:textSize="15dp"/>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/item_date_content"
android:layout_width="70dp"
android:layout_height="20dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:visibility="gone"
android:background="#drawable/rect_white_border"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<TextView
android:id="#+id/item_datetime"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="24m ago"
android:textSize="10sp"
android:gravity="center"
android:textColor="#a9a9b0"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/options_layout"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginBottom="30dp"
android:visibility="gone"
android:background="#drawable/rect_white_border"
android:elevation="10dp"
android:gravity="center"
android:layout_alignParentRight="true"
android:orientation="horizontal">
<pl.droidsonroids.gif.GifImageView
android:id="#+id/opt_1"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/ic_delete_gif"
android:layout_marginRight="10dp"
/>
<pl.droidsonroids.gif.GifImageView
android:id="#+id/opt_2"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/ic_edit_gif"
android:layout_marginRight="10dp"
/>
<pl.droidsonroids.gif.GifImageView
android:id="#+id/opt_3"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/ic_download_gif"
android:layout_marginRight="10dp"
/>
<pl.droidsonroids.gif.GifImageView
android:id="#+id/opt_4"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/ic_push_gif"
android:layout_marginRight="10dp"
/>
<pl.droidsonroids.gif.GifImageView
android:id="#+id/opt_5"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/ic_pull_gif"
/>
</LinearLayout>
</RelativeLayout>
In android:id="#+id/options_layout" I am hiding it than showing it when user tap and holds But I felt like there are better ways to do this, If I Look at the other apps, it seems like its an overlay on top of while 'Activity' or Fragment as shown in the following screenshot
The above feels more responsive and light-weight. The other way I thought I could do this is to put this options_layout on my MainActivity and call it every time when user Tap and holds an item of RecyclerView but if this is how it is done then the question is how do you align the layout right on top of RecyclerView item as shown in the above screenshot, the option layout opens just at the right potion to the recycler view selected item.
Any idea how is it done?

Animating 2 views together hides one where the other view was

I have 2 views (a button and a slider bar), one above the other, and I am animating the lower one out of frame and I want the other view to also animate down the same amount. My issue is that the spot where the lower view use to be clips out the top view. (See images). Both animations are triggered by a view model property change.
TimeView.Animate().TranslationYBy(ViewModel.IsShowingEmployees ? -TimeView.Height : TimeView.Height);
MyPositionButton.Animate().TranslationYBy(ViewModel.IsShowingEmployees ? -TimeView.Height : TimeView.Height);
Before Animation:
After Animation:
How do I get the lower view to stop clipping the upper one? I have attempted to alter the view's Z and TransitionZ properties to make sure the button is higher then the bar. I have also tried to set the visibility of the bar to Gone on animation completion. Also I have tried to use a TranslateAnimation so that I could have control over the Fill properties. None of these thing have worked.
Here is a look at the axml.
<RelativeLayout
android:id="#+id/map_area_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/under_list_view">
<RelativeLayout
android:id="#+id/map_container_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:id="#+id/time_view"
android:layout_width="300dp"
android:layout_height="44dp"
android:background="#ddffffff"
android:layout_alignParentBottom="true">
<TextView
android:id="#+id/time_text_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:text="4:56PM"
android:textColor="#color/gray_dark"
android:textSize="18dp"
android:gravity="center_vertical"
android:layout_marginLeft="10dp" />
<SeekBar
android:id="#+id/time_seek_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:max="1440"
android:progress="700"
android:progressDrawable="#drawable/custom_scrubber_progress"
android:thumb="#drawable/custom_scrubber_control"
android:secondaryProgress="0"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/time_text_view" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/time_view"
android:layout_alignParentLeft="true"
android:layout_margin="5dp">
<ImageButton
android:id="#+id/my_location_button"
android:layout_height="50dp"
android:layout_width="50dp"
android:background="#drawable/ek_fab_button_ripple_white"
android:src="#drawable/ic_my_location_24p"
android:tint="#color/gray_dark" />
</RelativeLayout>
</RelativeLayout>

After switching on the "Show layout bounds", OP found out that he was animating the Button itself, not the RelativeLayout. After animating RelativeLayout no clipping would happen.
Old answer
Change the places of your RelativeLayouts, so that one with ImageButton is declared below of another with SeekBar. In that case the ImageButton will be drawn over SeekBar.
<RelativeLayout
android:id="#+id/map_area_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/under_list_view">
<RelativeLayout
android:id="#+id/map_container_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:id="#+id/time_view"
android:layout_width="300dp"
android:layout_height="44dp"
android:background="#ddffffff"
android:layout_alignParentBottom="true">
<TextView
android:id="#+id/time_text_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:text="4:56PM"
android:textColor="#color/gray_dark"
android:textSize="18dp"
android:gravity="center_vertical"
android:layout_marginLeft="10dp" />
<SeekBar
android:id="#+id/time_seek_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:max="1440"
android:progress="700"
android:progressDrawable="#drawable/custom_scrubber_progress"
android:thumb="#drawable/custom_scrubber_control"
android:secondaryProgress="0"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/time_text_view" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/time_view"
android:layout_alignParentLeft="true"
android:layout_margin="5dp">
<ImageButton
android:id="#+id/my_location_button"
android:layout_height="50dp"
android:layout_width="50dp"
android:background="#drawable/ek_fab_button_ripple_white"
android:src="#drawable/ic_my_location_24p"
android:tint="#color/gray_dark" />
</RelativeLayout>
</RelativeLayout>

How to create a Concave view on edit text android

I am trying to achieve the view present in the below picture
I tried all possible solution that I found but didn't worked for me
My tried code
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/fab_margin">
<com.pkmmte.view.CircularImageView
android:layout_width="105dp"
android:layout_height="105dp"
android:src="#drawable/des"
android:elevation="1dp"
app:border="true"
app:border_color="#864543"
app:border_width="8dp"
app:shadow="false"
android:id="#+id/view" />
<TextView
android:layout_width="match_parent"
android:layout_height="110dp"
android:background="#435467"
android:layout_alignBottom="#+id/view"
android:layout_alignParentStart="true"
android:layout_marginStart="50dp"
android:foregroundGravity="center"
android:layout_marginEnd="#dimen/fab_margin"/>
</RelativeLayout>
I have tried below link ticked ans and also try to manipulate it according to my view but didn't succeed
How to create EditText with rounded corners?
Is I am on right way? This cant be achieved by making a XML in drwable and use it as background??

Make TextView lower than ImageView.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="105dp"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.pkmmte.view.CircularImageView
android:layout_width="105dp"
android:layout_height="105dp"
android:src="#drawable/des"
android:elevation="1dp"
app:border="true"
app:border_color="#864543"
app:border_width="8dp"
app:shadow="false"
android:id="#+id/view" />
<TextView
android:layout_centerVertical="true"
android:text="111"
android:textColor="#000000"
android:paddingLeft="55dp"
android:gravity="left|center_vertical"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginStart="50dp"
android:background="#FFFFFF"/>
</RelativeLayout>

Bottom view scrolls with recyclerview in viewpager with tablayout and Caordinatelayout

I am using coardinate layout with recyclerview in viewpager and tablayout. I have a view for banner which i want to show over the recyclerview at the bottom. This bottom view is only visible if i scroll up the recyclerview list and hides when i scrollback down.I want this view to be visible all the time over recyclerview. Any help will be appreciated. Thanks in advance.r image description here]1]1
Here is my xml code
<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:background="#color/deal_display_bg"
tools:context="com.safar.spicedeals_activities.DealsActivity$PlaceholderFragment">
<View
android:id="#+id/topview_deal"
android:layout_width="match_parent"
android:layout_height="3dp"
android:layout_alignParentTop="true"
android:background="#color/spice_laddooblue"
android:visibility="gone" />
<View
android:layout_width="match_parent"
android:layout_height="5dp" />
<TextView
android:id="#+id/no_deals_available"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/no_deals_available"
android:textColor="#color/spice_laddooblue"
android:textSize="18sp"
android:textStyle="bold"
android:visibility="gone" />
<FrameLayout
android:id="#+id/frameLayoutDeals"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bannerView"
android:layout_below="#+id/topview_deal"
android:padding="2dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ProgressBar
android:id="#+id/progressBarDeals"
style="?android:attr/android:progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="visible" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- </android.support.v4.widget.SwipeRefreshLayout> -->
</FrameLayout>
<RelativeLayout
android:id="#+id/relativeLayout_PriceTotal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/background_with_border_square"
android:padding="10dp"
android:visibility="gone">
<TextView
android:id="#+id/textView_totalPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="#string/total_price"
android:textColor="#color/spice_laddooblue"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="#+id/textView_totalPriceResult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignTop="#+id/textView_totalPrice"
android:layout_marginLeft="3dp"
android:layout_marginTop="2dp"
android:layout_toRightOf="#+id/textView_totalPrice"
android:textColor="#color/spice_laddooblue"
android:textSize="15sp"
android:textStyle="bold" />
<Button
android:id="#+id/button_processDeal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textView_totalPrice"
android:layout_marginTop="10dp"
android:background="#color/spice_laddooblue"
android:text="#string/proceed_tag"
android:textColor="#color/White"
android:textStyle="italic" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/bannerView"
android:layout_width="match_parent"
android:layout_height="58dp"
android:layout_alignParentBottom="true"
android:background="#drawable/curved_white_with_blue_border"
android:visibility="gone">
<TextView
android:id="#+id/bannerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:gravity="center"
android:padding="3dp"
android:text="Banner"
android:visibility="gone" />
<ImageView
android:id="#+id/bannerImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center"
android:padding="3dp"
android:scaleType="fitXY"
android:visibility="gone" />
<ImageView
android:id="#+id/bannerClose"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:src="#drawable/cross_icon" />
</RelativeLayout>
</RelativeLayout>

This worked for me! add this attribute for your android.support.v7.widget.Toolbar
app:layout_scrollFlags="scroll"
The app:layout_scrollFlags attribute of the Toolbar indicates to the view how to respond. It has the following possible values.
scroll :
This flag is generally set for all views that need to
scroll off-screen. Views that don’t use this flag remain static
allowing the other scrollable views to slide behind it.
enterAlways :
This flag ensures that any downward scroll will cause the view to
become visible, enabling the quick return pattern.
enterAlwaysCollapsed :
An additional flag for ‘enterAlways’ which
modifies the returning view to only initially scroll back to it’s
collapsed height.
exitUntilCollapsed :
This flag causes the view to
be scrolled until it is collapsed (its minHeight is reached) before
exiting
snap : Upon a scroll ending, if the view is only partially
visible then it will be snapped and scrolled to it’s closest edge.
Hence this avoids mid-animation states of a view
More details can be found here.

RecyclerView item touch to highlight

I am using a RecyclerView and I am not able to see any feedback when I touch on the item of the RecyclerView. How do I achieve it?
I am trying to show a feedback to the user when they are touching the row of RecyclerView. Something like a ripple effect.
I want to know how to achieve it in a specific row of the RecyclerView.
This is the recycler view's custom row 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="50dp"
android:id="#+id/drawer_row"
android:background="?android:attr/selectableItemBackground"
android:clickable="true">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:layout_marginStart="30dp"
android:layout_toEndOf="#+id/navigation_image"
android:layout_toRightOf="#+id/navigation_image"
android:textSize="17sp" />
<ImageView
android:id="#+id/navigation_image"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:layout_marginStart="30dp" />
<TextView
android:id="#+id/horizontal_line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignParentBottom="true"
android:background="#F1F1F1" />
</RelativeLayout>
This is the layout of the Activity having the RecyclerView
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/windowBackground">
<RelativeLayout
android:id="#+id/nav_header_container"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_alignParentTop="true"
android:background="#drawable/ic_drawer_header">
<ImageView
android:id="#+id/circle_imageview"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#drawable/profile_pic"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="John Doe"
android:textSize="20sp"
android:textColor="#ffffff"
android:layout_below="#+id/circle_imageview"
android:layout_alignLeft="#+id/circle_imageview"
android:layout_alignStart="#+id/circle_imageview"
android:layout_marginTop="5dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Transaction Technologies"
android:layout_below="#+id/textView"
android:layout_alignLeft="#+id/textView"
android:layout_alignStart="#+id/textView"
android:textColor="#ffffff"
android:layout_marginTop="5dp" />
</RelativeLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/drawerList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/nav_header_container" />
</RelativeLayout>
I just need to highlight/give feedback of the row which is being touched by the user. How do I achieve it?
Thanks in advance.

You need to add android:focusable="true" in your custom row item for RecyclerView
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/drawer_row"
android:background="?android:selectableItemBackground"
android:focusable="true"
android:clickable="true" >
</RelativeLayout>

You can add a Ripple effect by using THIS LIBRARY.Include it in your Gradle files using.
compile 'com.thomsonreuters:rippledecoratorview:+'
Simply put your row layout in a RippleDecoratorView.For eg:
<com.thomsonreuters.rippledecoratorview.RippleDecoratorView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="4dp"
rdv:rdv_rippleColor="#android:color/holo_blue_dark"
rdv:rdv_rippleAnimationFrames="60"
rdv:rdv_rippleAnimationPeakFrame="15"
rdv:rdv_rippleMaxAlpha="0.8"
rdv:rdv_rippleAnimationDuration="600"
rdv:rdv_rippleRadius="50dp">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/drawer_row"
android:background="?android:attr/selectableItemBackground"
android:clickable="true">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:layout_marginStart="30dp"
android:layout_toEndOf="#+id/navigation_image"
android:layout_toRightOf="#+id/navigation_image"
android:textSize="17sp" />
<ImageView
android:id="#+id/navigation_image"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:layout_marginStart="30dp" />
<TextView
android:id="#+id/horizontal_line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignParentBottom="true"
android:background="#F1F1F1" />
</RelativeLayout>
</com.thomsonreuters.rippledecoratorview.RippleDecoratorView>
Or you can use any of these libs acc to your requirement:
1>https://github.com/balysv/material-ripple
2>https://github.com/siriscac/RippleView
3>https://github.com/traex/RippleEffect

I can help you but I will need some feedback from you as well. In the onCreateVIewHolder inside your recycler View adapter you must have defined textViews and assigned it to the elements inside the sample recycler view. Add this. Make sure you define the layout outside the function so its accessible throughout the class
RelativeLayout layout;
layout=(RelativeLayout)view.findViewById.(R.layout.drawer_row)
Then go to you recycler view adapter and in the onBindViewHolder define
holder.layout.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// Handle onClick event
}
});
In the onClick event you can add any kind of feedback you want to the user to experience such as starting a new activity, toasts, messages or in this case a ripple effect. You can use a custom library for ripples such as these
Ripple effect for lollipop views
https://android-arsenal.com/details/1/980
https://github.com/balysv/material-ripple

Ripple effects are not supported in pre-Lollipop devices.
Still use this material-ripple
compile 'com.balysv:material-ripple:1.0.2'
Apply ripple on holder.drawView
MaterialRippleLayout.on(holder.drawerView)
.rippleColor(Color.RED)
.create();
Or you can apply from xml
<com.balysv.materialripple.MaterialRippleLayout
android:id="#+id/ripple"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Button inside a ripple"/>
</com.balysv.materialripple.MaterialRippleLayout>