Skip to content

A simple, yet highly customisable DPadView for Android.

License

Notifications You must be signed in to change notification settings

shripal17/DPadView

Repository files navigation

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
With Center Text With Center Icon Without Center Text/Icon

Full Demo

Whole Video

Import

Through JitPack
buildscript {
  //...
}
allProjects {
  repositories {
    //...
    maven { url "https://jitpack.io" }
  }
}
  1. 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

  1. Using DPadView.modify:
dpadView.modify {
  normalColor = Color.GREEN
  // and more
}
  1. 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:

  1. direction (Direction.UP/Direction.DOWN/Direction.LEFT/Direction.RIGHT/Direction.CENTER)
  2. 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

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.