Develop Reference

Android RecyclerView height problem inside view pager2 inside NestedScrollView with TabLayout [duplicate]

There are a few posts on getting ViewPager to work with varying height items that center around extending ViewPager itself to modify its onMeasure to support this.
However, given that ViewPager2 is marked as a final class, extending it isn't something that we can do.
Does anyone know if there's a way to make this work out?
E.g. let's say I have two views:
View1 = 200dp
View2 = 300dp
When the ViewPager2 (layout_height="wrap_content") loads -- looking at View1, its height will be 200dp.
But when I scroll over to View2, the height is still 200dp; the last 100dp of View2 is cut off.

The solution is to register a PageChangeCallback and adjust the LayoutParams of the ViewPager2 after asking the child to re-measure itself.
pager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
override fun onPageSelected(position: Int) {
super.onPageSelected(position)
val view = // ... get the view
view.post {
val wMeasureSpec = MeasureSpec.makeMeasureSpec(view.width, MeasureSpec.EXACTLY)
val hMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
view.measure(wMeasureSpec, hMeasureSpec)
if (pager.layoutParams.height != view.measuredHeight) {
// ParentViewGroup is, for example, LinearLayout
// ... or whatever the parent of the ViewPager2 is
pager.layoutParams = (pager.layoutParams as ParentViewGroup.LayoutParams)
.also { lp -> lp.height = view.measuredHeight }
}
}
}
})
Alternatively, if your view's height can change at some point due to e.g. asynchronous data load, then use a global layout listener instead:
pager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
private val listener = ViewTreeObserver.OnGlobalLayoutListener {
val view = // ... get the view
updatePagerHeightForChild(view)
}
override fun onPageSelected(position: Int) {
super.onPageSelected(position)
val view = // ... get the view
// ... IMPORTANT: remove the global layout listener from other views
otherViews.forEach { it.viewTreeObserver.removeOnGlobalLayoutListener(layoutListener) }
view.viewTreeObserver.addOnGlobalLayoutListener(layoutListener)
}
private fun updatePagerHeightForChild(view: View) {
view.post {
val wMeasureSpec = MeasureSpec.makeMeasureSpec(view.width, MeasureSpec.EXACTLY)
val hMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
view.measure(wMeasureSpec, hMeasureSpec)
if (pager.layoutParams.height != view.measuredHeight) {
// ParentViewGroup is, for example, LinearLayout
// ... or whatever the parent of the ViewPager2 is
pager.layoutParams = (pager.layoutParams as ParentViewGroup.LayoutParams)
.also { lp -> lp.height = view.measuredHeight }
}
}
}
}
See discussion here:
https://issuetracker.google.com/u/0/issues/143095219

In my case, adding adapter.notifyDataSetChanged() in onPageSelected helped.

Just do this for the desired Fragment in ViewPager2:
override fun onResume() {
super.onResume()
layoutTaskMenu.requestLayout()
}
Jetpack: binding.root.requestLayout() (thanks #syed-zeeshan for the specifics)

Stumbled across this case myself however with fragments.
Instead of resizing the view as the accepted answer I decided to wrap the view in a ConstraintLayout. This requires you to specify a size of your ViewPager2 and not use wrap_content.
So Instead of changing size of our viewpager it will have to be minimum size of the largest view it handles.
A bit new to Android so don't know if this is a good solution or not, but it does the job for me.
In other words:
<androidx.constraintlayout.widget.ConstraintLayout
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="match_parent"
>
<!-- Adding transparency above your view due to wrap_content -->
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
>
<!-- Your view here -->
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

For me this worked perfectly:
viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
override fun onPageScrolled(
position: Int,
positionOffset: Float,
positionOffsetPixels: Int
) {
super.onPageScrolled(position,positionOffset,positionOffsetPixels)
if (position>0 && positionOffset==0.0f && positionOffsetPixels==0){
viewPager2.layoutParams.height =
viewPager2.getChildAt(0).height
}
}
})

Just call .requestLayout() to the root view of layout in the onResume() of your Fragment class which is being used in ViewPager2

Just Add this small code in your all fragments of ViewPager2
#Override
public void onResume() {
super.onResume();
binding.getRoot().requestLayout();
}
This is working for me perfectly (If you are not using binding then Just get a root layout instance in place of binding)

