Develop Reference

Android Fragment Animation for custom views

I can't seem to find an answer for my question on google or SO so let me try to explain it properly.
I have A Main Activity, which creates a Custom Fragment. This CustomFragment then contains several Custom "extended" Buttons (views) in which An ObjectAnimator is applied to them.
That ObjectAnimator does not update on the main thread (I'm assuming), even though isRunning() returns true. ObjectAnimator works perfectly fine inside of the CustomFragment, but when using it inside of the Extended Button class, it fails.
I'm thinking I need to be using runOnUiThread() or some other way to get it to run on the proper thread, but I haven't been able to find a good solution.
Here's some psuedocode:
public class TestButton extends Button{
private AnimatorSet as;
public TestButton(Context context, AttributeSet attrs){
super(context, attrs);
init();
}
private void init(){
ObjectAnimator alphaAnimator = ObjectAnimator.ofFloat(this, "alpha", 0.2f, 1.0f);
as = new AnimatorSet();
as.play(alphaAnimator);
as.setDuration(1000);
}
public void startAnimation(){
as.start();
//tried adding invalidate(); here but that didn't seem to fix it either
}
}
public class CustomFragment extends android.support.v4.app.Fragment implements Runnable {
private View root;
private ArrayList<TestButton> buttons;
public View onCreateView(LayoutInflater inflater, ViewGroup container, bundle SavedInstanceState){
root = inflater.inflate(R.layout.fraglayout, container, false);
initButtons();
return view;
}
private void initButtons(){
buttons = new ArrayList<TestButton>();
//Code here to initialize and find the buttons in the layout, this works properly
//so I won't define it here because it is long, the list does contain its members
//
}
private void startTest(View view){
//An actual "Button" controls this, and is called properly
//THE FOLLOWING WORKS PERFECTLY FINE
ObjectAnimator alphaAnimator = ObjectAnimator.ofFloat(view, "alpha", 0.2f, 1.0f);
alphaAnimator.setDuration(1000);
alphaAnimator.start();
//THIS DOES NOT WORK AT ALL, JUST CHANGES THE VIEW ONCE BUT ANIMATION DOESNT 'RUN'
for(TestButton b : buttons){
b.startAnimation();
}
}
#Override
public void run(){
root.postDelayed(this,1000);
}
}
It must be something with the threading, but I'm not sure what it could be.
Any help is appreciated,
Thanks
--- Edit ---
Okay, So I was just messing around with the thread and added a simple boolean to test whether or not to start the animations in the Fragment's Run() function. And it does work for animation, however this doesn't seem like the proper way to do it because I'm gonna have tons of booleans to check so there must be some other way to run a function on a thread, going back to runOnUiThread() But I'm not sure how to use it. This is what I did that works in premise, but isn't proper programming.
private void startTest(View view){
tester = true;
}
#Override
public void run(){
if(tester){
for(TestButton b : buttons)
b.startAnimation();
tester = false;
}
root.postDelayed(this,1000);
}
--- Edit 2 ---
This seems to work, and helped me out. If anyone else needs this in the future.

Following this guide, this seems to work perfectly.
public class TestButton extends Button{
private AnimatorSet as;
private Handler handler;
public TestButton(Context context, AttributeSet attrs){
super(context, attrs);
handler = new Handler(context.getMainLooper());
init();
}
private void init(){
//Does get called properly
ObjectAnimator alphaAnimator = ObjectAnimator.ofFloat(this, "alpha", 0.2f, 1.0f);
as = new AnimatorSet();
as.play(alphaAnimator);
as.setDuration(1000);
}
public void startAnimation(){
runOnUiThread(new Runnable(){
#Override
public void run(){
as.start();
}
});
as.start();
}
private void runOnUiThread(Runnable r){
handler.post(r);
}
}

The setOnClickListener method for each View

I wrote the following code and it works well. But I have other purpose. I want to click only on a view to doing the operations.First, Please see the following image:
MY CODE IS AS FOLLOWS:
public class MainActivity extends Activity {
RelativeLayout relativeLayout;
#Override
protected void onCreate(Bundle bundle)
{ super.onCreate(bundle);
relativeLayout = new RelativeLayout(getApplicationContext());
setContentView(relativeLayout);
A a = new A(this);
relativeLayout.addView(a);
a.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
B b = new B(getApplicationContext());
relativeLayout.addView(b);
}
});
}
}
class A extends View {
Paint paint;
A(Context context) {
super(context);
paint = new Paint();
}
#Override
protected void onDraw(Canvas canvas) {
paint.setAntiAlias(true);
paint.setColor(Color.RED);
canvas.drawRect(20,60,100,150,paint);
}
}
class B extends View {
Paint paint;
B(Context context){
super(context);
paint = new Paint();
}
#Override
protected void onDraw(Canvas canvas){
paint.setAntiAlias(true);
paint.setColor(Color.GREEN);
canvas.drawRect(100,150,200,250,paint);
}
}
when I run the above code I can see the green rectangle after press on the red rectangle. But the problem is that when I press another places on the screen I can do this operations also. I want that only I can see the green rectangle to press on the red rectangle and not in the another places on the screen to doing this operations.

