Make a button appear wherever a user clicks

Question

I'm new to Android App Development. I wanted to know if there's any way that I can have a button become visible wherever a user clicks on screen. My friend told me that I may have to do some kind of a custom UI but I have no idea what that means in terms of Android nor how to implement it. I've got an idea of how it should work. Something like this I'm thinking:

In the XML:

Create a button with, android:onclick = "makeVisible" and visibility="invisible" attributes

and then in the Java Code:

public void makeVisible (*something goes in here*) 
{
    button.setVisibility="visible"
}

I'm not sure if this is how you would do it, but that's what I'm imagining (at least for making it appear) I have no clue how you would move it around. Please look at the picture for some extra info.

The white square appears only when a certain menu option is clicked. And only when that square is shown I would like the "Add Text" button to appear when something is clicked.

For Example: the button would be invisible. and if the user clicks on any of the locations (1,2,3,4,5,6,7,8,9, or 10) the button appears in that location and if a new location is tapped, it disappears and reappears in the new location.

I hope someone can help me. If I've confused anyone at any point, please do not hesitate to ask me to clarify something.

Thank You for any help.

Here's my current XML code:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:showIn="@layout/activity_main"
tools:context="com.example.android.postvu.MainActivity">

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/background"
    android:scaleType="centerCrop"
    android:src="@drawable/grid"
    tools:layout_editor_absoluteY="0dp"
    android:layout_marginRight="7dp"
    android:layout_marginEnd="7dp"
    tools:ignore="MissingConstraints" />

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginTop="8dp"
    android:text="@string/image_text_editor"
    android:textColor="@android:color/black"
    android:textSize="28sp"
    android:textStyle="bold"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="Image Text Editor"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp" />


<Button
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginBottom="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginTop="8dp"
    android:background="@mipmap/ic_launcher"
    android:scaleType="centerCrop"
    android:onClick="myOnClickMethod"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView"
    app:layout_constraintVertical_bias="0.98"
    android:id="@+id/button"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp" />

<ImageView
    android:id="@+id/imageView3"
    android:layout_width="450dp"
    android:layout_height="450dp"
    android:layout_marginBottom="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="8dp"
    android:layout_marginTop="8dp"
    android:contentDescription="@string/white_background"
    android:tag="white"
    android:visibility="invisible"
    app:layout_constraintBottom_toBottomOf="@+id/button"
    app:layout_constraintLeft_toLeftOf="@+id/imageView2"
    app:layout_constraintRight_toRightOf="@+id/imageView2"
    app:layout_constraintTop_toTopOf="@+id/textView"
    app:srcCompat="@mipmap/white" />

<Button
    android:id="@+id/add_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/add_text"
    android:visibility="visible"
    android:onClick="makeVisible"
    tools:ignore="MissingConstraints" />

</android.support.constraint.ConstraintLayout>

And my current Java Code:

package com.example.android.postvu;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.ContextMenu;
import android.view.SubMenu;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    view = (ImageView)findViewById(R.id.imageView3);
    backgroundImageName = String.valueOf(view.getTag());

    FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                    .setAction("Action", null).show();
        }
    });
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}


public void myOnClickMethod(View v) {
    registerForContextMenu(v);
    openContextMenu(v);
}

final int CONTEXT_MENU_VIEW = 1;
final int CONTEXT_MENU_EDIT = 2;
final int MENU_SORT = 3;
final int MENU_SORT_BY_NAME = 4;
final int MENU_SORT_BY_ADDRESS = 5;

ImageView view;
String backgroundImageName;

@Override
public void onCreateContextMenu (ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {
    menu.setHeaderTitle("Options");
    menu.add(Menu.NONE, CONTEXT_MENU_VIEW, Menu.NONE, "Take Photo");
    menu.add(Menu.NONE, CONTEXT_MENU_EDIT, Menu.NONE, "Photo Album");
    SubMenu sub=menu.addSubMenu(Menu.NONE, MENU_SORT, Menu.NONE, "Plain Image");
    sub.add(Menu.NONE, MENU_SORT_BY_NAME, Menu.NONE, "GridVu");
    sub.add(Menu.NONE, MENU_SORT_BY_ADDRESS, Menu.NONE, "Story");
}

@Override
public boolean onContextItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case CONTEXT_MENU_VIEW:
            return true;

        case CONTEXT_MENU_EDIT:
            return true;

        case MENU_SORT_BY_NAME:
            if (backgroundImageName.equals("white"))
            {
                view.setVisibility(View.VISIBLE);
            }
            return true;

        case MENU_SORT_BY_ADDRESS:
            return true;

        default:
            return super.onContextItemSelected(item);
    }
}

public void makeVisible(View w) {
    View b = findViewById(R.id.add_text);
    b.setVisibility(View.VISIBLE);
    }
}

Answer 1

you can define an id on your main xml tag in your activity's view and then you play with your screen by applying the setOnclickListener method on your view. To make your button visible you can set "setVisibiliy(View.VISIBLE)".

Example: -In your xml and in your Java:

View main_view = findViewById(R.id.main_view);
Button button = ...
main_view.setOnClickListener(new OnClickListener{
    @Override
     public void onClick(View v){
         if(button.getVisibility() == View.INVISIBLE){
             button.setVisibiliy(View.VISIBLE);
         }else{
             button.setVisibiliy(View.INVISIBLE);
         }
     }
 });

Answer 2

You can add the touch listener for your parent layout, it is ConstraintLayout in your case.

parent.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
            //get x and y with event.getX() and event.getY()
            return true;
    }
});

Add the button dynamically with the x and y co-ordinates as below,

Button button = (Button)findViewById(R.id.btn);
AbsoluteLayout.LayoutParams absParams = 
(AbsoluteLayout.LayoutParams)button.getLayoutParams();
absParams.x = myNewX;
absParams.y = myNewY;
button.setLayoutParams(absParams);

Hope it helps!

Answer 3

<Button
    android:id="@+id/add_text"
    ...
    android:visibility="visible"  <!-- This is already visible -->
    android:onClick="makeVisible"
    ... />

Did you mean to use a different view ID? Maybe imageView3? The button is already visible, but you have the right idea

public void makeVisible(View w) {
    View b = findViewById(R.id.add_text);  // Change which view
    b.setVisibility(View.VISIBLE);
}

By the way, View w will be equal to the button you clicked. No need to find it again