I had a similar problem and solved it as below.
In my case I had ViewPager2 working with TabLayout with fragments with different heights.
In each fragment in the onResume() method, I added the following code:
#Override
public void onResume() {
super.onResume();
setProperHeightOfView();
}
private void setProperHeightOfView() {
View layoutView = getView().findViewById( R.id.layout );
if (layoutView!=null) {
ViewGroup.LayoutParams layoutParams = layoutView.getLayoutParams();
if (layoutParams!=null) {
layoutParams.height = ViewGroup.LayoutParams.WRAP_CONTENT;
layoutView.requestLayout();
}
}
}
R.id.layout is layout of particular fragment.
I hope I helped.
Best regards,
T.

No posted answer was entirely applicable for my case - not knowing the height of each page in advance - so I solved different ViewPager2 pages heights using ConstraintLayout in the following way:
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
>
<!-- ... -->
</com.google.android.material.appbar.AppBarLayout>
<!-- Wrapping view pager into constraint layout to make it use maximum height for each page. -->
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/viewPagerContainer"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#id/bottomNavigationView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/appBarLayout"
>
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_navigation_menu"
/>
</androidx.constraintlayout.widget.ConstraintLayout>

#Mephoros code works perfectly when swiped between views but won't work when views are peeked for first time. It works as intended after swiping it.
So, swipe viewpager programmatically:
binding.viewpager.setCurrentItem(1)
binding.viewpager.setCurrentItem(0) //back to initial page

I'm using the ViewPager2ViewHeightAnimator from here

I got stuck with this problem too. I was implementing TabLayout and ViewPager2 for several tabs with account information. Those tabs had to be with different heights, for example: View1 - 300dp, View2 - 200dp, Tab3 - 500dp. The height was locked within first view's height and the others were cut or extended to (example) 300dp. Like so:
So after two days of searches nothing helped me (or i had to try better) but i gave up and used NestedScrollView for all my views. For sure, now i don't have effect, that the header of profile scrolls with info in 3 views, but at least it now works somehow.
Hope this one helps someone! If you have some advices, feel free to reply!
P.s. I'm sorry for my bad english skills.

Only adapter.notifyDataSetChanged() worked for me in ViewPager2. Used below code in Kotlin.
viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
override fun onPageSelected(position: Int) {
super.onPageSelected(position)
adapter.notifyDataSetChanged()
}
})

why don't you do it by replacing not using ViewPager2.
like code in below:
private void fragmentController(Fragment newFragment){
FragmentTransaction ft;
ft = mainAct.getSupportFragmentManager().beginTransaction();
ft.replace(R.id.relMaster, newFragment);
ft.addToBackStack(null);
ft.commitAllowingStateLoss();
}
Where relMaster is RelativeLayout.

Answer by #Mephoros worked for me in the end. I had a Recyclerview with pagination(v3) in one of the fragments and it was behaving really strangely with page loads. Here is a working snippet based on the answer in case anyone has problems getting and cleaning views.
viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
var view : View? = null
private val layoutListener = ViewTreeObserver.OnGlobalLayoutListener {
view?.let {
updatePagerHeightForChild(it)
}
}
override fun onPageSelected(position: Int) {
super.onPageSelected(position)
// ... IMPORTANT: remove the global layout listener from other view
view?.viewTreeObserver?.removeOnGlobalLayoutListener(layoutListener)
view = (viewPager[0] as RecyclerView).layoutManager?.findViewByPosition(position)
view?.viewTreeObserver?.addOnGlobalLayoutListener(layoutListener)
}
private fun updatePagerHeightForChild(view: View) {
view.post {
val wMeasureSpec = View.MeasureSpec.makeMeasureSpec(view.width, View.MeasureSpec.EXACTLY)
val hMeasureSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)
view.measure(wMeasureSpec, hMeasureSpec)
if (viewPager.layoutParams.height != view.measuredHeight) {
viewPager.layoutParams = (viewPager.layoutParams)
.also { lp -> lp.height = view.measuredHeight }
}
}
}
})

just add this code to each fragments :
override fun onResume() {
super.onResume()
binding.root.requestLayout()
}

