DPad View

A simple, but highly customisable DPadView for Android.

100% Kotlin and Kotlin-first approach.

Screenshots

With CenterText	With Center Icon	Without Center Text/Icon

Full Demo

Import

Through JitPack

buildscript {
  //...
}
allProjects {
  repositories {
    //...
    maven { url "https://jitpack.io" }
  }
}

Add to module-level build.gradle

dependencies {
  //...
  implementation 'com.github.shripal17:DPadView:1.0.3'
}

Usage

In layout XML

  <com.codertainment.dpadview.DPadView
    android:id="@+id/dpad"
    android:layout_width="match_parent"
    android:layout_height="256dp"
    android:src="@drawable/ic_gamepad_black" />

Note: You must provide either fixed height or fixed width, providing both as wrap_content will follow ImageView's view behavior and may produce unexpected results

OR

At runtime

val dpadView = DPadView(this).apply {
  // set attributes here
}

yourViewGroup.addView(dpadView)

Important

DPadView extends androidx.appcompat.widget.AppCompatImageView, so all attributes for it are also applicable to DPadView for the image

Attributes

All the mentioned attributes are applicable for both Kotlin/Java and XML

Name	Description	Type	Default Value
`imagePadding`	Padding for the drawable to be displayed passed as `src`	Dimension (px at runtime)	`24dp`
`normalColor`	Color of the direction section when it is not pressed	Color Int	Current theme's `textColorSecondary`
`pressedColor`	Color of the direction section when it is pressed	Color Int	Current theme's `colorAccent`
`directionSectionAngle`	Angle for each direction section (should be between 1 and 90)	Float	88
`centerCircleEnabled`	Whether to enable the center circle	Boolean	`true`
`centerCirclePressEnabled`	If `centerCircleEnabled` is true, whether it should detect touch on the center circle	Boolean	`true`
`centerCircleNormalColor`	Color of the center circle when it is not pressed	Color Int	Current theme's `colorPrimary`
`centerCirclePressedColor`	Color of the center circle when it is pressed	Color Int	Current theme's `colorPrimaryDark`
`centerCircleRatio`	The size of the center circle will be the size of DPadView divided by this value	Float	`3.5f`
`centerText`	Text to be displayed in the center (e.g. OK)	String	Empty
`centerTextSize`	Text size for the center text	Dimension (px at runtime)	`14f`
`centerTextColor`	Text color for the center text	Color Int	Automatically picked as Black/White depending on `centerCircleNormalColor`
`centerTextStyle`	Text style for the center text	For XML: Combination of any of `bold`, `italic`, `underline` e.g. `bold\|italic\|underline` At runtime: Combination of any of `TextStyle.BOLD`, `TextStyle.ITALIC`, `TextStyle.UNDERLINE` e.g. `TextStyle.BOLD and TextStyle.UNDERLINE and TextStyle.ITALIC`	Normal
`centerIcon`	The drawable to be displayed in the center	Drawable/Mipmap Resource Reference	NA
`centerIconSizeMode`	Size mode for the icon, whether the size should be fixed or it should wrap the image src	`wrap` or `fixed` for XML, `IconSizeMode.WRAP` or `IconSizeMode.FIXED` for runtime	Wrap
`centerIconSize`	Icon size to be used if `centerIconSizeMode` is set to fixed	Dimension (px at runtime)	`24dp`
`centerIconTint`	The color to tint the center icon with	Color Int	NA
`hapticFeedbackEnabled`	Device will vibrate when user touches any direction	Boolean	False

Updating attributes at runtime

Using DPadView.modify:

dpadView.modify {
  normalColor = Color.GREEN
  // and more
}

Using apply:

 dpadView.apply {
  normalColor = Color.GREEN
  // and more
  
  // CALL THIS AFTER YOU ARE DONE
  reInit()
}

Listening to presses

Touch Tracking

DPadView provides a listener similar to onTouchListener, via onDirectionPressedListener

It has 2 parameters:

direction (Direction.UP/Direction.DOWN/Direction.LEFT/Direction.RIGHT/Direction.CENTER)
action (MotionEvent.ACTION_UP, MotionEvent.ACTION_DOWN or MotionEvent.ACTION_MOVE

dpadView.onDirectionPressListener = { direction, action ->
  // use direction and action
}

Click Tracking

dpadView.onDirectionClickListener = { direction -> 
  // the direction which has been clicked
}

Center Circle Long Click

dpadView.onCenterLongClick = {
  // perform action here
}

Authors

Shripal Jain (Me)

Showcase

Apps using this library

Create a new issue to add your app here

Portal Controller

License

Copyright 2020 Shripal Jain

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

shripal17 / dpadview Goto Github PK

dpadview's Introduction