Zooming text alone inside an android textview - android

I have a text view with numbers displayed on it. It shows a bill amount value. I would like to have a zoom animation on it, on click. The text view is round shaped and presently zooming zooms the entire circular text view. I used an anim file that uses scaleX and scaleY to zoom. But I just want to zoom the text alone when a user clicks on it. How to zoom text alone inside a textview in android and not the entire textview?

may be you can change textSize property in onClick event of the textView.
void setTextSize (float size) , or this answer may be useful
https://stackoverflow.com/a/20303367/4233036

Related

Android: Zooming EditText Android Issue in translation And Getting Touch event of childView when Placed outside parentView

my question is related to android feature to zoom the parent consisting of multiple child view's.
ZoomView->ParentView->[multiple childViews]
I am working on a Demo project to Zoom the child View and to pan infinitely.Zooming works perfectly as needed.
PROBLEM 1:
But if there is a EditText in the view and i try to zoom on that then below issues are faced by me.
on zooming in the text is blurred
pointing on a text is working fine but translating through the text is
translating very fast as its translation is multiplied by the
scalingFactor
Selecting the text is also having above issue.
Try running the the Demo to understand the issue if not clear from above
I have tried two approaches to Zoom the content of the View but both approaches gave the same issue.
Scaling canvas and transforming the MotionEvent by scaling the MotionEvent by Matrix.class of the Parent Class.
Setting ScaleX and ScaleY of the Parent containing the childViews
hierarchy of my demo project zooming the view(UML Diagram)
Basic problem is placing the cursor at the right position when the view is scaled to some value.
I have already referred to this thread
PROBLEM 2:
if i have a childView which is movable in the parent View then after zooming out if the childView is translated outside the bounds of parentView the events are ceased to capture and the child view becomes untouchable
i have tried using TouchDelegate but i don't know how to expand the parentView touch area .Code reference Thread
scale is 1 the area touch area is equal to screen for parentView and ZoomView
But when scale factor is not equal to one the touch area of parent is lesser(zoomIn) than the ZoomView as displayed
Yellow-parentView Touch Region
Cyan-ZoomView Touch Region
Green-ChildView Touch Region
ScreenShot here
Note:
This is my first Question on StackOverflow So please recommend if some edits are needed.
This the the closest i got to solve above problem's.
PROBLEM 1:
On zooming in the text is blurred
setLayerType(LAYER_TYPE_HARDWARE,null);
set layer type Hardware in the view which has text View. for me i
set it in green square view.
pointing on a text is working fine but translating through the text is translating very fast as its translation is multiplied by the scalingFactor
Selecting the text is also having above issue.
For above two:
This is a bug in android when you scale a view using the scaleX,scaleY api's the EditText get's event based on the current scale value of parent's.But issue is with the Cursor of editText.
The best solution we got is we wrote our own EditTextView (which extend's TextView).As we checked android framework source code we came to know that android use's PopUpWindow to display cursor on screen.
The source of issue is when we use scaleX and scaleY editText get's scaled even't as it's parent is scaled but as cursor is a PopUpWindow and not a child of EditText so event's are not scaled and above issue occur's
So wrote our own EditText if you see the source code EditText code is not very complex and can be written on our own.And to solve the scaling issue of Cursor, we added our own Cursor PopUpWindow and made it Scale aware.
NOTE:
(UPDATE)
Check at demo code here customEditText and CustomCursor.
Run the project set focus pink focus(BY Android) will come ,wait for few seconds then the black cursor will appear that is the custom cursor.
It is a very basic example and we need to add all other edit text Feature's on our own like multi-Select, popUpMenu etc.
PROBLEM 2: if i have a childView which is movable in the parent View then after zooming out if the childView is translated outside the bounds of parentView the events are ceased to capture and the child view becomes untouchable i have tried using TouchDelegate but i don't know how to expand the parentView touch area
This solution is specific to the given problem not a generic one
as there can be multiple solution's for this problem.
In this case 3 view's are there:
Yellow-parentView of green square View
Cyan-parent of yellow View
Green-ChildView non touchable outside parent
My Solution is that i used created a callback from green square view to Yellow parent view. Whenever the translation of green square view ended the callback is triggered and in yellow parent i used below code.
override fun eventEnded() {
setDelegate()
}
fun setDelegate() {
val rect = Rect()
val parent = (this.parent as View)
parent.getHitRect(rect)
val touchDelegate = TouchDelegate(rect, this)
if (View::class.java.isInstance(editorContainer.parent)) {
(editorContainer.parent as View).touchDelegate = touchDelegate
}
}
The above code translate to : when child view translation is ended check the bound's of parent and update the TouchDelegate accordingly.
As the problem i faced was when i scaled(Zoomed) the view then the View's delegate was not updated so for that also solution is same make a callback from zoomView (parent) to yellowView (childView) onScaleEnded call setDelegate().
When scale changes the hitArea also changes but as per delegate nothing is changed so we need to update the rect of TouchDelegate.
Please feel free to discuss in comment section. If someone has a better solution Really eager to know.As we tried many different solution's but nothing else worked.This is the best i found and i am using above code in production and haven't faced any issue till now.
The best approach for translating and scaling EditText is to use scaleX, scaleY, translateX, translateY on this particular EditText instead of parent layout canvas translation.
e.g. in kotlin
editText.scaleX = scaleFactor
editText.scaleY = scaleFactor
editText.translateX = offsetLeft
editText.translateŠ½ = offsetTop
By the way, it is possible to check if touch area and drawing area are the same in android studio using Tools -> Layout Inspector.

How to get only visible text from a EditText

I have an EditText for a code editor running on Android. I'm applying syntax highlighting to the content, it's working well except for large Strings where the EditText scrolls off screen - the syntax highlighting is being applied to the entire Spannable on every key press.
Does anyone know how I'd go about capturing only the text that is visible to the user?
I can only think of nasty hack based on cursor position but that would break when the user scrolls.
Can use the function below to get the visible text offsets. You'd input the raw x,y corners of the edit text, and it will return the nearest text offset (i.e. character position).
EditText et = ;
et.getOffsetForPosition(x, y);
Once you know start / end of the visible text, you set your span accordingly. If you are just changing coloring (i.e. not height / width) then there shouldn't be any circular dependency.

Android ListView fast scroll with sections: section text too long

I am using ListView to implement a timeline. I enabled FastScroll and used SectionIndexer so that user could drag the scrollbar and see the section text displayed.
The problem is all these are built-in UI. The textview that displays the section text is too small for me, I am trying to display 05pm and it's too long for the textview(or other UI?).
Any easier way to resolve this? For instance, a method I can set the font size of the section text or the textview layout?
Thanks!
Looking through the source code for AbsListView, you can find the class that handles the fast scrolling mechanism which ends up being FastScroller. FastScroller actually draws the image drawable and text on the canvas that was provided to the AbsListView like so...
canvas.drawText(mSectionText, (int) (rectF.left + rectF.right) / 2 - hOff, (int) (rectF.bottom + rectF.top) / 2 + mOverlaySize / 4 - descent - vOff, paint);
The code above actually draws the text on top of the bottom image drawable so it does not respect the bounds of the bottom drawable, which is why the text is actually overflowing and not being cut off. As to why this is designed this way? My guess is that the intention of the index feature was to be mainly used for single characters such as A, B, C, etc... and therefore the fast scroll index feature was designed to fit that.
So, to give a definite answer to your question, there's really no way to change the text size or change how the text is being drawn unless you modify AbsListView and FastScroller to suit your need.

How to have a circular TextView

I have been trying to make a circular TextView. Its a circle in which I want to accomodate whole space above a circular bubble as shown in image below.
Kindly see attached image.
In this image, we have a circular bubble with circular text in it.
I have already tried setting oval shape .xml as background of TextView but still no luck.
Edit:
As text length increase. It must reduces in size to fit inside the circle. This is the hardest part to think about.
You need to create a custom view, extending from TextView probably, setting the circle as background image, and calculate the text width / break the lines manually according to the width of the text.
To calculate the width of a string, see How to calculate string font width in pixels?
Some math and calculations is required of course to measure the available space per line; but I think that's the only way, as there's no standard component out there to do it.
To place the text onto the view, use drawText of the Canvas class.

Local Co-ordinate of Image view w.r.t to the root View

I have relative layout as a main View and it has few Image views which are place w.r.t to margin top and margin left. Now I want to check the imageViews opacity or transparent region at the pixel where touch is happened. Say I touched some where 533,240 .. I want to check whether that position is transparent or transculent or opaque.. Since imageview will always be square and i guess there will be part of image will be transparent but it should not be included in onTouch event thats why I aim for this that if i get the position of my touch w.r.t to local co-ordinate of the Imageview then I can give that pixel to the drawable.getTransparentRegion.container(int x , int y )
Explaining further.. .what I am trying to do is I am getting View on click or on touch.. From that view I am getting imageview ....and from that imageview I am trying to get Drawable of that imageview ..I have reached till here ... Now I want to get the touch event position w.r.t to the imageview so I can check it in drawable.getTransparentRegion ? ... I hope you understood
At the end I want to differentiate between the transparent part of the imageView i.e.(not needed part of the Imageview ) and the Transculent part that will be there of the drawable in the imageView...
get coordinates of imageview on window by
public void getLocationInWindow (int[] location),
pass integer array of two size to this method. Invoke this method after layout has been drawn, use location array to get imageview's left and top co-ordinates, add transparent co-ordinates to it, and you will get co-ordinates which can be compared to touchevent co-ordinates.

Categories

Resources