Finally, I can fix this without requestLayout, notifyDataChanged, or the other solutions above!
It's really easy and simple!
You just need to save current height onPause, then load the saved height onResume.
Look at this example code:
public class MyTabbedFragment extends Fragment {
public MyTabbedFragmentViewBinding binding;
String TAG = "MyTabbedFragment";
int heightBeforePause;
// other code
#Override
public void onResume() {
super.onResume();
Log.d(TAG, "lifecycle | onResume | before set height | rec view height: " + binding.recycleView.getHeight() + " | height before pause: " + heightBeforePause);
// load the saved height
if(heightBeforePause > 0) {
FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, heightBeforePause);
binding.recycleView.setLayoutParams(layoutParams);
}
}
#Override
public void onPause() {
super.onPause();
// save the current height
heightBeforePause = binding.recycleView.getHeight();
Log.d(TAG, "lifecycle | onPause | rec view height: " + binding.recycleView.getHeight());
}

viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
override fun onPageSelected(position: Int) {
super.onPageSelected(position)
val view = (viewPager[0] as RecyclerView).layoutManager?.findViewByPosition(position)
view?.post {
val wMeasureSpec = MeasureSpec.makeMeasureSpec(view.width, MeasureSpec.EXACTLY)
val hMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
view.measure(wMeasureSpec, hMeasureSpec)
if (viewPager.layoutParams.height != view.measuredHeight) {
viewPager.layoutParams = (viewPager.layoutParams).also { lp -> lp.height = view.measuredHeight }
}
}
}
})

Android - first animation occurrence acts differently

I am struggling for hours with some problem I encountered while creating a simple animation in my app.
I have a LinearLayout with elements inside that is hidden behind an Image View and which should be shown (by animating on layouts width) on the click event. If I delete elements from inside the LinearLayout everything performs well, but because the children of the layout are pushing its width (which means that even if layouts width is set to 0 it is still pushed to width +/- 100dp by the elements inside) I have problems with hiding the layout.
However it is not the case when animation is performed - when I am animating layout to go to width 0 it properly crops the children. But as soon as animation is done - the layout is pushed by the children. I had an idea to make layout crop its children by default, but I have tried multiple solutions and none of them worked. Then I thought that maybe I will just hide elements (visibility gone) after animation is done. And it "kinda" solved the problem - but I am still having a problem with first occurrence of "showing" animation.
What I am doing is - at the start I am setting layouts width to 0 and hiding it along with its children (setting their to visibility gone). Then on "showing" animation I am making layout and its children visible in onAnimationStart method and then the animation increases layouts width from 0 to 156dp. "Hiding" animation is reverted - I am decreasing layouts width to 0 and onAnimationEnd I am hiding the layout and its content. The problem is that for some reason the first time showing animation is invoked and I am making the layout and views visible in onAnimationStart, there is a gap between this code and the moment which animation actually starts, which makes views visible for a split second before the animation starts.
This is how it looks:
hidden, shown. And here is the xml code for it:
<LinearLayout
android:id="#+id/linSettingsPopup"
android:layout_width="156dp"
android:layout_height="56dp"
app:layout_constraintTop_toTopOf="#id/imgProfilePicture"
app:layout_constraintBottom_toBottomOf="#id/imgProfilePicture"
app:layout_constraintRight_toRightOf="#id/imgProfilePicture"
android:layout_marginEnd="24dp"
android:background="#drawable/settings_popup_container"
android:orientation="horizontal"
android:gravity="center|start"
android:visibility="visible">
<ImageButton
android:id="#+id/btnLogout"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginStart="24dp"
android:layout_marginEnd="22dp"
android:background="#drawable/logout"
android:visibility="visible">
</ImageButton>
<ImageButton
android:id="#+id/btnSettings"
android:layout_width="32dp"
android:layout_height="32dp"
android:background="#drawable/settings"
android:visibility="visible">
</ImageButton>
</LinearLayout>
To better understand what is happening, here is the code for everything.
Setting up the view during onCreate method (of course, views are assigned to variables at this point):
private void initializeSettingsPopup()
{
settingsPopupWidth = linSettingsPopup.getLayoutParams().width;
linSettingsPopup.getLayoutParams().width = 0;
linSettingsPopup.requestLayout();
btnLogout.setVisibility(View.GONE);
btnSettings.setVisibility(View.GONE);
linSettingsPopup.setVisibility(View.GONE);
}
Animation:
public class ResizeWidthAnimation extends Animation {
private int mWidth;
private int mStartWidth;
private View mView;
public ResizeWidthAnimation(View view, int width) {
mView = view;
mWidth = width;
mStartWidth = view.getWidth();
}
#Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
int newWidth = mStartWidth + (int) ((mWidth - mStartWidth) * interpolatedTime);
mView.getLayoutParams().width = newWidth;
mView.requestLayout();
}
#Override
public void initialize(int width, int height, int parentWidth, int parentHeight) {
super.initialize(width, height, parentWidth, parentHeight);
}
#Override
public boolean willChangeBounds() {
return true;
}
}
Invoking an animation:
private void showSettingsPopup()
{
linSettingsPopup.setVisibility(View.INVISIBLE);
settingsPopupShown = true;
ResizeWidthAnimation resizeAnimation = new ResizeWidthAnimation(linSettingsPopup, settingsPopupWidth);
resizeAnimation.setDuration(350);
resizeAnimation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
linSettingsPopup.setVisibility(View.VISIBLE);
btnLogout.setVisibility(View.VISIBLE);
btnSettings.setVisibility(View.VISIBLE);
}
});
linSettingsPopup.startAnimation(resizeAnimation);
}
private void hideSettingsPopup()
{
settingsPopupShown = false;
ResizeWidthAnimation resizeAnimation = new ResizeWidthAnimation(linSettingsPopup, 0);
resizeAnimation.setDuration(350);
resizeAnimation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationEnd(Animation animation) {
linSettingsPopup.setVisibility(View.GONE);
btnLogout.setVisibility(View.GONE);
btnSettings.setVisibility(View.GONE);
}
});
linSettingsPopup.startAnimation(resizeAnimation);
}
I will also add that I managed to solve this problem by delaying a bit the code inside onAnimationStart method of "showing" animation. However it feels more like avoiding the problem than solving it, so I hope somebody can point out what I am doing wrong and have some good idea how I can solve this.