Use onTouch event
a.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getX(0)>=20 && event.getY(0)>=60 && event.getX(0)<=160 && event.getY(0)<=150) {
B b = new B(getApplicationContext());
relativeLayout.addView(b);
}
return true;
}
});

You are defining the red square's parameters but not the parameters of the canvas in which you are drawing. You are creating the view (A) without defining the width and height of it, so it is set to match_parent by default, which means it will take the whole size of your RelativeLayout (the whole screen). So, when you click "outside" the red square you are actually clicking the view (A).
Try to define an specific height and width for the view in which you are drawing, like this.
A a = new A(this);
a.setLayoutParams(new RelativeLayout.LayoutParams(300,300));
Remember that LayoutParams takes pixels as parameters, so you should really convert the dps to px as specified here
Also, setting some background colors to your views (relativeLayout, A) will help you visualize what you are doing.

# nukeforum, your guess helped me very much. I thank all of you. My problem was exactly from the canvas and its size. I added the following operation in my code and solved my problem.
relativeLayout.addView(a,70,70);
For A class, I changed as follows:
canvas.drawRect(10,20,30,40,paint);

how to display ToolTip in android?

I want to display the ToolTip(QuickAction View) when I am moving my cursor on the view. Can any one please give me the simple example for it? tooltip will only contains the text value.

