Overview Draggable floating button float all over the screen

In this blog, we will learn how the Draggable floating button float all over the screen.

A floating action button (FAB) is a circular button that triggers the primary action in your app’s UI. This page shows you how to add the FAB to your layout, customize some of its appearances, and respond to button taps.

Let’s understand with an example.

It is a circular button that triggers the primary action in our app’s UI.

1.) Firstly we have to make the floating button and Service class.

Manifest:

Add SYSTEM_ALERT_WINDOW permission in Manifest

1	<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />

<service

android:name=".FloatingWidgetService"

android:enabled="true"

android:exported="false" />

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:padding="10dp"

android:background="@android:color/holo_blue_bright">

<Button

android:id="@+id/floating_button"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:onClick="onClickFloatingButton"

android:text="@string/generate_floating"

android:textColor="@color/white"

android:textSize="16sp"

android:layout_margin="20dp"

android:background="@android:color/holo_blue_dark"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

floating_widget_layout.xml

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="wrap_content"

android:layout_height="wrap_content">

<RelativeLayout

android:id="@+id/root_layout"

android:layout_width="wrap_content"

android:layout_height="wrap_content">

<RelativeLayout

android:id="@+id/relative_collapse"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical"

android:visibility="visible">

<ImageView

android:id="@+id/image_collapsed"

android:layout_width="70dp"

android:layout_height="70dp"

android:layout_marginTop="8dp"

android:src="@mipmap/ic_launcher_round"

tools:ignore="ContentDescription" />

<ImageView

android:id="@+id/image_close_floating"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="50dp"

android:layout_marginTop="5dp"

android:background="@drawable/circle_shape"

android:src="@drawable/ic_close_white"

tools:ignore="ContentDescription" />

</RelativeLayout>

<LinearLayout

android:id="@+id/linear_expanded"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@color/white"

android:gravity="center"

android:orientation="horizontal"

android:padding="8dp"

android:visibility="gone">

<ImageView

android:id="@+id/image_floating"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/ic_baseline_access_alarm_24" />

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginStart="10dp"

android:orientation="vertical"

android:layout_marginLeft="10dp">

<TextView

android:id="@+id/text_title_floating"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center_vertical"

android:text="@string/draggable_button"

android:textColor="@android:color/black"

android:textSize="14sp" />

<TextView

android:id="@+id/text_floating_detail"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center_vertical"

android:text="@string/draggable_details"

android:textColor="@android:color/darker_gray"

android:textSize="11sp" />

</LinearLayout>

<ImageView

android:id="@+id/image_close_float"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:padding="10dp"

android:src="@drawable/ic_close_black" />

<ImageView

android:id="@+id/image_open"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="1"

android:padding="10dp"

android:src="@drawable/ic_open_view" />

</LinearLayout>

</RelativeLayout>

</FrameLayout>

remove_floating_layout.xml

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/remove_relativelayout"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:padding="10dp">

<ImageView

android:id="@+id/image_remove"

android:layout_width="70dp"

android:layout_height="70dp"

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="oval">

<stroke

android:width="1dp"

android:color="@android:color/white" />

</shape>

3.) The Kotlin service classes :

FloatingWidgetService.kt

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

class FloatingWidgetService : Service(), View.OnClickListener {

private var mWindowManager: WindowManager? = null

private var mFloatingWidgetView: View? = null

private var collapsedView: View? = null

private var expandedView: View? = null

private var remove_image_view: ImageView? = null

private val szWindow = Point()

private var removeFloatingWidgetView: View? = null

private var x_init_cord = 0

private var y_init_cord = 0

private var x_init_margin = 0

private var y_init_margin = 0

private var isLeft = true

override fun onBind(intent: Intent): IBinder? {

return null

}

override fun onCreate() {

super.onCreate()

mWindowManager = getSystemService(Context.WINDOW_SERVICE) as WindowManager

windowManagerDefaultDisplay

val inflater = getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater

addRemoveView(inflater)

addFloatingWidgetView(inflater)

implementClickListeners()

implementTouchListenerToFloatingWidgetView()

}

private fun addRemoveView(inflater: LayoutInflater): View? {

removeFloatingWidgetView = inflater.inflate(R.layout.remove_floating_layout, null)

val paramRemove: WindowManager.LayoutParams

paramRemove = if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O) {

WindowManager.LayoutParams(

WindowManager.LayoutParams.WRAP_CONTENT,

WindowManager.LayoutParams.TYPE_PHONE,

WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,

PixelFormat.TRANSLUCENT)

} else {

WindowManager.LayoutParams(

WindowManager.LayoutParams.WRAP_CONTENT,

WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY,

WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,

PixelFormat.TRANSLUCENT)

}

paramRemove.gravity = Gravity.TOP or Gravity.LEFT

removeFloatingWidgetView?.setVisibility(View.GONE)

remove_image_view = removeFloatingWidgetView?.findViewById<View>(R.id.image_remove) as ImageView

mWindowManager!!.addView(removeFloatingWidgetView, paramRemove)

return remove_image_view

}