After a while I finally found a "solution" that does not require any operations on views visibility. It turns out that if layout width is 0dp, the views inside will keep pushing it, which makes layout be as wide as required to fit its children. But if I set the layout width to 1dp it actually cuts the views inside of it. So instead of animating layouts width from 156dp to 0dp on hide, I animate it from 156dp to 1dp and it works fine without any problems. Here is the working code for it:
private static final int SETTINGS_POPUP_ANIM_DURATION = 350;
private static final int SETTINGS_POPUP_HIDDEN_WIDTH = 1;
private void initializeSettingsPopup()
{
settingsPopupWidth = linSettingsPopup.getLayoutParams().width;
linSettingsPopup.getLayoutParams().width = SETTINGS_POPUP_HIDDEN_WIDTH;
linSettingsPopup.requestLayout();
}
private void showSettingsPopup()
{
settingsPopupShown = true;
ResizeWidthAnimation resizeAnimation = new ResizeWidthAnimation(linSettingsPopup, settingsPopupWidth);
resizeAnimation.setDuration(SETTINGS_POPUP_ANIM_DURATION);
linSettingsPopup.startAnimation(resizeAnimation);
}
private void hideSettingsPopup()
{
settingsPopupShown = false;
ResizeWidthAnimation resizeAnimation = new ResizeWidthAnimation(linSettingsPopup, SETTINGS_POPUP_HIDDEN_WIDTH);
resizeAnimation.setDuration(SETTINGS_POPUP_ANIM_DURATION);
linSettingsPopup.startAnimation(resizeAnimation);
}

Horizontalscrollview: imageView disappear when coming back from another Activity

I'm developing my very first app and I have an issue with ImageViews and Horizontalscrollview: I want to collect all the goals reached by the user adding images inside an Horizontalscrollview (goal reached --> new image displayed).
how 4 completed goals are displayed
They show properly and everything seems to work but when I open another activity and then I come back, they disappear. I tried to invalidate the layout but nothing, am I missing something?
Thank you in advance!
This is my XML file
<!-- language: lang-xml -->
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
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:id="#+id/layout3"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Main3Activity">
<HorizontalScrollView
android:id="#+id/horizontal_scroll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="300dp">
<LinearLayout
android:id="#+id/linear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
</LinearLayout>
</HorizontalScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
This is my Java code
The function I use to check if a goal is completed:
<!-- language: lang-java -->
protected void checkGoal(){
int progress = calculateProgress();
if(goalPref.getInt("Goal",0)!=0){
if(progress >= goalPref.getInt("Goal", 0)) {
int id = layout.getChildCount();
addNewImage(id); // <-- here I add the image
question.setText(R.string.setgoal);
updateGoalPref(0);
if (list.size() != 0) {
list = new ArrayList<>();
}
updateProgress();
}
}
}
The function I use to add images:
<!-- language: lang-java -->
protected void addNewImage(int id){
ImageView imageView = new ImageView(this);
imageView.setId(id);
imageView.setPadding(2, 2, 2, 2);
imageView.setBackgroundResource(R.drawable.check);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
layout.addView(imageView, id);
}

