In short I want a preview similar to Google Plays, where you can slide up and the top image/video preview fades back and the rest of the view is moved up.
I've got a view that I want to be hiden like the video in this example, the action bar can remain stationary at all times, but I need the bottom part to be dragable.
I can't seem to find out which layout that is, or how it is done, all I managed to find were unrelated such as ViewPager. My current min sdk version is 18, the compile version is 21.
The following is the code I used in the app I am working
You will have to use the OnScrollChanged function in your ScrollView. ActionBar doesn't let you set the opacity , so set a background drawable on the actionbar and you can change its opacity based on the amount of scroll in the scrollview. I have given an example workflow
The function sets gives the appropriate alpha for the view locationImage based on its position WRT window .
this.getScrollY() gives you how much the scrollView has scrolled
public void OnScrollChanged(int l, int t, int oldl, int oldt) {
// Code ...
locationImage.setAlpha(getAlphaForView(locationImageInitialLocation- this.getScrollY()));
}
private float getAlphaForView(int position) {
int diff = 0;
float minAlpha = 0.4f, maxAlpha = 1.f;
float alpha = minAlpha; // min alpha
if (position > screenHeight)
alpha = minAlpha;
else if (position + locationImageHeight < screenHeight)
alpha = maxAlpha;
else {
diff = screenHeight - position;
alpha += ((diff * 1f) / locationImageHeight)* (maxAlpha - minAlpha); // 1f and 0.4f are maximum and min
// alpha
// this will return a number betn 0f and 0.6f
}
// System.out.println(alpha+" "+screenHeight +" "+locationImageInitialLocation+" "+position+" "+diff);
return alpha;
}
You can download an example working sample at https://github.com/ramanadv/fadingActionBar
Credit: CommandSpace
Related
Task is to create Player which contains group of images & videos and play with frames as Player-Controller. See the Below image
Center part is the CustomView which render image/video at the runtime.
Player-Controller is the recylerview which contains frame of each image/video.
Problem - I want to get the Horizontal-Scroll-Pixel on recyclerview scroll
private float computeHorizontalScrollOffset() {
int xOffset = rvHootFrame.computeHorizontalScrollOffset();
int range = rvHootFrame.computeHorizontalScrollRange();
int extent = rvHootFrame.computeHorizontalScrollExtent();
float percentage = (xOffset / (float)(range - extent));
float seekto = percentage * TOTAL_VIDEO_IN_PX;
Log.d(TAG, "computeHorizontalScrollOffset: (xOffset,range,extent,percentage,seekto) = ("+xOffset+", "+range+", "+extent+", "+(percentage*100)+"%, "+seekto+")");
return seekto;
}
See the above screenshot
I Constantly scroll the recyclerview, but at random scroll it give unproper scrolloffset value (see the highlighted log)
Any Help Guys..
After few hours of trying I'm looking for some hints on how to add snap-scroll mechanism to MPAndroid. Basically I want the 5 visible bars to align so they are fully visible and centered. I now imported the library source code because it looks like there's no other way to change the code in computeScroll (BarLineChartTouchListener).
Edit:
To clarify - I'm showing around 20 bars but chart is zoomed so user can scroll horizontally. What bothers me it is not getting aligned automatically so first visible bar might be clipped in half. I'm looking for snapping effect where it will round the position to the nearest multiplication of the bar width, leaving 5 fully visible bars.
I ended up adding the following function in BarLineChartBase.java. I know it's far from elegant, but seems to do the job. It's limited to targetApi > 11, because of the ValueAnimator. For lower API (which I don't cater for) you might need to have a look at nineoldandroids or some other animation loop technique.
#TargetApi(Build.VERSION_CODES.HONEYCOMB)
public void alignX() {
int count = this.getValueCount();
int xIndex = this.getLowestVisibleXIndex() + Math.round( (this.getHighestVisibleXIndex() - this.getLowestVisibleXIndex()) / 2.0f );
float xsInView = this.getXAxis().getValues().size() / this.getViewPortHandler().getScaleX();
Transformer mTrans = this.getTransformer(YAxis.AxisDependency.LEFT);
float[] pts = new float[] { xIndex - xsInView / 2f, 0 };
mTrans.pointValuesToPixel(pts);
final Matrix save = new Matrix();
save.set(this.getViewPortHandler().getMatrixTouch());
final float x = pts[0] - this.getViewPortHandler().offsetLeft();
final int frames = 20;
ValueAnimator valueAnimator = new ValueAnimator().ofInt(0, frames);
valueAnimator.setDuration(500);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
int prev = -1;
#Override
public void onAnimationUpdate(ValueAnimator animation) {
if( (int) animation.getAnimatedValue() > prev ) {
save.postTranslate( -x / (float)frames, 0);
BarLineChartBase.this.getViewPortHandler().refresh(save, BarLineChartBase.this, true);
}
prev = (int) animation.getAnimatedValue();
}
});
valueAnimator.start();
}
I trigger it at the end of computeScroll function in BarLineChartTouchListener.
I kept names of variables as I copied code from functions like MoveViewJob, ViewPortHandler etc. Since it's only aligning in x axis - I removed Y axis calculations and used zeros instead. Any optimizations welcome, especially from the author #PhilippJahoda.
I have implemented the MuPDf in android to open,view,search,setting bookmarks etc for a PDF. Now i want the animation effect of horizontal flip i.e. similar to be like used in the FlipBoard Application in horizontal manner.
I also need to know that how can i highlight the Search Text. I am using Librelio's code
I have gone through the links Like:
Link 1
Please help.
I also need to know that how can i highlight the Search Text.
PageView.java of MuPDF:
private static final int HIGHLIGHT_COLOR = 0x802572AC; //adjust the color
...//some code of PageView.java
public void setPage(int page, PointF size) {
...//code of PageView.setPage(int page, PointF size)
// this is the part where the hightlighting happens
if (!mIsBlank && mSearchBoxes != null) {
paint.setColor(HIGHLIGHT_COLOR);
for (RectF rect : mSearchBoxes)
canvas.drawRect(rect.left*scale, rect.top*scale,
rect.right*scale, rect.bottom*scale, paint);
// you can customize it, e.g.
// int margin = 5
//canvas.drawRect((rect.left - margin) * scale, (rect.top - margin) * scale,
//(rect.right + margin) * scale, (rect.bottom + margin) * scale, paint);
}
}
to start a search, just invoke:
new SearchTask(context, mupdfCore).go("searchText", 1, 0, -1);
I am trying to build my own grid view functions - extending on the GridView.
The only thing I cannot solve is how to get the current scroll position of the GridView.
getScrollY() does always return 0, and the onScrollListener's parameters are just a range of visible child views, not the actual scroll position.
This does not seem very difficult, but I just can't find a solution in the web.
Anybody here who have an idea?
I did not find any good solution,
but this one is at least able to maintain the scroll position kind of pixel-perfectly:
int offset = (int)(<your vertical spacing in dp> * getResources().getDisplayMetrics().density);
int index = mGrid.getFirstVisiblePosition();
final View first = container.getChildAt(0);
if (null != first) {
offset -= first.getTop();
}
// Destroy the position through rotation or whatever here!
mGrid.setSelection(index);
mGrid.scrollBy(0, offset);
By that you can not get an absolute scroll position, but a visible item + displacement pair.
NOTES:
This is meant for API 8+.
You can get with mGrid.getVerticalSpacing() in API 16+.
You can use mGrid.smoothScrollToPositionFromTop(index, offset) in API 11+ instead of the last two lines.
Hope that helps and gives you an idea.
On Gingerbread, GridView getScrollY() works in some situations, and in some doesn't. Here is an alternative based on the first answer. The row height and the number of columns have to be known (and all rows must have equal height):
public int getGridScrollY()
{
int pos, itemY = 0;
View view;
pos = getFirstVisiblePosition();
view = getChildAt(0);
if(view != null)
itemY = view.getTop();
return YFromPos(pos) - itemY;
}
private int YFromPos(int pos)
{
int row = pos / m_numColumns;
if(pos - row * m_numColumns > 0)
++row;
return row * m_rowHeight;
}
The first answer also gives a good clue on how to pixel-scroll a GridView. Here is a generalized solution, which will scroll a GridView equivalent to scrollTo(0, scrollY):
public void scrollGridToY(int scrollY)
{
int row, off, oldOff, oldY, item;
// calc old offset:
oldY = getScrollY(); // getGridScrollY() will not work here
row = oldY / m_rowHeight;
oldOff = oldY - row * m_rowHeight;
// calc new offset and item:
row = scrollY / m_rowHeight;
off = scrollY - row * m_rowHeight;
item = row * m_numColumns;
setSelection(item);
scrollBy(0, off - oldOff);
}
The functions are implemented inside a subclassed GridView, but they can be easily recoded as external.
I am trying to allow the user to drag and drop and image from on position to another. The screen layout is as follows:
1 2 3
4 5 6
7 8 9
I want the user to grab image 2, 4, 6, or 8 and drag it to image 5. Upon dragging to image 5 I want to load up a fragment. The user can only drag the image in a straight line from it's current position to 5's position. ie image 2 and only drag down and only until it is overtop of image 5, image 4 can only drag right until overtop of 5, etc.
Any insight on how to do this is greatly appreciated.
Thanks,
DMan
So I figured out a way to get it to work. Pretty hacky but I basically use the image positions and transition it via a margin in the direct that I want from it's center until it reaches the desired position.
I created a temp image (mTempImage) and hide my main image because the image had parameters set in the layout that forced it to stay above a specific item in the layout and wouldnt let it margin less than that items height.
Here is a sample from my onTouchListener
int eventX = (int)event.getX();
int eventY = (int)event.getY();
int movingViewHeight = view.getHeight();
int movingViewWidth = view.getWidth();
int destinationTileTop = mTileHere.getTop();
int destinationTileLeft = mTileHere.getLeft();
// Transparent 'Tile Here' image (1)
// Transitional 'Tile Here' image (0 - 1)
// Opaque 'Tile Here' image (0)
float alphaMultiplier = 0;
switch(view.getId()) {
case R.id.item_position_2:
// Only allow sliding down from center of object (positive eventY)
if (eventY > movingViewHeight / 2) {
// Calculate the amount that the image has moved from it's center point
int posFromImgCenter = (eventY - movingViewHeight / 2);
// Check if the image has reached the center point and stop it's motion any farther
if (posFromImgCenter >= destinationTileTop) {
params.setMargins(view.getLeft(), destinationTileTop, 0, 0);
alphaMultiplier = 1;
}
// Slide the image with the positioning of the persons finger
else {
params.setMargins(view.getLeft(), posFromImgCenter, 0, 0);
alphaMultiplier = ((float)posFromImgCenter / (float)destinationTileTop);
}
}
// Attempting to slide in an invalid direction leave the image where it is
else
params.setMargins(view.getLeft(), view.getTop(), 0, 0);
... MORE CODE HERE FOR OTHER ITEM POSITIONS
// AFTER SWITCH STATEMENT COMPLETE UPDATE VIEW ITEMS ACCORDINGLY
// default 0 if not set with valid movement
mTileHere.setAlpha((int)(255 - (255 * alphaMultiplier)));
mTempImage.setLayoutParams(params);
mTempImage.invalidate();
Thanks,
DMan