Possibly using myView.setTooltipText(CharSequence) (from API-level 26) or TooltipCompat (prior to API-level 26) is an additonal option:
TooltipCompat.setTooltipText(myView, context.getString(R.string.myString));
Documentation says:
Helper class used to emulate the behavior of {#link View#setTooltipText(CharSequence)} prior to API level 26.

Using AndroidX is the recommended way.
Android 4.0 (API 14) and higher
AndroidX support Library added support for tooltips (small popup windows with descriptive text) for views and menu items.
Use setTooltipText to set the tooltip text which will be displayed in a small popup next to the view.
See the following example:
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
TooltipCompat.setTooltipText(fab, "Send an email");
The tooltip will be displayed:
On long click, unless it is handled otherwise (by OnLongClickListener or a context menu).
On hover, after a brief delay since the pointer has stopped moving
To add the Appcompat library into your project,
Open the build.gradle file for your application.
Add the support library to the dependencies section.
dependencies {
compile "androidx.appcompat:appcompat:1.1.0"
}
Android 8.0 (API level 26) and higher
If your minimum supported version is Android 8.0 (API level 26) and higher, you can specify the tooltip text in a View by calling the setTooltipText() method. You can also set the tooltipText property using the corresponding XML.
To specify the tooltip text in your XML files, set the android:tooltipText attribute, as shown in the following example:
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:tooltipText="Send an email" />
To specify the tooltip text in your code, use the setTooltipText(CharSequence) method, as shown in the following example:
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setTooltipText("Send an email");

Android supports "tool-tip" only for ActionBar buttons from Android 4.0 on. But as Jaguar already mentioned, tool-tips in Android doesnt make so much sense, since there is no concept of hovering.
From Android 4.0 the normal title text (that you set in the xml file or via code) will appear if you make a long click on the button. But if enough space is on the screen, it will be visible in the ActionBar all the time beside the icon.
If you want to have it for a custom view, you need to implement it yourself by adding a LongClickListener to your view, and show a Toast when pressed long:
view.setOnLongClickListener(new OnLongClickListener() {
public boolean onLongClick(View v) {
Toast.makeText(v.getContext(), "My tool-tip text", Toast.LENGTH_SHORT).show();
return true;
}
}
Of course you should use a resource for the string, and not the hard coded string.

Starting with Android API 14+, there is an event for hovering. You can do,
view.setOnHoverListener(...)
and listen for MotionEvents such as ACTION_HOVER_ENTER and ACTION_HOVER_EXIT, instead of onLongClick.

Based on GregoryK's answer, I've created a new ImageButton class - see code below. To use it, all you need to do is replace the ImageButton in your layouts with com.yourpackage.ImageButtonWithToolTip and give it an android:contentDescription attribute (as that is the text that will be shown in the tool tip).
package com.yourpackage;
import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Rect;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.widget.ImageButton;
import android.widget.Toast;
public class ImageButtonWithToolTip extends ImageButton {
private static final int ESTIMATED_TOAST_HEIGHT_DIPS = 48;
public ImageButtonWithToolTip(Context context) {
super(context);
init();
}
public ImageButtonWithToolTip(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public ImageButtonWithToolTip(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
#TargetApi(21)
public ImageButtonWithToolTip(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}
private void init() {
setOnLongClickListener(new View.OnLongClickListener() {
#Override
public boolean onLongClick(View view) {
/**
* You should set the android:contentDescription attribute in this view's XML layout file.
*/
String contentDescription = getContentDescription().toString();
if (TextUtils.isEmpty(contentDescription)) {
/**
* There's no content description, so do nothing.
*/
return false; // Not consumed
}
else {
final int[] screenPos = new int[2]; // origin is device display
final Rect displayFrame = new Rect(); // includes decorations (e.g. status bar)
view.getLocationOnScreen(screenPos);
view.getWindowVisibleDisplayFrame(displayFrame);
final Context context = view.getContext();
final int viewWidth = view.getWidth();
final int viewHeight = view.getHeight();
final int viewCenterX = screenPos[0] + viewWidth / 2;
final int screenWidth = context.getResources().getDisplayMetrics().widthPixels;
final int estimatedToastHeight = (int) (ESTIMATED_TOAST_HEIGHT_DIPS
* context.getResources().getDisplayMetrics().density);
Toast toolTipToast = Toast.makeText(context, contentDescription, Toast.LENGTH_SHORT);
boolean showBelow = screenPos[1] < estimatedToastHeight;
if (showBelow) {
// Show below
// Offsets are after decorations (e.g. status bar) are factored in
toolTipToast.setGravity(Gravity.TOP | Gravity.CENTER_HORIZONTAL,
viewCenterX - screenWidth / 2,
screenPos[1] - displayFrame.top + viewHeight);
}
else {
// Show above
// Offsets are after decorations (e.g. status bar) are factored in
// NOTE: We can't use Gravity.BOTTOM because when the keyboard is up
// its height isn't factored in.
toolTipToast.setGravity(Gravity.TOP | Gravity.CENTER_HORIZONTAL,
viewCenterX - screenWidth / 2,
screenPos[1] - displayFrame.top - estimatedToastHeight);
}
toolTipToast.show();
return true; // Consumed
}
}
});
}
}
You can use the same approach for extending other views - for example, Button.

Android doesn't have tool tips. It is a touch-based UI. Current touch sensors can't generally detect hovering in a way that tool tips would be useful.
There's no concept of "hovering" in a touch screen, but you could set a LongClickListener for your View, and have a Toast appear after a long press.

If you need to show tool tip for any view, you can use CheatSheet util class from Roman Nurik. (Uses Toast and optionally content description to show tooltip.)
It is
Android helper class for showing cheat sheets (tooltips) for icon-only
UI elements on long-press. This is already default platform behavior
for icon-only action bar items and tabs. This class provides this
behavior for any other such UI element

package com.nbfc.tekis.tooltipexample;
import android.support.v7.app.AppCompatActivity; import
android.os.Bundle; import android.view.View; import
android.widget.Button; import android.widget.GridView;
import it.sephiroth.android.library.tooltip.Tooltip;
public class MainActivity extends AppCompatActivity {
/*Button button1,button2,button3,button4;*/
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public void bottomTooltip(View view) {
Button button1=(Button)findViewById(R.id.button1);
Tooltip.make(this,new Tooltip.Builder()
.anchor(button1, Tooltip.Gravity.BOTTOM)
.closePolicy(new Tooltip.ClosePolicy()
.insidePolicy(true,false)
.outsidePolicy(true,false),4000)
.activateDelay(900)
.showDelay(400)
.text("Android tooltip bottom")
.maxWidth(600)
.withArrow(true)
.withOverlay(true)
.build())
.show();
}
public void topTooltip(View view) {
Button button3=(Button)findViewById(R.id.button3);
Tooltip.make(this,new Tooltip.Builder()
.anchor(button3, Tooltip.Gravity.TOP)
.closePolicy(new Tooltip.ClosePolicy()
.insidePolicy(true,false)
.outsidePolicy(true,false),4000)
.activateDelay(900)
.showDelay(400)
.text("Android tooltip top")
.maxWidth(600)
.withOverlay(true)
.withArrow(true)
.build())
.show();
}
public void rightTooltip(View view) {
Button button2=(Button)findViewById(R.id.button2);
Tooltip.make(this,new Tooltip.Builder()
.anchor(button2, Tooltip.Gravity.RIGHT)
.closePolicy(new Tooltip.ClosePolicy()
.insidePolicy(true,false)
.outsidePolicy(true,false),4000)
.activateDelay(900)
.showDelay(400)
.text("Android tooltip right")
.maxWidth(600)
.withArrow(true)
.withOverlay(true)
.build())
.show();
}
public void leftTooltip(View view) {
Button button4=(Button)findViewById(R.id.button4);
Tooltip.make(this,new Tooltip.Builder()
.anchor(button4, Tooltip.Gravity.LEFT)
.closePolicy(new Tooltip.ClosePolicy()
.insidePolicy(true,false)
.outsidePolicy(true,false),4000)
.text("Android tooltip left")
.maxWidth(600)
.withArrow(true)
.withOverlay(true)
.build())
.show();
}
}

add this to your button
android:tooltipText="Tooltip text goes here"

Based on ban's Answer, I've created this method.
It does not assume anything about the toast size. Simply places the tool tip gravity based on where the view is relative to the window (i.e. left/right/above/below the center of the window). The toast always starts from center of the view and will stretch towards the right/left/bottom/top respectively.
See Example
private static void setToastGravity(View view, Toast toast) {
final Rect viewRect = new Rect(); // view rect
final Rect windowRect = new Rect(); // window rect
view.getGlobalVisibleRect(viewRect);
view.getWindowVisibleDisplayFrame(windowRect);
int offsetX;
int offsetY;
int gravityX;
int gravityY;
if (viewRect.centerY() > windowRect.centerY()) {
// above
offsetY = windowRect.bottom - viewRect.centerY();
gravityY = Gravity.BOTTOM;
} else {
// tooltip below the view
offsetY = viewRect.centerY() - windowRect.top;
gravityY = Gravity.TOP;
}
if (viewRect.centerX() > windowRect.centerX()) {
// tooltip right of the view
offsetX = windowRect.right - viewRect.centerX();
gravityX = Gravity.END;
} else {
// tooltip left of the view
offsetX = viewRect.centerX() - windowRect.left;
gravityX = Gravity.START;
}
toast.setGravity(gravityX | gravityY, offsetX, offsetY);
}

https://github.com/skydoves/Balloon
This library provides a lightweight, popup like tooltips, fully customizable with an arrows and animations. 100% Kotlin with all necessary documentation. It is actively being managed as well.
Here are some gif from their page;
another,

I will Happy to help you
Please sir Try this ->
android-simple-tooltip
I hope that will work for you
Example :
Release
Add it in your root build.gradle at the end of repositories:
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}
Add the dependency
dependencies {
implementation 'com.github.douglasjunior:android-simple-tooltip:0.2.3'
}
Add this code in your MainActivity class and make an object for your view which will you want to bind with tooltip
View yourView = findViewById(R.id.your_view);
new SimpleTooltip.Builder(this)
.anchorView(yourView)
.text("Texto do Tooltip")
.gravity(Gravity.END)
.animated(true)
.transparentOverlay(false)
.build()
.show();

How do I position ZoomButtonsController in custom ImageView?

Layouting in Android is getting me rather perplexed.
I'm slowly implementing a custom ImageView where I'd like to make use of the ZoomButtonsController.
However, I would like to decide where the zoom buttons go in the layout and I can't figure out how to move them from the default bottom center position.
I have been experimenting with layouting simple views such as buttons in the main activity and this seems to be working as I would guess and expect.
In the case of the ZoomButtonsController I would however like to reposition them. I'm using a RelativeLayout as the mail layout and add the ZoomButtonsController within the custom ImageView.
The Activity code
public class ImageViewActivity extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
CustomImageView imageView = new CustomImageView(this);
relativeLayout.addView(imageView);
}
}
The CustomImageView code
public class CustomImageView extends ImageView {
private ZoomButtonsController mZoomButtons;
public CustomImageView(Context context) {
super(context);
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.FILL_PARENT, RelativeLayout.LayoutParams.FILL_PARENT);
mZoomButtons = new ZoomButtonsController(this);
mZoomButtons.getZoomControls();
layoutParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
layoutParams.addRule(RelativeLayout.CENTER_HORIZONTAL);
setLayoutParams(layoutParams);
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
Log.d("TAG", "touch");
mZoomButtons.setVisible(true);
return true;
}
}
I've tested with WRAP_CONTENT in the parameters, but this only makes the zoom buttons disappear.