When you go to another activity and come back, you should call addNewImage in onResume to show the images again:
#Override
protected void onResume() {
super.onResume();
addNewImage(id);
}
If the number of goals in your activity is limited, why don't you create those ImageViews in XML and set their Visibility in java?

Since I'm pretty stubborn, I managed to find another way to do it and this is what I did: using the code I posted I added a counter to keep track of how many goals the user reached and onResume() I display as many images as the counter value.
In this way, the user can see immediately the effect of reaching a goal and the activity doesn't lose anything.
Then, I implemented it to show a description of the goal, changing the ImageViews in TextViews with those images as backgrounds. Instead of using a counter, I saved the strings I wanted to display in an ArrayList and used its size as a counter.
Hope it can be useful for someone!
<!-- language: lang-java -->
protected void checkGoal(){
int progress = calculateProgress();
if(goalPref.getInt("Goal",0)!=0){
if(progress >= goalPref.getInt("Goal", 0)) {
String newString = goalPref.getInt("Goal", 0) + "€, " + MainActivity.currentDate();
goalsCompleted.add(newString);
updateGoalCompletedList();
//Here I clean the layout and display all the TextViews
layout.removeAllViews();
for(int i=goalsCompleted.size()-1; i>0; i--){
addNewTextView(i);
}
question.setText(R.string.setgoal);
updateGoalPref(0);
if (list.size() != 0) {
list = new ArrayList<>();
}
updateProgress();
}
}
}
//The function used to display the TextViews
protected void addNewTextView(int id){
TextView textView = new TextView(this);
textView.setBackgroundResource(R.drawable.check1);
textView.setId(id);
textView.setPadding(25,260,0,0);
textView.setTextSize(12);
textView.setText(goalsCompleted.get(id));
layout.addView(textView);
}
//The function used to update and save the array
public void updateGoalCompletedList(){
Gson gson3 = new Gson();
jsonItems3 = gson3.toJson(goalsCompleted);
SharedPreferences.Editor listEd = goalsCompletedPref.edit();
listEd.putString("GoalsCompleted", jsonItems3).apply();
}
//The function used to resume the array, you can call it on onResume() or onCreate()
public void resumeGoalsCompleted(){
Gson gson3 = new Gson();
String savedList = goalsCompletedPref.getString("GoalsCompleted", "");
goalsCompleted = gson3.fromJson(savedList, new TypeToken<ArrayList<String>>() {
}.getType());
if(goalsCompleted==null)
goalsCompleted = new ArrayList<>();
//From the most recent to the least recent
for(int i=goalsCompleted.size()-1; i>0; i--){
addNewTextView(i);
}
}

Click effect/animation for all application

It is possible to create a click effect/animation for all clicks on my application?
Since I want this behaviour for all clicks events on my application, how should I do this? Is this bad for performance or resources of the smartphone?

It is hard to know without understanding the stack that has been built, that being said I think there are some safer and less methodologies to an onclick event that is the same across the board. For one I would not change fundamental nature of the "onClick" function, the lower level you mess with the more dangerous it is. That being said I think I would create my own version/function of onclick, maybe boomClick, where boomClick creates the animation that you want. Referencing a single function will barely decrease performance at all.

