Develop Reference

Parent view is overlapped by child view

I am developing an Android application in which I would like to display the GridView using RecyclerView.
I could able to create separate layout for an item and display it in GridView dynamically.But I face an issue in showing tick mark on top right of each item.
The tick mark is hidden by CardView
Here is my item_grid.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="110dp"
android:layout_height="110dp">
<android.support.v7.widget.CardView
android:id="#+id/cardView2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="10dp"
android:elevation="#dimen/activity_horizontal_margin">
<ImageView
android:id="#+id/image_hobby_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:src="#drawable/cycling" />
<TextView
android:id="#+id/text_hobby_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/colorAccent"
android:gravity="center"
android:padding="3dp"
android:paddingBottom="15dp"
android:paddingTop="15dp"
android:text="CYCLING"
android:textColor="#android:color/white"
android:textSize="12sp"
android:textStyle="bold" />
</android.support.v7.widget.CardView>
<ImageView
android:id="#+id/image_hobby_selected_icon"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="top|right"
android:adjustViewBounds="true"
android:src="#drawable/all_checked_round" />
</FrameLayout>
I have tried bringToFront() method but it is not working.
viewHolder.checkMark.bringToFront();
((View) viewHolder.checkMark.getParent()).invalidate();
(viewHolder.checkMark.getParent()).requestLayout();
Please help me find the solution.

Please use elevation.
If your card view has elevation as 10dp, then set elevation in imageView as 11dp.
<ImageView
android:id="#+id/image_hobby_selected_icon"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="top|right"
android:adjustViewBounds="true"
android:src="#drawable/ic_camera"
android:elevation="13dp"
/>

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 add another ImageView over an existing ImageView dynamically?

I know similar questions have been asked before but I think my case is different.
So I'm trying to make a playlist using a RecyclerView and when a song is selected I want the circular image which holds the Image for the song to change to a tick sign while the original image can be seen faded in the background. I have my tick image ready.
How can I add this image over my existing ImageView dynamically? The putting one image in the background method is not a solution for me because the music image file is loaded dynamically from Realm and thus can't be the background.
The XML code for my RecyclerView items is below:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:paddingRight="10dp"
android:paddingLeft="30dp"
>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="start"
android:transitionName="albumArt"
android:id="#+id/album_art"
android:scaleType="centerCrop"
android:src="#color/colorPrimary"/>
<LinearLayout
android:layout_width="fill_parent"
android:gravity="right"
android:paddingLeft="20dp"
android:orientation="vertical"
android:layout_marginTop="20dp"
android:layout_height="wrap_content">
<TextView
android:id="#+id/data"
android:layout_width="match_parent"
android:fontFamily="sans-serif"
android:textColor="#ffffff"
android:text="Music Name"
android:textSize="17sp"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/data_album"
android:layout_width="match_parent"
android:fontFamily="sans-serif"
android:textColor="#bfe0e0e0"
android:textSize="14sp"
android:text="Music Artist"
android:layout_height="wrap_content"
/>
</LinearLayout>
How can I do this dynamically from java code? Can this be done using set visibility somehow? If yes, please explain new ways to do this are appreciated as well.

You can make use of FrameLayout here and place both ImageViews inside the FrameLayout and based on condition you can make one of them visible and other invisible
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:paddingRight="10dp"
android:paddingLeft="30dp"
>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="start"
android:transitionName="albumArt"
android:id="#+id/album_art"
android:scaleType="centerCrop"
android:src="#color/colorPrimary"/>
<ImageView
android:id="#+id/imageView"
android:layout_width="120dp"
android:layout_height="120dp">
</ImageView>
</FrameLayout>
<LinearLayout
android:layout_width="fill_parent"
android:gravity="right"
android:paddingLeft="20dp"
android:orientation="vertical"
android:layout_marginTop="20dp"
android:layout_height="wrap_content">
<TextView
android:id="#+id/data"
android:layout_width="match_parent"
android:fontFamily="sans-serif"
android:textColor="#ffffff"
android:text="Music Name"
android:textSize="17sp"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/data_album"
android:layout_width="match_parent"
android:fontFamily="sans-serif"
android:textColor="#bfe0e0e0"
android:textSize="14sp"
android:text="Music Artist"
android:layout_height="wrap_content"
/>
</LinearLayout>

Yes, it can be done by using set visibility. In your layout file, you will most likely need to use a Relative Layout so you can anchor both image views exactly the same. Then on the view you do not want to initially display, you make it invisible by adding the following:
android:visibility="invisible"
Then later on when you want to toggle the visibility on/off, you can use:
myImageView.setVisibility(View.VISIBLE);
myImageView.setVisibility(View.INVISIBLE);

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>

Overlapping Component with Listener Android

I have a problem with listeners when overlapping components in Android View.
In my case I show a layout over my ListView, this is my code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#dddddd"
android:id="#+id/layout_chrono">
<Chronometer
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:textColor="#color/orange"
android:textStyle="bold"
android:id="#+id/chrono" />
</LinearLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/listview_training"
android:layout_below="#id/layout_chrono">
</ListView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_below="#id/layout_chrono"
android:id="#+id/music_layout"
android:visibility="invisible"
android:background="#444444">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:text="Titolo della canzone - Autore" />
<ImageView
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_alignParentBottom="true"
android:layout_marginLeft="40dp"
android:layout_marginBottom="15dp"
android:src="#drawable/prev_music" />
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="15dp"
android:src="#drawable/start_music" />
<ImageView
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="40dp"
android:layout_marginBottom="15dp"
android:src="#drawable/next_music" />
</RelativeLayout>
</RelativeLayout>
I attach a OnClickListener on my component in that Layout, but when I click on it both listeners (the one of the background listView and the one of the component in the layout) are called.
Is there a way to call only the one of the component in foreground?
I know that I can detach the listener from the background listView when showing the foreground layout, but I'd prefer a classier way.

One way is to create your own View which in your case probably extends LinearLayout. This custom View then overrides onTouchEvent which takes MotionEvent as argument.
What this method returns depends on whether the event is consumed or not by the condition you set (e.g: whether you want to pass click, swipe, etc). If the event is not consumed then it will be passed on.