private fun addFloatingWidgetView(inflater: LayoutInflater) {

//Inflate the floating view layout we created

mFloatingWidgetView = inflater.inflate(R.layout.floating_widget_layout, null)

val params: WindowManager.LayoutParams

params = if (Build.VERSION.SDK_INT < Build.VERSION_CODES.O) {

WindowManager.LayoutParams(

WindowManager.LayoutParams.WRAP_CONTENT,

WindowManager.LayoutParams.TYPE_PHONE,

WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,

PixelFormat.TRANSLUCENT)

} else {

WindowManager.LayoutParams(

WindowManager.LayoutParams.WRAP_CONTENT,

WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY,

WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,

PixelFormat.TRANSLUCENT)

}

params.gravity = Gravity.TOP or Gravity.LEFT

params.x = 0

params.y = 100

mWindowManager!!.addView(mFloatingWidgetView, params)

collapsedView = mFloatingWidgetView?.findViewById(R.id.image_collapsed)

expandedView = mFloatingWidgetView?.findViewById(R.id.linear_expanded)

}

private val windowManagerDefaultDisplay: Unit

private get() {

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB_MR2) mWindowManager!!.defaultDisplay.getSize(szWindow) else {

val w = mWindowManager!!.defaultDisplay.width

val h = mWindowManager!!.defaultDisplay.height

szWindow[w] = h

}