So, after a day working at this I managed to accomplish the expected behaviour.
Basically, I create my own Activity class which will do the animation work with the help of a custom lib. I'll try to explain what I did for future reference:
1. Add this lib to your project:
compile 'pl.droidsonroids.gif:android-gif-drawable:1.2.3'
2. Add these dimens to your "dimens.xml" file:
<dimen name="click_animation">100dp</dimen>
<dimen name="click_compensation">50dp</dimen>
3. Make the top parent of your activities layout a "RelativeLayout" and set a custom id:
<?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:id="#+id/main_layout">
... the rest of the layout ...
</RelativeLayout>
4. Create your own "Activity" class:
public class MyActivity extends AppCompatActivity {
private RelativeLayout.LayoutParams params;
public void setClickAnimation(final Activity activity) {
// if you want to change the size of the animation, change the size on the dimens.xml
int size = (int) activity.getResources().getDimension(R.dimen.click_animation);
params = new RelativeLayout.LayoutParams(size, size);
// you want the parent layout of the activity
final RelativeLayout view = (RelativeLayout) activity.findViewById(R.id.main_layout);
view.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
// you maybe won't need this compensation value
int compensation = (int) activity.getResources().getDimension(R.dimen.click_compensation);
try { startAnimation(view, (int) event.getX() - compensation, (int) event.getY() - compensation); }
catch (IOException e) { e.printStackTrace(); }
}
return true;
}
});
}
private void startAnimation(RelativeLayout view, int x, int y) throws IOException {
params.leftMargin = x;
params.topMargin = y;
// those are from the lib you imported
final GifImageView anim = new GifImageView(this);
// if you don't have it yet, put the gif you want on the assets folder
final GifDrawable gifFromResource = new GifDrawable(getAssets(), "click_animation.gif");
gifFromResource.addAnimationListener(new AnimationListener() {
#Override
public void onAnimationCompleted(int loopNumber) {
anim.setVisibility(View.GONE);
gifFromResource.stop();
gifFromResource.recycle();
}
});
anim.setBackground(gifFromResource);
gifFromResource.start();
view.addView(anim, params);
}
}
5. Make your Activities extend your "Activity" class:
public class FirstScreen extends MyActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.cards_screen);
// call the method you created and pass the activity context
setClickAnimation(this);
}
}
As for resources spent: this looks like a good solution and I am getting a good performance. The application seems to not be wasting a lot of resources with this solution.

How do I clear ListView selection?

TL;DR: You choose an option from (a) my listview. Then, you change your mind and type something in (b) my edit text. How do I clear your listview selection and only show your edittext? (and vice versa)
I have an application with a listview of options as well as an edittext to create an own option. I need the user to either choose or create an option, but not both. Here's a drawing of my layout:
Whenever the user selects an option from the listview, I set it as "selected" by making it green, like so:
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_selected="true"
android:drawable="#color/colorPrimary"/>
<item
android:state_selected="false"
android:drawable="#color/windowBackground" />
</selector>
(this is set as the background of my listview)
Problem: I want to unselect the listview option if the user decides to type in their own option since they can only have one option.
User selects an option from the listview
User decides they want to create their own option using the edittext
The listview option is unselected when they start typing their own
I've tried doing the following, but nothing unselects.
e.setOnEditorActionListener(new TextView.OnEditorActionListener()
{
public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
for(int i=0; i<=5; i++){
listView.setItemChecked(i, false);
}
listView.clearChoices();
listView.requestLayout()
adapter.notifyDataSetChanged()
}
}
A very puzzling predicament, any help is appreciated!
Edit: here is the layout of the edittext:
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView4"
android:layout_alignBottom="#+id/textView4"
android:layout_toEndOf="#+id/textView4"
android:layout_toRightOf="#+id/textView4"
android:color="#color/colorPrimary"
android:imeOptions="actionDone"
android:inputType="text"
android:textColor="#color/textColorPrimary"
android:textColorHint="#color/colorPrimary" />
Edit: here is the layout of the listview:
<ListView
android:id="#+id/listview"
android:layout_width="wrap_content"
android:layout_height="250dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/toolbar"
android:background="#drawable/bg_key"
android:choiceMode="singleChoice"
android:listSelector="#color/colorPrimary">
</ListView>

