So this is not a tecnical question with code but more on some thoughts. I am new to android developing and because of that I am not completely familiar with a lot of what it has to offer.
I have a list of items on the screen and you can scroll up and down to view the different items.
My issue came up when I decided to have the items be able to slide left and right to reveal a settings like panal with a few optons below them(each item has its own settings below it, not a setting screen for all items kind of deal). I looked around for different ways to do this but cant seem to find one that works. What I am thinking so far is to have a HorizonalScrollView with my item in it with the setting menu to the left or right off the screen, but when I put my text area in the HorizonalScrollView, it only takes up half the screen, so I can fit two side by side, not what I wanted and the end result wont be what I imagined. I really would like a solution that allows for the setting to be under the item, so when you push it out of the way it reveals the settings.
Is there a better way or should I just continue trying to make my HorizonalScrollView work, any guides or thought on how I could go about this would be greatly appreciated.
Went though my apps to see if I could find one that has something similar, gmail app has it. Here is a link to an image that gives you an idea, after you slide the item to the side it brings up an undo or archive buttons in the place of the item as if they were hiding under the list item you swiped away
it's quite an interesting topic this question. And be prepared to do a certain amount of custo stuff.
First of all, drop the HorizonalScrollView, I don't think it will help you. The layout of each item should be something like this (pseudo-code, you can build the XML yourself =] ):
FrameLayout
RelativeLayout id:topContent background:someSolidColor
// inside this RelativeLayout, the stuff that is visible on the ListView
RelativeLayout id:bottomContent
// inside this RelativeLayout, the stuff that is behind the content
/FrameLayout
that way you will be literally putting one thing on top of the other. Also note that the topContent have a background with a solid color. If you do not specify any background, both RelativeLayouts will be visible. Also note that I used RelativeLayout, just because I like them, and I like their flexibility, but this will depend on the content of your list view and your settings.
And now is when things get fun, you'll need a GestureDetector to detect the finger sliding and you'll use that value to generate a margin offset on the id:topContent.
You can create a TouchListener like this:
public class MySlideListener extends View.OnTouchListener{
private View v;
private GestureDetector gestureDetector;
public MySlideListener (View v){
this.v = v;
gestureDetector = new GestureDetector(v.getContext(), myGestureListener);
}
public boolean onTouch (View v, MotionEvent event){
return gestureDetector.onTouchEvent(event);
}
private SimpleOnGestureListener myGestureListener = new SimpleOnGestureListener(){
#Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY){
// now here we make the view scroll
MarginLayoutParams lp = (MarginLayoutParams) view.getLayoutParams();
lp.leftMargin = distanceX;
lp.rightMargin = -distanceX;
// You might need to call view.requestLayout();
// but first give it a try without it
// This part of the method for processing the horizontal
// offset can (and should) be further developed to add some
// 'snap-in' or transparency functionality to make the whole
// concept work better.
// But this code should give you a proof of concept on how to deal with stuff.
// The important part is that now you have a call back that have access
// to the view during onScroll.
// Also might be necessary to enable/disable the bottomContent view
// in order for it to be not clickable whilst not visible.
return true;
}
}
}
and then set a new of those listeners for each topContent of your ListView (probably inside the getView from the adapter) with topContentView.setOnTouchListener(new MySlideListener(topContentView));
Please keep in mind that I typed all this code by heart and is 100% untested!
edit:
The above code is the correct direction, but it's a 100% untested thing.
Now the code below, I've just compiled, tested, and this code works!
This class is also a bit more efficient as you can create only one and apply the same instance to all the items created on your adapter. You can see it's getting the view to scroll on the touch event.
public class MySlideListener implements View.OnTouchListener {
private View view;
private ListView listView;
private GestureDetector gestureDetector;
public MySlideListener(ListView lv) {
listView = lv;
gestureDetector = new GestureDetector(lv.getContext(), myGestureListener);
}
#Override
public boolean onTouch(View v, MotionEvent event) {
view = v;
gestureDetector.onTouchEvent(event);
return true;
}
private SimpleOnGestureListener myGestureListener = new SimpleOnGestureListener() {
private int origLeft, origRight;
public boolean onDown(MotionEvent e) {
MarginLayoutParams lp = (MarginLayoutParams) view.getLayoutParams();
origLeft = lp.leftMargin;
origRight = lp.rightMargin;
return true;
};
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
listView.requestDisallowInterceptTouchEvent(true);
MarginLayoutParams lp = (MarginLayoutParams) view.getLayoutParams();
lp.leftMargin = (int) (origLeft + (e2.getRawX() - e1.getRawX()));
lp.rightMargin = (int) (origRight - (e2.getRawX() - e1.getRawX()));
view.requestLayout();
return true;
};
};
}
Related
I have a custom view which is a constraint layout and a couple of TextView and EditViews.
On my activity I want to show and hide the custom view based on a Switch being on/off. The same custom view is used on multiple Switches for different parts of capturing some data.
The logic in the switch to make the relevant custom VISIBLE or GONE view works without an issue when I just use the CustomViewName.setVisibility(View.VISIBLE) and CustomViewName.setVisibility(View.GONE) - instead of the ShowOrHideView routine below.
I'm trying to make it look better so instead of the custom view just appearing or disappearing it appears by sliding up/down from the switch (height from 0 to it's expected height), or disappears (expected height to 0).
Replacing the CustomViewName.setVisibility in the switch with a call to the function below to show or hide depending on the Switch being on/off:
Switch On to show the custom view (ignore the hard coded sizes for the example here)
ShowOrHideView(CustomViewName,0,100);
Switch Off to hide the custom view:
ShowOrHideView(CustomViewName,100,0);
private void ShowOrHideView(View parView, int parCurrentHeight,int parNewHeight) {
ValueAnimator mySlideAnimator = ValueAnimator
.ofInt(parCurrentHeight, parNewHeight)
.setDuration(2000); /// 2000 for debug only
mySlideAnimator.addUpdateListener(animation1 -> {
Integer value = (Integer) animation1.getAnimatedValue();
parView.getLayoutParams().height = value.intValue();
parView.requestLayout();
});
mySlideAnimator.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(#NonNull Animator parAnimator) {
}
#Override
public void onAnimationEnd(#NonNull Animator parAnimator) {
// If zero at the end of the animation then the view is being hidden
if (parView.getLayoutParams().height == 0) {
parView.setVisibility(View.GONE);
}
}
#Override
public void onAnimationCancel(#NonNull Animator parAnimator) {}
#Override
public void onAnimationRepeat(#NonNull Animator parAnimator) {}
});
if (parCurrentHeight == 0){
parView.setVisibility(View.VISIBLE);
}
AnimatorSet myAnimationSet = new AnimatorSet();
myAnimationSet.setInterpolator(new AccelerateDecelerateInterpolator());
myAnimationSet.play(mySlideAnimator);
myAnimationSet.setStartDelay(1000); // Delayed start for debug only
myAnimationSet.start();
}
The hiding of the custom view works OK with it correctly being set to GONE so the space is no longer there.
But when showing the custom view, the height correctly gets set in the animation, but there's an initial "blip" where the whole custom view gets shown before it then appears as height with 0 up to height of 100.
Any ideas how to make the custom view appear with the height getting larger (to make it appear nicely) and avoid the "blip" where it briefly shows the whole view before the animation? In my example I've temporarily put the setStartDelay(1000) to prove to myself the custom view appears fully when view becomes VISIBLE, then when the animation starts the custom view appears as if the height is 0 to 100
Thanks
I'm using a Recycler View to show all the images from the galley or the external storage of a device in a Grid Layout Manager. And I'm using a Radio Button to show if the image is selected or not.
PROBLEM
Whenever I select or deselect a Radio Button from the visible Views in the Recycler View some other Views which are outside the Visible Screen got selected or deselected.
It is like I'm pressing on the same View of the Recycler View, but the images are different.
PROBLEM
well that's because of the recycler view concept of reusing the views instead of creating new views every time you scroll.
you see if you have 100 items you want to show in a recycler view and only 20 of them could appear to the user, recycler view creates only 20 view holder to represent the 20 items, whenever the user scroll recycler view will still have 20 view holder only but will just switch the data stored in this view holders rather than create new view holders.
now to handle selection of your items there's two ways to do this.
the naive way
hold selection in a boolean array inside the recycle view adapter.
whenever the user scrolls, the adapter calls onBindViewHolder to update the visible viewholder with the proper data.
so when onBindViewHolder gets called just set the radio button selection according the boolean array using the position sent in the method call
at the end of your usage to the recycler view you can create a getter method in the adapter to get the selection array list of boolean and pass the data based on it
public class PhotosGalleryAdapter extends RecyclerView.Adapter<PhotosGalleryViewHolder> {
ArrayList<Your_Data_ClassType> data;
ArrayList<Boolean> dataSelected ;
public PhotosGalleryAdapter(ArrayList<Your_Data_ClassType> data) {
this.data = data;
dataSelected = new ArrayList<>(data.size()) ;
}
...
#Override
public void onBindViewHolder(#NonNull PhotosGalleryViewHolder holder, int position) {
...
RadioButton radioButton = holder.getRadioButton()
radioButton.setChecked(dataSelected.get(position));
radioButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
#Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
dataSelected.set(holder.getAbsoluteAdapterPosition() , isChecked) ;
}
});
...
}
}
the other way is to use a selection tracker and it should be the correct way to handle selections in a recycler view.
the problem with this way is it needs a lot of editing to the code and creating new classes to include as parameters in the selection tracker, but in the end you'll find it worth the time you spent on it.
in order to start with this way you need to do the following :
firstly, decide what should be a key (String-Long-Parcelable) so the tracker should use to differentiate between your data , the safest way is either String or Parcelable as I once tried Long and ended up with lots and lots of problems (in your case I will assume it's the photo's uri which will be of type string)
secondly, you need to create two new classes, one that extends ItemDetailsLookup, and the other extends ItemKeyProvider, and should use the key as their generic type (the type that is put between <> )
your two classes should look like this (that you might copy them straight forward)
the one that extends ItemKeyProvider :
public class GalleryItemKeyProvider extends ItemKeyProvider<String>{
PhotosGalleryAdapter adapter ;
/**
* Creates a new provider with the given scope.
*
* #param scope Scope can't be changed at runtime.
*/
public GalleryItemKeyProvider(int scope,PhotosGalleryAdapter m_adapter) {
super(scope);
this.adapter = m_adapter;
}
#Nullable
#Override
public String getKey(int position) {
return adapter.getKey(position);
}
#Override
public int getPosition(#NonNull String key) {
return adapter.getPosition(key);
}
}
the one that extends ItemDetailsLookup :
public class GalleryDetailsLookup extends ItemDetailsLookup<String> {
private final RecyclerView recView ;
public GalleryDetailsLookup(RecyclerView m_recView){
this.recView = m_recView;
}
#Nullable
#Override
public ItemDetails<String> getItemDetails(#NonNull MotionEvent e) {
View view = recView.findChildViewUnder(e.getX(), e.getY());
if (view != null) {
RecyclerView.ViewHolder holder = recView.getChildViewHolder(view);
if (holder instanceof PhotosGalleryViewHolder) {
return ((PhotosGalleryViewHolder) holder).getItemDetails();
}
}
return null;
}
}
thirdly, you should include this new two methods in your adapter to be used by the above classes
public class PhotosGalleryAdapter extends RecyclerView.Adapter<PhotosGalleryViewHolder> {
...
public String getKey(int position) {
return data.get(position).getUri();
}
public int getPosition(String key) {
for (int i = 0; i < data.size(); i++) {
if (data.get(i).getUri() == key) return i;
}
return 0;
}
...
}
forthly (if there's an english word called forthly), you should initialize the tracker with all the above classes that were created before and he will handle the rest, the tracker takes as parameters
a unique selection tracker id (if that will be the only selection tracker you will use then name it anything)
the ItemKeyProvider that we created
the DetailsLookup that we created
a String-Long-Parcelable Storage to store the keys that were selected in (in our case it will be a String Storage)
a Selection predicate, it's responsible to handle the way of selection you want to do, you want it to be able to (select only one item-multiple selection with no limits- based on a weird algorithm like even only or odd only), in my case I will use a default multiple selection one but if you want to alter it with another selection algorithm you should create a new class that extends SelectionPredicates and implement your way of selection, you could also just check the other default ones might be what you're looking for.
anyway, that's how the initialization should look (you should put this code wherever you initialize your recycler view at whether it's in fragment or activity method):
private void initRecycleView() {
...
SelectionTracker<String> tracker = new SelectionTracker.Builder<>("PhotosGallerySelection",
Your_Recycler_View,
new GalleryItemKeyProvider(ItemKeyProvider.SCOPE_MAPPED, photosAdapter),
new GalleryDetailsLookup(Your_Recycler_View),
StorageStrategy.createStringStorage())
.withSelectionPredicate(SelectionPredicates.createSelectAnything())
.build();
...
}
I didn't find a way to let me initialize the adapter with data and then create the tracker inorder to make the viewholders know about their selection or not, so in this case I firstly created the tracker and then made the adapter know about it's data using a setter and notifyDataSetChanged
what I mean by that is after creating the tracker instantly set the tracker and data to the adapter, so the initRecycleView should look like this
private void initRecycleView() {
...
SelectionTracker<String> tracker = new SelectionTracker.Builder<>("PhotosGallerySelection",
Your_Recycler_View,
new GalleryItemKeyProvider(ItemKeyProvider.SCOPE_MAPPED, photosAdapter),
new GalleryDetailsLookup(Your_Recycler_View),
StorageStrategy.createStringStorage())
.withSelectionPredicate(SelectionPredicates.createSelectAnything())
.build();
photosAdapter.setTracker(tracker);
photosAdapter.setData(data);
photosAdapter.notifyDataSetChanged();
...
}
Last but no least, you should handle how the view holders should know if they were selected or not, so you should let the adapter know about the tracker and its data by creating a setter method in it, that's how the adapter should look like in the end :
public class PhotosGalleryAdapter extends RecyclerView.Adapter<PhotosGalleryViewHolder> {
ArrayList<Your_Data_Class> data;
private SelectionTracker<String> tracker;
public PhotosGalleryAdapter() {
data = new ArrayList<>();
}
public ArrayList<Your_Data_Class> getData() {
return data;
}
public void setData(ArrayList<Your_Data_Class> m_data) {
this.data = m_data;
}
#Override
public ScheduleViewHolder onCreateViewHolder(#NonNull ViewGroup parent, int viewType) {
...
}
#Override
public void onBindViewHolder(#NonNull PhotosGalleryViewHolder holder, int position) {
...
boolean isSelected = tracker.isSelected(data.get(i).getUri());
RadioButton radioButton = holder.getRadioButton;
radioButton.setChecked(isSelected);
}
#Override
public int getItemCount() {
return data.size();
}
public String getKey(int position) {
return data.get(position).getUri();
}
public int getPosition(String key) {
for (int i = 0; i < data.size(); i++) {
if (data.get(i).getUri() == key) return i;
}
return 0;
}
public void setTracker(SelectionTracker<String> m_tracker) {
this.tracker = m_tracker;
}
}
(as you may notice if you initialized the adapter with its data through the constructor, when he asks the tracker if there were an item selected or not, it will result in a NullPointerException as at the moment of initializing the adapter you still didn't initialize the tracker)
that way you could keep track of your selection the way google suggests in their documentation (which I honestly don't know why the made it very complicate like that).
if you want to know all the selected item in the end of your application/fragment use, you should call tracker.getSelection() which will return a Selection List for you to iterate on
There's a tiny problem/feature with the tracker that it won't start selecting the first item until you use a long press on it, that happens only in the first item you select, if you do want this feature (start selecting mode by long press) then leave it as it is
incase you don't want it you can make the tracker select a ghost key (any unique string key that means nothing to your data) at the beginning which should later enable the selection mode with a simple click on any photo
tracker.select("");
this also the way to make a default/old selection at the beginning, you could make a for loop and call tracker.select(Key) if you do want the tracker to start with few items being selected
N.B : incase you use the Ghost Key method you should watchout that the selection array that will get returned when you call tracker.getSelection() will also contain this Ghost Key.
at the end if you do have the curiosity of reading about selection tracker in the documentation follow this link
or maybe if you know how to read kotlin follow this two links
implementing-selection-in-recyclerview
a guide to recyclerview selection
I was stuck in the selection problem for days before I figure how to do all that so I hope you find your way through it.
Omar Shawky has covered the solutions.
With my answer I will stress on the reason why someone may face this sort of an issues with recycler views and how to avoid this common issue in the future (avoiding pitfalls).
Reason:
This issue happens because RecyclerView recycles views. So a RecyclerView item's view once inflated can get reused to show another off screen (to be scrolled to) item. This helps reduces re-inflation of views which otherwise can be taxing.
So if the radio button of an item's view is selected, and the same view gets reused to show some other item, then that new item can also have a selected radio button.
Solution:
The simplest solution for such issues is to have an if else logic in your ViewHolder to provide logic for both selected and de-selected cases. We also do not rely on information from radio button itself for initial setup (we do not use radioButton.isSelected() at the time of setup)
e.g code to write inside your ViewHolder class:
private boolean isRadioButtonChecked = false; // ViewHolder class level variable. Default value is unchecked
// Now while binding in your ViewHolder class:
// Setup Radio button (assuming there is just one radio button for a recyclerView item).
// Handle both selected and de-selected cases like below (code can be simplified but elaborating for understanding):
if (isRadioButtonChecked) {
radioButton.setChecked(true);
} else {
radioButton.setChecked(false);
}
radioButton.setOnCheckedChangeListener(
(radioButton, isChecked) -> isRadioButtonChecked = isChecked);
Do not do any of the following while setting up:
private boolean isRadioButtonChecked = false; // class variable
//while binding do not only handle select case. We should handle both cases.
if (isRadioButtonChecked) { // --> Pitfall
radioButton.setChecked(true);
}
radioButton.setOnCheckedChangeListener((radioButton, isChecked) -> isRadioButtonChecked = isChecked);
OR
// During initial setup do not use radio button itself to get information.
if (radioButton.isChecked()) { // --> Pitfall
radioButton.setChecked();
}
original Viewpager2 can scroll left&right to change page.
And I want to add "down to up scroll" to use 'startActivity'
I tried like this...but
Viewpager2 viewpager;
viewpager.getChildAt(0).setonTouchListener(new View.onTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
gestureDetector.onTouchEvent(event);
return true;
}
});
It cannot work original viewpager's left&right scroll.
I want to save original's, and add just another scroll.
How can i do?
#I searched about onInterceptTouchEvent, DispatchTouchEvent...
I cannot find how to use.
you want vertical scroll to start new activity or to scroll through list items?
if you want to scroll through list then use recyclerView,see this - Simple Android RecyclerView example
and for starting new activity or any process on swiping(top to bottom or left to right) see this - Android: How to handle right to left swipe gestures
Can you create different actions for clicking on the same ImageView but different parts? Say I have an ImageView and I want for it to act differently if I click on the top of the ImageView and differently if I click on the middle part of the ImageView . Can I achieve this in android
The best way is to add an OnTouchListener to the view and handle click event by yourself related to the touch coordinate.
But if you need an easy way which I don't suggest because it can lead to performance issue you can add transparent views on top of your ImageView and add different OnClickListener for them.
if you have fixed sections in your imageview you can use a frame layout and add 3(for example) transparent views on your imageview and then set click listeners on those views.
but if you have dynamic sections you can handle it by combining onTouchListener and onClickListener, for example :
// just store the touch X,Y coordinates
View.OnTouchListener touchListener = new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
// save the X,Y coordinates
if (event.getActionMasked() == MotionEvent.ACTION_DOWN) {
lastTouchDownXY[0] = event.getX();
lastTouchDownXY[1] = event.getY();
}
// let the touch event pass on to whoever needs it
return false;
}
};
View.OnClickListener clickListener = new View.OnClickListener() {
#Override
public void onClick(View v) {
// retrieve the stored coordinates
float x = lastTouchDownXY[0];
float y = lastTouchDownXY[1];
// use the coordinates for whatever or check the clickable areas
Log.i("TAG", "onLongClick: x = " + x + ", y = " + y);
}
};
I think the best way for this is that you declare a frameLayout as parent view then you can declare views on your imageView then clicking each view will perform what you want.
I made a list that's loaded with Contact friends and the user can select them by tapping on them. If a person is selected, the listitem's backgorund changes colour, if deselected, the bg colouring goes away.
Problem is, when I call my method on an OnClickListener, it's fine.
When I however call it in a loop to colour already selected friends (e.g. when revisiting the list), it doesn't do the colouring.
The loop that goes through the elements to call colorize if needed:
for (int i = 0; i < adapter.getCount();i++){
ContactFriend cf = (ContactFriend) adapter.getItem(i);
View v = getViewByPosition(i,listView);
colorizeFriendBg(v, cf);
adapter.notifyDataSetChanged();
}
note I do the exact same in the listener and it works fine there.
And the colorizer:
private void colorizeFriendBg(View v, ContactFriend friend){
if(friend.isSelected()){
v.setBackgroundColor(0x993399ff);
}else{
v.setBackgroundColor(0x00000000);
}
v.invalidate();
}
This issue is quite strange and I have no idea what to do in order to make it right. The whole bunch is called from onActivityCreated, if that matters.
Edit:
I debugged it of course and the code runs and should change the colour, not running isn't the issue.
Edit again:
here's the listener implementation:
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
ContactFriend fr = (ContactFriend) adapter.getItem(position);
addToSelected(fr);
//TODO: make it switch some BG colour when clicked. use getViewByPosition.
View v = getViewByPosition(position,listView);
colorizeFriendBg(v,fr);
adapter.notifyDataSetChanged();
}
});
what type of item View are you getting from the Adapter?
that View could / should implement colorize() and color itself;
for example: v.colorize(contact.isSelected()) to switch colors.
or with Android Data-Binding XML (where the viewModel is an instance of Contact):
<data class="com.acme.databinding.ContactViewHolderBinding">
<variable name="viewModel" type="com.acme.model.Contact"/>
</data>
...
android:backgroundColor="#{viewModel.isSelected ? R.color.MAGENTA : R.color.BLACK}"
class Contact just would require a getter and a setter for property isSelected.
one actually can also bind event handlers, which would be an alternate approach.
You need to call invalidate() on your view to make the color changes visible.
invalidate() forces a redraw with the new colors.