How to hide/show view when scrolling up/down? - java

How to hide/show view when scrolling up/down android like Foodpanda app
I want to hide/show view (linear or relative layout) when ScrollView is up/down like this above gif.
But my app I do not use Recyclerview or list view (just textview).
How can I create it?
Thanks!

Add scroll listener to the RecylerView
If the user is scrolling down - then start translation animation UPWARDS
If the user is scrolling up - then start translation animation DOWNWARDS
Anim translation UPWARDS:- (trans_upwards.xml)
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator"
android:fillAfter="true">
<translate
android:fromYDelta="0%p"
android:toYDelta="100%p"
android:duration="300"
/>
</set>
Anim translation DOWNWARDS:-(trans_downwards.xml)
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator"
android:fillAfter="true">
<translate
android:fromYDelta="100%p"
android:toYDelta="0%p"
android:duration="300"
/>
</set>
Add scroll listener to recyclerView (and also do a checking)
boolean check_ScrollingUp = false;
mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
#Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
if (dy > 0) {
// Scrolling up
if(check_ScrollingUp)
{
YourView.startAnimation(AnimationUtils.loadAnimation(context,R.anim.trans_downwards));
check_ScrollingUp = false;
}
} else {
// User scrolls down
if(!check_ScrollingUp )
{
YourView
.startAnimation(AnimationUtils
.loadAnimation(context,R.anim.trans_upwards));
check_ScrollingUp = true;
}
}
}
#Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
}
});

Related

Android GridView selector not working. Also how to get gridlines for specific columns in GridView?

I am building a Sudoku app on android. I want to populate the screen with 81 textViews. I am using a GridView for that. Some how my selector is not working. I have defined two xmls for background of text view. One for selected and unselected. I have a selector xml which I have called in the Gridview xml. But my text views are not selectable when i click on them.
Here are my xmls:
selected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#ffffff" />
<stroke android:width="4dp" android:color="#4f7df2"/>
</shape>
unselected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#ffffff" />
<stroke android:width="0.5dp" android:color="#9C7F7F"/>
</shape>
selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/selected"
android:state_selected="true"/>
<item android:drawable="#drawable/unselected"/>
</selector>
Also I want to further divide this into 9 grids. I want to divide it using grid lines so its evident to the user which grid he is in. How do I achieve that goal?
Here is my SudokuAdapter class
public class SudokuAdapter extends BaseAdapter {
private Context context;
public SudokuAdapter(Context context) {
this.context = context;
}
#Override
public int getCount() {
return 81;
}
#Override
public Object getItem(int position) {
return null;
}
#Override
public long getItemId(int position) {
return 0;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
TextView textView;
if (convertView == null) {
// if it's not recycled, initialize some attributes
textView = new TextView(context);
textView.setBackground(context.getDrawable(R.drawable.unselected));
textView.didTouchFocusSelect();
textView.requestFocus();
textView.setLayoutParams(new GridView.LayoutParams(60, 60));
} else {
textView = (TextView) convertView;
}
return textView;
}
}
I tried removing setBackground from above, then the selector working only for selecting the textview. I want the default background if not selected to be unselected.
Here is my activity:
public class TestActivity extends Activity {
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.sudoku_grid_layout);
GridView gridView = (GridView) findViewById(R.id.sudoku_grid);
gridView.setAdapter(new SudokuAdapter(this));
}
}
Here is my xml:
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/sudoku_grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="9"
android:listSelector="#drawable/selector"
android:gravity="center"
/>
You don't even have to use an adapter for making it selectable.Your dataset is not changing. Just use a table layout and loop through the cells.
To make a textview selectable, use this.
textView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
textView.setSelected(true);
}
}
You can do this by
textView.setOnClickClickListener(new View.OnClickListener() {
private boolean stateChanged;
public void onClick(View view) {
if(stateChanged) {
// reset background to default;
textView.setBackgroundDrawable(circleOffDrawable);
} else {
textView.setBackgroundDrawable(circleOnDrawable);
}
stateChanged = !stateChanged;
}
});
You have to maintain the state of selected or if not selected
And also in your adapter change the line of setBackground
textView.setBackground(context.getDrawable(R.drawable.selector));
As selector has both the properties so it will change it automatically for you.

Change recyclerview item background when swiped