Long Story Short
ListView selector (android:listSelector) is designed to indicate a click event, but not selected items.
If a ListView selector is drawn (after first click) it won't dissapear without drastic changes in the ListView
Hence use only drawables with transparent background if no state is applied to it as a ListView selector. Don't use a plain color resource for it, don't confuse yourself.
Use ListView choice mode (android:choiceMode) to indicate selected items.
ListView tells which row is selected by setting android:state_activated on the row's root view. Provide your adapter with corresponding layout/views to represent selected items correctly.
TL/DR Solutions
You can hide/remove selector with one of the following:
Making the selector transparent getSelector().setAlpha(0)
Resetting the current adapter with setAdapter(myAdapter) (adapter might be the same)
Solutions that might or might not work, depending on the OS version:
Making the list view to refresh layout completely via requestLayout(), invalidate() or forceLayout() methods;
Making the list view to refresh layout via notifyDataSetChanged()
Theory
Well, the built-in selection in ListView is utterly tricky at a first glance. However there are two main distinctions you should keep in mind to avoid confusing like this - list view selector and choice mode.
ListView selector
ListView selector is a drawable resource that is assumed to indicate an event of clicking a list item. You can specify it either by XML-property android:listSelector or using method setSelector(). I couldn't find it in docs, but my understanding is that this resource should not be a plain color, because after it's being drawn, it won't vanish without drastic changes in the view (like setting an adapter, that in turn may cause some glitches to appear), hence such drawable should be visible only while particular state (e.g. android:state_pressed) is applied. Here is a simple example of the drawable that can be used as a List View selector
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:drawable="#android:color/darker_gray" />
<item
android:drawable="#android:color/transparent" />
</selector>
For whatever reason you cannot use a Color State List as List View selector, but still can use plain colors (that are mostly inappropriate) and State List drawables. It makes things somewhat confusing.
After the first click on a List View happens, you will not be able to remove List View selector from the List View easily.
The main idea here is that List View selector is not designed to indicate selected item.
ListView choice mode
ListView choice mode is assumed to indicate selected items. As you might know, primarily there are two choice modes we can use in ListView - Single Choice and Multiple Choice. They allow to track a single or multiple rows selected respectively. You can set them via android:choiceMode XML-property or setChoiceMode() method.
The ListView itself keeps selected rows in it and let them know which one is selected at any given moment by setting android:state_activated property of the row root view. In order to make your rows reflect this state, their root view must have a corresponding drawable set, e.g. as a background. Here is an example of such drawable:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_activated="true"
android:drawable="#android:color/holo_green_light" />
<item
android:drawable="#android:color/transparent" />
</selector>
You can make rows selected/deselected programmatically using the setItemChecked() method. If you want a ListView to clear all selected items, you can use the clearChoices() method. You also can check selected items using the family of the methods: getCheckedItemCount(), getCheckedItemIds(), getCheckedItemPosition() (for single choice mode), getCheckedItemPositions() (for multiple choice mode)
Conclusion
If you want to keep things simple, do not use the List View selector to indicate selected items.
Solving the issue
Option 1. Dirty fix - hide selector
Instead of actually removing selector, changing layouts and implementing a robust approach, we can hide the selector drawable when it's needed and show it later when clicking a ListView item:
public void hideListViewSelector() {
mListView.getSelector().setAlpha(0);
}
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
if (mListView.getSelector().getAlpha() == 0) {
mListView.getSelector().setAlpha(255);
}
}
Option 2. Thoughtful way
Let's go through your code and make it comply the rules i described step by step.
Fix ListView layout
In your ListView layout the selector is set to a plain color, and therefore your items are colored by it when they are clicked. The drawable you use as the ListView background have no impact, because ListView state doesn't change when its rows are clicked, hence your ListView always has just #color/windowBackground background.
To solve your problem you need at first remove the selector from the ListView layout:
<ListView
android:id="#+id/listview"
android:layout_width="wrap_content"
android:layout_height="250dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/toolbar"
android:listSelector="#color/colorPrimary"
android:background="#color/windowBackground"
android:choiceMode="singleChoice"/>
Make your rows reflect activated state
In the comments you give your adapter as follows:
final ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, text1, listOfThings);
You also asked me if it's possible to keep using standard adapter to achieve desired behavior. We can for sure, but anyway a few changes are required. I can see 3 options for this case:
1. Using standard android checked layout
You can just specify a corresponding standard layout - either any of the layouts that use CheckedTextView without changed background drawable as the root component or of those that use activatedBackgroundIndicator as their background drawable. For your case the most appropriate option should be the simple_list_item_activated_1. Just set it as in your ArrayAdapter constructor like this:
final ArrayAdapter<String> adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_activated_1, android.R.id.text1, listOfThings);
This option is the closest to what i understand by 'standard' adapter.
2. Customize your adapter
You can use standard layout and mostly standard adapter with a small exception of getting a view for your items. Just introduce an anonymous class and override the method getView(), providing row views with corresponding background drawable:
final ArrayAdapter<String> adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, android.R.id.text1, listOfThings) {
#NonNull
#Override
public View getView(int position, #Nullable View convertView, #NonNull ViewGroup parent) {
final View view = super.getView(position, convertView, parent);
if (convertView == null) {
view.setBackgroundResource(R.drawable.list_item_bg);
}
return view;
}
};
3. Customize your layout
The most common way of addressing this issue is of course introducing your own layout for the items view. Here is my simple example:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/list_item_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:padding="16dp">
<TextView
android:id="#android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</FrameLayout>
I saved it in a file /res/layout/list_view_item.xml Do not forget setting this layout in your adapter:
final ArrayAdapter<String> adapter = new ArrayAdapter(this, R.layout.list_view_item, android.R.id.text1, listOfThings);
Clearing selection
After that your rows will reflect selected state when they are clicked, and you can easily clear the selected state of your ListView by calling clearChoices() and consequence requestLayout() to ask the ListView to redraw itself.
One little comment here that if you want unselect the item when user start typing, but not when he actually clicks the return (done) button, you need to use a TextWatcher callback instead:
mEditText.addTextChangedListener(new TextWatcher(){
#Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
#Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
if (mListView.getCheckedItemCount() > 0) {
mListView.clearChoices();
mListView.requestLayout();
}
}
#Override
public void afterTextChanged(Editable s) {}
});
Hopefully, it helped.