private fun implementTouchListenerToFloatingWidgetView() {

mFloatingWidgetView!!.findViewById<View>(R.id.root_layout).setOnTouchListener(object : OnTouchListener {

var time_start: Long = 0

var time_end: Long = 0

var isLongClick = false

var inBounded = false

var remove_img_width = 0

var remove_img_height = 0

var handler_longClick = Handler()

var runnable_longClick = Runnable {

isLongClick = true

removeFloatingWidgetView!!.visibility = View.VISIBLE

onFloatingWidgetLongClick()

}

override fun onTouch(v: View, event: MotionEvent): Boolean {

val layoutParams = mFloatingWidgetView!!.layoutParams as WindowManager.LayoutParams

val x_cord = event.rawX.toInt()

val y_cord = event.rawY.toInt()

val x_cord_Destination: Int

var y_cord_Destination: Int

when (event.action) {

MotionEvent.ACTION_DOWN -> {

time_start = System.currentTimeMillis()

handler_longClick.postDelayed(runnable_longClick, 600)

remove_img_width = remove_image_view!!.layoutParams.width

remove_img_height = remove_image_view!!.layoutParams.height

x_init_cord = x_cord

y_init_cord = y_cord

x_init_margin = layoutParams.x

y_init_margin = layoutParams.y

return true

}

MotionEvent.ACTION_UP -> {

isLongClick = false

removeFloatingWidgetView!!.visibility = View.GONE

remove_image_view!!.layoutParams.height = remove_img_height

remove_image_view!!.layoutParams.width = remove_img_width

handler_longClick.removeCallbacks(runnable_longClick)

if (inBounded) {

stopSelf()

inBounded = false

// break

}

val x_diff = x_cord - x_init_cord

val y_diff = y_cord - y_init_cord

if (Math.abs(x_diff) < 5 && Math.abs(y_diff) < 5) {

time_end = System.currentTimeMillis()

if (time_end - time_start < 300) onFloatingWidgetClick()

}

y_cord_Destination = y_init_margin + y_diff

val barHeight = statusBarHeight

if (y_cord_Destination < 0) {

y_cord_Destination = 0

} else if (y_cord_Destination + (mFloatingWidgetView!!.height + barHeight) > szWindow.y) {

y_cord_Destination = szWindow.y - (mFloatingWidgetView!!.height + barHeight)

}

layoutParams.y = y_cord_Destination

inBounded = false

}

MotionEvent.ACTION_MOVE -> {

val x_diff_move = x_cord - x_init_cord

val y_diff_move = y_cord - y_init_cord

x_cord_Destination = x_init_margin + x_diff_move

y_cord_Destination = y_init_margin + y_diff_move

if (isLongClick) {

val x_bound_left = szWindow.x / 2 - (remove_img_width * 1.5).toInt()

val x_bound_right = szWindow.x / 2 + (remove_img_width * 1.5).toInt()

val y_bound_top = szWindow.y - (remove_img_height * 1.5).toInt()

if (x_cord >= x_bound_left && x_cord <= x_bound_right && y_cord >= y_bound_top) {

inBounded = true

val x_cord_remove = ((szWindow.x - remove_img_height * 1.5) / 2).toInt()

val y_cord_remove = (szWindow.y - (remove_img_width * 1.5 + statusBarHeight)).toInt()

if (remove_image_view!!.layoutParams.height == remove_img_height) {

remove_image_view!!.layoutParams.height = (remove_img_height * 1.5).toInt()

remove_image_view!!.layoutParams.width = (remove_img_width * 1.5).toInt()

val param_remove = removeFloatingWidgetView!!.layoutParams as WindowManager.LayoutParams

param_remove.x = x_cord_remove

param_remove.y = y_cord_remove

mWindowManager!!.updateViewLayout(removeFloatingWidgetView, param_remove)

}

layoutParams.x = x_cord_remove + Math.abs(removeFloatingWidgetView!!.width - mFloatingWidgetView!!.width) / 2

layoutParams.y = y_cord_remove + Math.abs(removeFloatingWidgetView!!.height - mFloatingWidgetView!!.height) / 2

mWindowManager!!.updateViewLayout(mFloatingWidgetView, layoutParams)

// break

} else {

inBounded = false

remove_image_view!!.layoutParams.height = remove_img_height

remove_image_view!!.layoutParams.width = remove_img_width

onFloatingWidgetClick()

}

layoutParams.x = x_cord_Destination

layoutParams.y = y_cord_Destination

mWindowManager!!.updateViewLayout(mFloatingWidgetView, layoutParams)

return true

}

return false

}

})

}

private fun implementClickListeners() {

mFloatingWidgetView!!.findViewById<View>(R.id.image_close_float).setOnClickListener(this)

mFloatingWidgetView!!.findViewById<View>(R.id.linear_expanded).setOnClickListener(this)

mFloatingWidgetView!!.findViewById<View>(R.id.image_open).setOnClickListener(this)

}

override fun onClick(v: View) {

when (v.id) {

R.id.image_close_float ->

stopSelf()

R.id.image_close_float -> {

collapsedView!!.visibility = View.VISIBLE

expandedView!!.visibility = View.GONE

}

R.id.image_open

-> {

val intent = Intent(this@FloatingWidgetService, MainActivity::class.java)

intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)

startActivity(intent)

stopSelf()

}

private fun onFloatingWidgetLongClick() {

val removeParams = removeFloatingWidgetView!!.layoutParams as WindowManager.LayoutParams

val x_cord = (szWindow.x - removeFloatingWidgetView!!.width) / 2

val y_cord = szWindow.y - (removeFloatingWidgetView!!.height + statusBarHeight)

removeParams.x = x_cord

removeParams.y = y_cord

mWindowManager!!.updateViewLayout(removeFloatingWidgetView, removeParams)

}

private fun resetPosition(x_cord_now: Int) {

if (x_cord_now <= szWindow.x / 2) {

isLeft = true

moveToLeft(x_cord_now)

} else {

isLeft = false

moveToRight(x_cord_now)

}

private fun moveToLeft(current_x_cord: Int) {

val x = szWindow.x - current_x_cord

object : CountDownTimer(500, 5) {

var mParams = mFloatingWidgetView!!.layoutParams as WindowManager.LayoutParams

override fun onTick(t: Long) {

val step = (500 - t) / 5

mParams.x = 0 - (current_x_cord * current_x_cord * step).toInt()

mWindowManager!!.updateViewLayout(mFloatingWidgetView, mParams)

}

override fun onFinish() {

mParams.x = 0

mWindowManager!!.updateViewLayout(mFloatingWidgetView, mParams)

}

}.start()

}

private fun moveToRight(current_x_cord: Int) {

object : CountDownTimer(500, 5) {

var mParams = mFloatingWidgetView!!.layoutParams as WindowManager.LayoutParams

override fun onTick(t: Long) {

val step = (500 - t) / 5

mParams.x = (szWindow.x + current_x_cord * current_x_cord * step - mFloatingWidgetView!!.width).toInt()

mWindowManager!!.updateViewLayout(mFloatingWidgetView, mParams)

}

override fun onFinish() {

mParams.x = szWindow.x - mFloatingWidgetView!!.width

mWindowManager!!.updateViewLayout(mFloatingWidgetView, mParams)

}

}.start()

}

private fun bounceValue(step: Long, scale: Long): Double {

return scale * Math.exp(-0.055 * step) * Math.cos(0.08 * step)

}

private val isViewCollapsed: Boolean

private get() = mFloatingWidgetView == null || mFloatingWidgetView!!.findViewById<View>(R.id.image_collapsed).visibility == View.VISIBLE

private val statusBarHeight: Int

private get() = Math.ceil(25 * applicationContext.resources.displayMetrics.density.toDouble()).toInt()

override fun onConfigurationChanged(newConfig: Configuration) {

super.onConfigurationChanged(newConfig)

windowManagerDefaultDisplay

val layoutParams = mFloatingWidgetView!!.layoutParams as WindowManager.LayoutParams

if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {

if (layoutParams.y + (mFloatingWidgetView!!.height + statusBarHeight) > szWindow.y) {

layoutParams.y = szWindow.y - (mFloatingWidgetView!!.height + statusBarHeight)

mWindowManager!!.updateViewLayout(mFloatingWidgetView, layoutParams)

}

if (layoutParams.x != 0 && layoutParams.x < szWindow.x) {

resetPosition(szWindow.x)

}

} else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT) {

if (layoutParams.x > szWindow.x) {

resetPosition(szWindow.x)

}

private fun onFloatingWidgetClick() {

if (isViewCollapsed) {

collapsedView!!.visibility = View.GONE

expandedView!!.visibility = View.VISIBLE

}

override fun onDestroy() {

super.onDestroy()

if (removeFloatingWidgetView != null) mWindowManager!!.removeView(removeFloatingWidgetView)

}

The MainActivity.kt classes

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

}

fun onClickFloatingButton(view: View?) {

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M && !Settings.canDrawOverlays(this)) {

val intent = Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,

Uri.parse("package:$packageName"))

startActivityForResult(intent, DRAW_OVER_OTHER_APP_PERMISSION_REQUEST_CODE)

} else

startFloatingWidgetService()

}

private fun startFloatingWidgetService() {

startService(Intent(this@MainActivity, FloatingWidgetService::class.java))

finish()

}

override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {

if (requestCode == DRAW_OVER_OTHER_APP_PERMISSION_REQUEST_CODE) {

if (resultCode == Activity.RESULT_OK)

startFloatingWidgetService() else

Toast.makeText(this,

resources.getString(R.string.draw_other_app_permission_denied),

Toast.LENGTH_SHORT).show()

} else {

super.onActivityResult(requestCode, resultCode, data)

}

companion object {

private const val DRAW_OVER_OTHER_APP_PERMISSION_REQUEST_CODE = 1222

}

Finally, we implemented the code part of moving the floating button in this blog.

You can also check these links.

https://mobikul.com/how-to-add-extended-floating-action-button-in-android-app/

https://mobikul.com/display-floating-button-add-event-swift/

Another mentioned URL

Now we can also create any kind of Floating draggable button for our applications.

I hope this blog will help you to how to move the floating button all over the screen.

For more understanding please can go through this link:

That’s all, You can enjoy your draggable button feature.

Thank you very much.

Priyanka Kumari 30 November 2020

. . .

Draggable floating button float all over the screen

Overview Draggable floating button float all over the screen

In this blog, we will learn how the Draggable floating button float all over the screen.

A floating action button (FAB) is a circular button that triggers the primary action in your app’s UI. This page shows you how to add the FAB to your layout, customize some of its appearances, and respond to button taps.

Let’s understand with an example.

It is a circular button that triggers the primary action in our app’s UI.

1.) Firstly we have to make the floating button and Service class.

Manifest:

Add SYSTEM_ALERT_WINDOW permission in Manifest

activity_main.xml

remove_floating_layout.xml

2.) We can add the drawable resource layout below:

ic_baseline_access_alarm_24.xml

ic_close_black.xml

ic_close_white.xml

ic_open_view.xml

white_circle_shape.xml

3.) The Kotlin service classes :

FloatingWidgetService.kt

The MainActivity.kt classes

Finally, we implemented the code part of moving the floating button in this blog.

You can also check these links.

Now we can also create any kind of Floating draggable button for our applications.

I hope this blog will help you to how to move the floating button all over the screen.

For more understanding please can go through this link:

That’s all, You can enjoy your draggable button feature.

Thank you very much.

Leave a Comment Cancel Reply

Message Sent!