Hi i am showing vertical list using recycler view and i am using a gradient background for recycler view.I am deleting items in recycler view when they are swiped left or right using ItemTouchHelper.
ItemTouchHelper.SimpleCallback simpleCallback = new ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.LEFT|ItemTouchHelper.RIGHT) {
#Override
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
return false;
}
#Override
public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
mRecyclerAdapter.removeStock(viewHolder.getAdapterPosition());
}
#Override
public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);
if(actionState!=ItemTouchHelper.ACTION_STATE_IDLE){
viewHolder.itemView.setBackgroundColor(Color.LTGRAY);
}
}
};
ItemTouchHelper itemTouchHelper = new ItemTouchHelper(simpleCallback);
itemTouchHelper.attachToRecyclerView(recyclerView);
Here i am changing recycler view item background to light grey when item is swiped but i want the original background back when recycler view item goes back to idle state i.e i want that gradient background back.
Recylerview xml file:
<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="#drawable/gradient_background"
tools:context=".ui.StockFragment"
tools:showIn="#layout/activity_main">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:scrollbars="none"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</RelativeLayout>
Drawable file:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<gradient
android:type="linear"
android:startColor="#FF18181F"
android:endColor="#FF27354D"
android:angle="90"/>
</shape>
Perhaps you can try inside of onSelectedChanged(). Alternatively, perhaps you can override clearView() and do the change there after calling the superclass method.
EDIT
Having read the documentation more, I now think onSelectedChanged() is the correct place to change the background both for when the item starts swiping and when it returns to idle. Check that the viewHolder is not null and then check the actionState for what to change the background to.
I think onChildDraw() is not the right place to do this because it is already in the drawing phase and changing the view's background there will probably cause another re-draw.

Recyclerview animation

The problem is when I scroll up the recyclerview it overlapped. Should I disable the animation when I scroll? how?
Animation code inside my viewholder:
int lastPosition = -1;
Animation animation = AnimationUtils.loadAnimation(HomeActivity.this,
(position > lastPosition) ? R.anim.up_from_bottom: R.anim.down_from_top);
holder.itemView.startAnimation(animation);
lastPosition = position;
anim : up from button
<translate
android:fromXDelta="0%" android:toXDelta="0%"
android:fromYDelta="100%" android:toYDelta="0%"
android:duration="400" />
anim: down from bottom
<translate
android:fromXDelta="0%" android:toXDelta="0%"
android:fromYDelta="-100%" android:toYDelta="0%"
android:duration="400" />

Slide in (over) activity

Currently I'm trying to implement something in my app where I really don't know where to start.
Have a look at this little image:
You can find the app in play store here: https://play.google.com/store/apps/details?id=com.imano.euro2012.row
In my app, I have a listview and when i tap on an item I want to slide in the black activity in to about 3/4. In that activity I want to have some llistview item specific options.
Any one knows how to solve this?
Solution:
Thanks to Imran-Khan I got it working.
But I think this code is not perfect. I'm not sure if the width and height calculation in the first half of the showPopup() method is correct. And in my solution the popup has on the bottom and on the right a little margin. I don't know right now why this happens. Maybe someone can help...
Here is what I did so far:
First I added the method showpopup(long selectedItem) to my listview:
lv_timer.setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parentView, View childView, int position, long id) {
showPopup(id);
}
});
and the method itself:
private void showPopup(long selectedItem) {
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;
int popupWidth = (width / 4) * 3;
int popupHeight = height;
LinearLayout viewGroup = (LinearLayout) findViewById(R.id.ll_timer_prop);
LayoutInflater layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View layout = layoutInflater.inflate(R.layout.timer_properties, viewGroup);
final PopupWindow popup = new PopupWindow(this);
popup.setContentView(layout);
popup.setWidth(popupWidth);
popup.setHeight(popupHeight);
popup.setFocusable(true);
popup.showAtLocation(layout, Gravity.NO_GRAVITY, width - (width / 4 * 3), 0);
TextView tv_item = (TextView) layout.findViewById(R.id.tv_item);
tv_item.setText("Clicked Item ID: " + selectedItem);
}
This is working fine for me.
for the slide in part I've found this thread: PopupWindow animation not working
I added
popup.setAnimationStyle(R.style.AnimationPopup);
before the showAtLocation() call, created a res/anim directory an created two XML files in it: popup_show.xml and popup_hide.xml
popup_show.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:fromXScale="0.0" android:toXScale="1.0"
android:fromYScale="1.0" android:toYScale="1.0"
android:pivotX="100%" android:pivotY="0%"
android:duration="#android:integer/config_shortAnimTime"
/>
<alpha
android:interpolator="#android:anim/decelerate_interpolator"
android:fromAlpha="0.0" android:toAlpha="1.0"
android:duration="#android:integer/config_shortAnimTime"
/>
</set>
popup_hide.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:fromXScale="1.0" android:toXScale="0.0"
android:fromYScale="1.0" android:toYScale="1.0"
android:pivotX="100%" android:pivotY="0%"
android:duration="#android:integer/config_shortAnimTime"
/>
<alpha
android:interpolator="#android:anim/decelerate_interpolator"
android:fromAlpha="1.0" android:toAlpha="0.0"
android:duration="#android:integer/config_shortAnimTime"
/>
</set>
You can create this view using custom PopupWindow
see this tutorial for Creating Custom PopupWindow
How to create popups in Android
You can use QuickAction For such behaviour, Like shown on third screen
Edit
Sorry I have not paid attention for the fact that you want a sliding from right to left effect, But I think you can try to customise slidindrawer in Android API to make slide from right to left.
Funny, I'm actually looking at the same problem right now.
I've found this topic:
Android Facebook style slide
Some nice examples in there.

Explicit animations for setAnimationStyle(), what are my choices?