I have a good solution to do that. Add EditText to your layout which contains on your ListView as this layout:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:focusable="true"
android:focusableInTouchMode="true"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ListView
android:id="#+id/list_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:choiceMode="singleChoice"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Comment"
android:layout_below="#id/list_view"
android:id="#+id/editText"
android:nextFocusUp="#id/editText"
android:nextFocusLeft="#id/editText"/>
</RelativeLayout>
Then initialize Boolean variable to check whether editText if focused or not for example use this : boolean canBeSelected = true;
Then after setting adapter use this code:
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
if (canBeSelected) {
listView.setSelector(R.drawable.background);
listView.setSelected(true);
listView.setSelection(i);
} else {
if (!editText.isFocused()){
canBeSelected = true;
listView.setSelector(R.drawable.background);
listView.setSelected(true);
listView.setSelection(i);
}
}
}
});
editText.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent motionEvent) {
canBeSelected = false;
Drawable transparentDrawable = new ColorDrawable(Color.TRANSPARENT);
listView.setSelector(transparentDrawable);
listView.clearChoices();
listView.setSelected(false);
return false;
}
});
editText.addTextChangedListener(new TextWatcher() {
#Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
if (editText.isFocused()){
Drawable transparentDrawable = new ColorDrawable(Color.TRANSPARENT);
listView.setSelector(transparentDrawable);
listView.clearChoices();
listView.setSelected(false);
canBeSelected = false;
}
}
#Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
Drawable transparentDrawable = new ColorDrawable(Color.TRANSPARENT);
listView.setSelector(transparentDrawable);
listView.clearChoices();
listView.setSelected(false);
canBeSelected = false;
}
#Override
public void afterTextChanged(Editable editable) {
if (editText.isFocused()) {
Drawable transparentDrawable = new ColorDrawable(Color.TRANSPARENT);
listView.setSelector(transparentDrawable);
listView.clearChoices();
listView.setSelected(false);
canBeSelected = false;
}
}
});
}
Hope it works with you :)

Re-setting the adapter in the edittext listener worked for me:
editText.addTextChangedListener(new TextWatcher() {
#Override
public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
}
#Override
public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
listview.clearChoices();
listview.setAdapter(adapter);
Toast.makeText(getApplicationContext(),"Typing" + listview.getSelectedItemPosition(), Toast.LENGTH_SHORT).show();
}
#Override
public void afterTextChanged(Editable editable) {
}
});
I put the selected index in a toast to check if the item was correctly deselected.
Hope this works!!

Just call clear when you make the request for the second data set:
arrayAdapter!!.clear()
You load your first data set
The user select one elements,
This action highlight your item
For any reason you launch the reload of your data set (because edittext's value changed),
at this moment call, clear() on your adapter.
Then you retrieved your dataset, you send it to the arrayAdapter and
No one is selected .
This is because when you clear, it also clear the selected flag