As a matter of fact, I couldn't position the ZoomButtonsController in any way and in the end had to accept the default placement.

Android: Change APIDemo example AnimateDrawable.java to have a ClickEvent-Handler

I love the API Demo examples from the Android webpage and used the AnimateDrawable.java to
get started with a WaterfallView with several straight falling images which works great. Now I like the images to stop when they are clicked. I found out that Drawables can't handle events so I changed AnimateDrawable and ProxyDrawable to be extended from View instead and added a Click-Event-Listener and Handler on the parent WaterfallView. The animation still works great, but the handler doesn't, probably because in AnimateDrawable the whole canvas is shifted when the drawabled are animated. How can I change that example so that I can implement an event handler? Or is there a way to find out where exactly my AnimateDrawables are in the view?
So the more general question is: How to add an Event Listener / Handler to an animated View?
Here are my changes to the example above:
AnimateView and ProxyView instead of AnimateDrawable and ProxyDrawable
ProxyView extended from View and all super calls changed to mProxy
I commented out mutate()
The context is still the main Activity which is passed down in the constructors
In the constructors of AnimateView setClickable(true) and setFocusable(true) are called
And here is the important source code of the parent/main WaterfallView:
public class WaterfallView extends View implements OnClickListener {
private Context mContext;
// PictureEntry is just a value object to manage the pictures
private Vector<PictureEntry> pictures = new Vector<PictureEntry>();
public WaterfallView(Context context) {
super(context);
mContext = context;
pictures.add(new PictureEntry(context.getResources().getDrawable(R.drawable.sample_0)));
pictures.add(new PictureEntry(context.getResources().getDrawable(R.drawable.sample_1)));
pictures.add(new PictureEntry(context.getResources().getDrawable(R.drawable.sample_2)));
pictures.add(new PictureEntry(context.getResources().getDrawable(R.drawable.sample_3)));
pictures.add(new PictureEntry(context.getResources().getDrawable(R.drawable.sample_4)));
pictures.add(new PictureEntry(context.getResources().getDrawable(R.drawable.sample_5)));
pictures.add(new PictureEntry(context.getResources().getDrawable(R.drawable.sample_6)));
pictures.add(new PictureEntry(context.getResources().getDrawable(R.drawable.sample_7)));
}
#Override
protected void onDraw(Canvas canvas) {
if(!setup) {
for(PictureEntry pic : pictures) pic.setAnimation(createAnimation(pic));
setup = true;
}
canvas.drawColor(Color.BLACK);
for(PictureEntry pic : pictures) pic.getAnimateView().draw(canvas);
invalidate();
}
private Animation createAnimation(PictureEntry picture) {
Drawable dr = picture.getDrawable();
dr.setBounds(0, 0, dr.getIntrinsicWidth(), dr.getIntrinsicHeight());
Animation an = new TranslateAnimation(0, 0, -1*dr.getIntrinsicHeight(), this.getHeight());
an.setRepeatCount(-1);
an.initialize(10, 10, 10, 10);
AnimateView av = new AnimateView(mContext, dr, an);
av.setOnClickListener(this);
picture.setAnimateView(av);
an.startNow();
return an;
}
#Override
public void onClick(View v) {
Log.i("MyLog", "clicked "+v);
}
}

Are you going to be clicking widgets(buttons, checkboxes, etc)? Or do you want to be able to click anywhere? I think you want the latter. So in that case you'll need this method:
#Override
public boolean onTouchEvent(MotionEvent event) {
// do stuff with your event
}
This method is ONLY called when the event is NOT handled by a view, so I think you may have to remove some of your onClickListener stuff. Refer to here for more info. And as always, experiment.