I would like to try out different animation styles for a popup window using setAnimationStyle(), but I am struggling to understand the documentation.
developer.android.com, says: "animation style to use when the popup appears and disappears. Set to -1 for the default animation, 0 for no animation, or a resource identifier for an explicit animation."
It does not give any examples, or tell me what choices of resource are available. I suspect the best animation for my purposes will be sliding in from the right... does that exist as an option? Are these things I can select from a list or do I have to somehow create my own?
EDIT: My current code for making my popup window is something like this (simplified):
public void completed_dialog()
{
runOnUiThread(new Runnable()
{
public void run()
{
View layout = inflater.inflate(R.layout.endofgame, null, false);
Button b1 = (Button) layout.findViewById(R.id.pu_menu);
Button b2 = (Button) layout.findViewById(R.id.pu_repeat);
Button b3 = (Button) layout.findViewById(R.id.pu_next);
b1.setBackgroundResource(R.drawable.custom_menu_but);
b2.setBackgroundResource(R.drawable.custom_repeat_but);
b3.setBackgroundResource(R.drawable.custom_next_but);
b1.setOnClickListener(menu_button_click_listener);
b2.setOnClickListener(repeat_button_click_listener);
b3.setOnClickListener(next_button_click_listener);
final PopupWindow pw = new PopupWindow(layout, canvas_width,
canvas_width /2, true);
pw.setAnimationStyle(android.R.style.Animation_Dialog);
pw.showAtLocation(game_frame_layout, Gravity.CENTER, 0, 0);
}
}
}
I have now put the following in a file res/anim/test.xml :
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:fromXScale="0.3" android:toXScale="1.0"
android:fromYScale="0.3" android:toYScale="1.0"
android:pivotX="0%" android:pivotY="0%"
android:duration="#android:integer/config_shortAnimTime"
/>
<alpha
android:interpolator="#android:anim/decelerate_interpolator"
android:fromAlpha="0.0" android:toAlpha="1.0"
android:duration="#android:integer/config_shortAnimTime"
/>
</set>
The original code with pw.setAnimationStyle(android.R.style.Animation_Dialog); worked fine, in as much as the dialog appeared with the standard animation - but if I swapped that line with pw.setAnimationStyle(R.anim.test); there is no animation. I have no idea why.
this is working example of setAnimationStyle() on my end:
res/anim/in.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/decelerate_interpolator">
<translate
android:fromYDelta="854"
android:toYDelta="0"
android:duration="1000"/>
</set>
res/anim/out.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:interpolator="#android:anim/decelerate_interpolator"
android:fromYDelta="0"
android:toYDelta="854"
android:duration="10000"
/>
</set>
layout/main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/layout"
>
<Button
android:id="#+id/btn_show"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="show"
/>
</RelativeLayout >
layout/popup.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#cccccc"
>
<Button
android:id="#+id/btn_dismiss"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="dismiss"/>
</LinearLayout>
values/styles.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="PopupAnimation" parent="android:Animation" mce_bogus="1">
<item name="android:windowEnterAnimation">#anim/in</item>
<item name="android:windowExitAnimation">#anim/out</item>
</style>
</resources>
values/strings.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, MainActivity!</string>
<string name="app_name">Popupwindow</string>
</resources>
MainActivity.java :
public class MainActivity extends Activity {
/** Called when the activity is first created. */
boolean flag =false;
PopupWindow popupWindow;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
init();
}
public void init() {
Button btn_show = (Button) findViewById(R.id.btn_show);
LayoutInflater inflater = LayoutInflater.from(this);
View layout = inflater.inflate(R.layout.popup, null);
popupWindow =new PopupWindow(layout, LayoutParams.FILL_PARENT,
LayoutParams.FILL_PARENT);
Button btn_dismiss = (Button) layout.findViewById(R.id.btn_dismiss);
btn_dismiss.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
openMenu();
}
});
btn_show.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
openMenu();
}
});
}
public void btn_showOnClicked() {
openMenu();
}
public void btn_dismissOnClicked() {
openMenu();
}
public void openMenu() {
if (!flag) {
popupWindow.setAnimationStyle(R.style.PopupAnimation);
popupWindow.showAtLocation(findViewById(R.id.btn_show), Gravity.NO_GRAVITY, 0, 0);
popupWindow.setFocusable(true);
popupWindow.update();
flag =true;
} else {
popupWindow.dismiss();
popupWindow.setFocusable(false);
flag =false;
}
}
}
and in your code just add your anim file to style as:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="test" parent="android:Animation" mce_bogus="1">
<item name="android:windowEnterAnimation">#anim/test</item>
</style>
</resources>
and in code:
pw.setAnimationStyle(android.R.style.test);
Thanks & Happy Coding!!!
You can see the options in the documentation of R.style. But there aren't many though. If you want more than that you will need to create it yourself. See basic guide here.
A few more examples of custom made animations you may find at the simple-quickactions google code site.
As per your comment, I think you should specify the id of your style as R.style.Animation_test.

Categories

Resources