Android Custom View: PlayStation Knob - Part 1: Getting Started

This is part 1 of the series "Android Custom View: PlayStation Knob", in which I will be creating an Android Custom View that acts just like the PlayStation Analogue Knob:


In this part, you will be able to:

  1. Create the Custom View
  2. Create Custom Attributes
  3. Use your View in an Activity
  4. Capture Touch Events to move the knob

Note: The code demonstrated here can be directly fetched from the git repository WidgyWidgets. You need to clone the repository and checkout to tags/knobview-part1 (Instruction are at the end of this post)

To start with this, you want to decide on whether to extend the base View class or to extend one of the widgets available in android.
In our case, I want to create a view that somehow shows in its center a circle that can be dragged by the user to any of the edges. One way to go would be to extend one of the available ViewGroups, add the knob in its center, and implement this dragging functionality. Another way would be to start the view from scratch by extending View.
To make things more interesting, I will, in this post, extend View. By the way, I will call it KnobView.

As a general practice I usually create a class that extends View and directly create a function called init and override the 3 constructors of View calling init() in all of them:

public class KnobView extends View {
 
 public KnobView(Context context) {
  super(context);
  init(context, null);
 }

 public KnobView(Context context, AttributeSet attrs) {
  super(context, attrs);
  init(context, attrs);
 }

 public KnobView(Context context, AttributeSet attrs, int defStyle) {
  super(context, attrs, defStyle);
  init(context, attrs);
 }

 private void init(Context context, AttributeSet attrs) {
  // TODO Auto-generated method stub
 }
}

If you do not know, the AttributeSet parameter in the constructor contains the attributes specified in the xml. To demonstrate, I will create an attribute called knob that will reference a drawable used for the knob in the center. To do so, we need to declare this attribute in the res folder. I will create a file called attr_knobview.xml in the res/values folder: this file will include the attributes of our KnobView. At this stage, we will only declare the attribute called knob of type integer since it is a reference to a drawable:
 
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="KnobView">
        <attr name="knob" format="integer" />
    </declare-styleable>
</resources>

Now in my init function I will get this drawable. (If you are working step by step, build your project after each change - e.g. NOW). To get the drawable:

private void init(Context context, AttributeSet attrs) {
 // TODO Auto-generated method stub
 TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.KnobView);
 int drawable = a.getResourceId(R.styleable.KnobView_knob, 0);
 if(drawable != 0) {
  mKnobDrawable = a.getDrawable(R.styleable.KnobView_knob);
 }
}

In this code, I try to get the integer which would be specified by the attribute knob (KnobView_knob). If this integer is not 0, I get the drawable and assign it to the field mKnobDrawable. You can add the field mKnobDrawable at the top of the class using this line: private Drawable mKnobDrawable;

What if there is no knob attribute specified in xml? I will simply create my own round black circle. This can be done in the else statement by creating a ShapeDrawable and assigning it to mKnobDrawable. Now my init function will assign a drawable to mKnobDrawable whether knob was specified or not.

private void init(Context context, AttributeSet attrs) {
 // TODO Auto-generated method stub
 TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.KnobView);
 int drawable = a.getResourceId(R.styleable.KnobView_knob, 0);
 if(drawable != 0) {
  mKnobDrawable = a.getDrawable(R.styleable.KnobView_knob);
 }
 else {
  mKnobDrawable = new ShapeDrawable(new OvalShape());
  ShapeDrawable s = (ShapeDrawable) mKnobDrawable;
         s.getPaint().setColor(Color.BLACK);
 }
}

Now we want to take care of the size of this knob. For now, I will center it in the view and let it take half the width and half the height. I will update the Bounds of this mKnobDrawable each time the size of our KnobView changes. This can be captured in onSizeChanged:

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
 super.onSizeChanged(w, h, oldw, oldh);
 mKnobDrawable.setBounds(w/2-w/4, h/2-h/4, w/2+w/4, h/2+h/4);
}

Notice that I am always updating the bounds of the knob drawable when the size changed. These bounds determine the actual rectangle in which my drawable will be drawn. I set the bounds to be the rectangle that is exactly half the size of the view and exactly located in the center of our view. It is pretty straight-forward.

Finally, I want to draw this Knob. This is simply calling the Drawable's draw function on our canvas in the onDraw function of the KnobView:

@Override
protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 mKnobDrawable.draw(canvas);
}

For testing, I created an activity with the following xml layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/mobi.sherif.widgywidgetstest"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <mobi.sherif.widgywidgets.KnobView
        android:id="@+id/knob1"
        android:background="#f00"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1" />
    <mobi.sherif.widgywidgets.KnobView
        android:id="@+id/knob2"
        android:background="#0f0"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        app:knob="@drawable/ic_launcher" />
</LinearLayout>

Notice:

  1. If you are doing your own project, you probably want to specify your package name instead of mobi.sherif.widgywidgetstest (second line)
  2. Due to layout_height="0dp" and layout_weight="1", each KnobView will take half the screen.
  3. The first KnobView does not specify the knob attribute while the second does.
  4. Each of the KnobView has a differnt background (red and blue).
Anyway, if you run this activity, you will get the output that is shown in the previous image.

With some modifications, int the drawables used for the background and the knob, I was able to get the following KnobView:

I modified the first KnobView in the layout (notice the background and the knob values)

    <mobi.sherif.widgywidgets.KnobView
        android:id="@+id/knob1"
        android:background="@drawable/bg_knobview"
        app:knob="@drawable/bg_knob"
        android:layout_width="100dip"
        android:layout_height="100dip"
        android:layout_marginTop="100dip"
        android:layout_marginBottom="100dip" />

I also created res/bg_knobview
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <solid android:color="#aaaaaa" />
</shape>

andres/bg_knob
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <solid android:color="#333333" />
</shape>

Now it is time to move our knob. It is a very simple thing to: We will capture the touches on our view using the function onTouchEvent and when an ACTION_DOWN or ACTION_MOVE is detected, we move the knob to the location of the event. How do we do so? It's pretty easy: we use the setBounds function that we used in the onSizeChanged.

@Override
public boolean onTouchEvent(MotionEvent event) {
 final int action = MotionEventCompat.getActionMasked(event);
 if(action == MotionEvent.ACTION_DOWN || action == MotionEvent.ACTION_MOVE) {
  int w = getWidth();
  int h = getHeight();
  int x = (int) event.getX();
  int y = (int) event.getY();
  mKnobDrawable.setBounds(x-w/4, y-h/4, x+w/4, y+h/4);
  invalidate();
 }
 return true;
}
Notice that we only did two things if the action is ACTION_DOWN or ACTION_MOVE:

  1. Set the bounds of our knob drawable based on the location of the event: We kept its width = w/2 and its height h/2 but we translated it to (x,y), the location of the event
  2. Invalidated the view using invalidate() to force our view to redraw -i.e. to move the knob.
The last natural thing to do is move the knob back when the user stops his touches. That is almost the same thing but with x and y set to the midpoint of the view -i.e. (w/2, h/2). Therefore our final onTouchEvent will look something like:

@Override
public boolean onTouchEvent(MotionEvent event) {
 final int action = MotionEventCompat.getActionMasked(event);
 if(action == MotionEvent.ACTION_DOWN || action == MotionEvent.ACTION_MOVE) {
  int w = getWidth();
  int h = getHeight();
  int x = (int) event.getX();
  int y = (int) event.getY();
  mKnobDrawable.setBounds(x-w/4, y-h/4, x+w/4, y+h/4);
  invalidate();
 }
 else if (action == MotionEvent.ACTION_CANCEL || action == MotionEvent.ACTION_UP) {
  int w = getWidth();
  int h = getHeight();
  int x = w/2;
  int y = h/2;
  mKnobDrawable.setBounds(x-w/4, y-h/4, x+w/4, y+h/4);
  invalidate();
    }
 return true;
}

Notice that the only difference is that x and y are not set to w/2 and h/2 respectively.

At the end of this part, your knob should be able to move when touched and return to its original place when released. Clone the WidgyWidget repository to try it yourself.

Have fun (:

Note: If you want to get the code of this part only, clone and checkout tags/knobview-part1 using the following commands (If you ommit folder_name, it will automatically be cloned into folder WidgyWidgets) :

git clone https://github.com/sherifelkhatib/WidgyWidgets.git folder_name
cd folder_name
git checkout tags/knobview-part1
... Try it and when you are done ...
git checkout master

58 comments:

  1. Thanks for sharing, nice post!

    - Với sự phát triển ngày càng tiến bộ của kỹ thuật công nghệ, nhiều sản phẩm thông minh ra đời với mục đích giúp cuộc sống chúng ta trở nên thoải mái và tiện lợi hơn. Và thiet bi dua vong tu dong ra đời là một trong những sản phẩm tinh túy của công nghệ, may ru vong tu dong là phương pháp ru con thời hiện đại của các ông bố bà mẹ bận rộn.

    - Là sản phẩm tuyệt vời của sự phát triển công nghệ, dung cu dua vong tu dong được thiết kế an toàn, tiện dụng. Những lợi ích mà may dua vong em be mang lại là vô cùng thiết thực.

    - Hiện nay trên thị trường có nhiều loại may dua vong cho em bé, sau nhiều năm kinh doanh và kinh nghiệm đút kết từ phản hồi của quý khách hàng sau khi mua máy, máy đưa võng tự động An Thái Sơn nhận thấy máy đưa võng tự động TS – sản phẩm may dua vong tu dong thiết kế dành riêng cho em bé, có chất lượng rất tốt, hoạt động êm, ổn định sức đưa đều, không giật cục, tuyệt đối an toàn cho trẻ, là lựa chọn hoàn hảo đảm bảo giấc ngủ ngon cho bé yêu của bạn.

    Bạn xem thêm bí quyết và chia sẽ kinh nghiệm làm đẹp:

    Những thực phẩm giúp đẹp da tại http://nhungthucphamgiupda.blogspot.com/
    Thực phẩm giúp bạn trẻ đẹp tại http://thucphamgiuptre.blogspot.com/
    Thực phẩm làm tăng tại http://thucphamlamtang.blogspot.com/
    Những thực phẩm giúp làm giảm tại http://thucphamlamgiam.blogspot.com/
    Những thực phẩm tốt cho tại http://thucphamtotcho.blogspot.com/

    Chúc các bạn vui vẻ!

    ReplyDelete
  2. I love to see you have written this content very Well and want to write more so people will aware of this issue
    I have some favorite game Blogs as well like
    ||Happy Wheels at happywheels.in||
    ||Happy wheels game at classic happy wheels game||
    ||Happy Wheels demo at happy wheels||
    ||Fireboy and watergirl at fireboywatergirl.co||

    ReplyDelete
  3. Thank you for posting such a great article! I found your website perfect for my needs
    visit our website

    ReplyDelete
  4. Great Article...Thanks for sharing the best information.It was so good to read and useful to improve my knowledge as updated one.

    Android Training

    ReplyDelete
  5. You are doing a great job. Now we are sharing with you all the Tresurebox store products which you will be buy online in a single click. Garden shed nz online in a single click,

    ReplyDelete
  6. Looking for English to Spanish Translators? We provide professional Translation Services at highly competitive rates without compromising the quality.
    spanish to english translation services

    ReplyDelete
  7. we are best calgary roofing companies & Best roofing contractors calgary. Contact us for transparent quotes. roofing calgary & roofing services calgary Roofing Company in Calgary

    ReplyDelete
  8. This piece appeared educaitonal and informative. Thanks a lot for contributing the tutorial, I will be learning from it!

    ReplyDelete
  9. I felt very happy while reading this article. we provide Mobile Back Cover Printing in Kenya at affordable prices. for more info visit our website.

    ReplyDelete
  10. To be honest your article is informative and very helpful. Hp Laptop | Hp laptop online price

    ReplyDelete
  11. https://syntheticworldwide.com/
    sales@syntheticworldwide.com

    Buy cheap liquid herbal incense at your best online shop

    ReplyDelete
  12. Nice post! This is a very nice blog that I will definitively come back to more times this year! Thanks for informative post.

    ReplyDelete
  13. Very informative post! There is a lot of information here that can help any business get started with a successful social networking campaign.

    ReplyDelete
  14. to the medical condition of most patients. many people suffering from cancer, chronic pain, anxiety and man more have overcome their illment with cannabis. you can order weed from our store





    ReplyDelete



  15. Our online store is one of the best in the supply of rare and high-grade (Mushrooms, Edibles. Psychedelics, and more)with absolute purity. All our products are tested to guarantee potency after production, during distribution and even storage. We ship globally in discreet and undetectable packaging using our network of trusted partners.
    psilosybin mushroom 2022, trusted magic mushroom site 2022,
    cheap liquid lsd, order cheap psychedelic mushroom,
    cheap magic mushroom, super quality shrooms,
    most potent psilocybin mushroom on the market,
    best microdosing mushrooms 2022, Golden teacher mushroom for sale,
    where to buy B+ magic mushroom, buy shrooms online ,
    buy psilocybin mushroom overnight shipping, effective microdosing for ptsd,
    buy mushroom truffles online cash on delivery, buy microdose capsules online 2021,
    magic mushrooms for mental illness for sale,
    buy mushies for anxiety/deppression and ptsd, cheap psilocybin mushroom, shrooms near me,
    where to buy psilocybin mushroom near me, cheap psychedelic mushroom for sale,
    buy caps/buttons cheap, best place to buy magic mushroom,
    buy cheap fungi mushrooms, cheap strong fungus, best quality spores for sale,
    buy mushroom grow kit online, buy fungi shrooms near me, cheapest magic mushrooms online,
    where to buy penis envy online, where to buy mexicanna online, buy microdose capsules online,
    best microdose capsule for sale,
    fungi mushroom for sale, best liquid cultures online, buy spores near me, buy Nirvana mushroom near me,
    buy pajaritos mushrooms near me, psychedelic mushroom near me, buy medicinal mushroom online,
    buy 5-MeO-DMT, buy dmt vape pen online, buy lsd tabs online, buy dmt online, where to buy dmt,
    lsd for sale, buy mushies near me, buy shrooms wholesale price, strong boomers for sale,
    Buy trippy shrooms online, buy penis envy, buy albino A+, buy amazonian cubensis,
    buy psilocybe cubensis, buy blue meanie, buy vietam cubensis, buy z strain shrooms,
    buy boomers cubensis online, buy cubensis buy golden teacher, buy liquid lsd online
    Our quality is the best you can find around and we sell in small/large quantities with guaranteed discreet delivery in good time Shipping




    website...https://megapsilocybin.com/
    call/text..+1(458) 201-6900
    email..sale@megapsilocybin.com

    ReplyDelete
  16. Fast-track your data analytics and machine learning career with guaranteed placement opportunities. Most extensive, industry-approved experiential learning program ideal for future Data Scientists.

    ReplyDelete
  17. You actually make it look so easy with your performance but I find this matter to be actually something which I think I would never comprehend. It seems too complicated and extremely broad for me. I'm looking forward for your next post, I’ll try to get the hang of it! data science training in kanpur

    ReplyDelete
  18. Copying wii original DVDs and enjoying them on your console is not a tuff thing to do all you need to know is the good software to make your copying games process successful and let you play all your games. how to install cracked apps on mac Game downloads are free of harmful viruses, adware, and spyware (scanned by Virustotal).

    ReplyDelete
  19. You provided fantastic information which is going to help people. You can also get information about IT solutions company Mississauga, Managed IT Services Mississauga, cloud consulting services Mississauga

    ReplyDelete
  20. I would also motivate just about every person to save this web page for any favorite assistance to assist posted the appearance. data science training in surat

    ReplyDelete
  21. Risk management software is a type of computer program designed to help businesses and organizations identify, assess, and manage potential risks to their operations. These risks may include financial risks, operational risks, legal risks, and reputational risks, among others.

    ReplyDelete
  22. Online learning can be a great option for seniors who want to continue their education, learn new skills, or simply explore new interests. It offers flexibility, convenience, and a wide range of subjects to choose from. Online Learning for Seniors

    ReplyDelete
  23. Excellent instruction! Your step-by-step instructions for developing the Android Custom View for the PlayStation Knob are quite helpful. It's simple to follow along as you explain decisions regarding extending View, custom attributes, and touch event processing. Your code samples and XML layouts give depth to your explanation, making it understandable to beginners. I'm looking forward to the following installments in the series! 🎮📱
    Data Analytics Courses in India

    ReplyDelete
  24. This article seemed to be instructive and informative. I appreciate you sharing the information; I will benefit from it.
    Data Analytics Courses in Agra

    ReplyDelete
  25. This article is a fantastic introduction to creating Android Custom Views, especially the PlayStation Knob. The step-by-step explanation and clear code snippets make it easy to follow along. Keep up the good work.
    Is iim skills fake?

    ReplyDelete
  26. This blog post seems to be the beginning of an exciting journey into creating a custom view for Android inspired by a PlayStation knob. Custom views can add unique and engaging elements to Android apps, and this post likely offers a promising start for developers looking to delve into this creative process. A must-read for Android developers seeking to enhance their skills and add a touch of innovation to their app's user interface.
    Data Analytics Courses in Delhi



    ReplyDelete
  27. This blog article appears to be the start of an intriguing path towards developing an Android custom view that is motivated by a PlayStation knob. Custom views may bring interesting and distinctive features to Android apps, and this article can serve as a helpful starting point for developers interested in exploring this creative process. Thank you for sharing.
    Data Analytics Courses in Agra

    ReplyDelete
  28. This knob design feels like a nostalgic gaming joystick – a cool twist for my Android app! I'm thrilled to give it a spin in my next project. Thanks for sharing this gem.
    Data Analytics Courses In Gujarat

    ReplyDelete
  29. This blog helped me level up my Android skills! I'm all set to craft some cool custom knobs for my app now. Thanks for sharing this gem of a tutorial!
    Data Analytics Courses In Gujarat

    ReplyDelete
  30. Sherif elKhatib's blog, powered by cutting-edge AI technology, is a game-changer in the realm of Android-focused content creation.
    Digital Marketing Courses in Hamburg

    ReplyDelete
  31. The PlayStation Knob, or joystick, is a fundamental input device for gaming consoles, offering precise control and enhancing the gaming experience. In the world of data analytics, London offers a variety of Data Analytics courses that equip individuals with the skills to extract insights from diverse data sources and make data-driven decisions. Please also Digital Marketing Courses in London.

    ReplyDelete
  32. Thank you for providing this valuable resource, offering clear instructions and practical tips for creating engaging and dynamic user interfaces on the Android platform."
    Digital marketing courses in woking

    ReplyDelete
  33. I found the blog on Android Custom View: PlayStation Knob' series very informative the step by step guidance is fantastic thanks for sharing the valuable insights.
    Digital Marketing Courses in Italy

    ReplyDelete
  34. The Android Custom View: PlayStation Knob - Part 1 is very informative and comprehensive guide thanks for sharing valuable instruction.
    data analyst courses in limerick

    ReplyDelete
  35. Thank you for providing in depth knowledge and insightful tutorial on how to create Android Custom View.
    Adwords marketing

    ReplyDelete
  36. A clear and engaging guide! Part 1 effectively sets up creating the Android Custom View. Thanks for sharing this insightful tutorial!

    How Digital marketing is changing business

    ReplyDelete
  37. This blog helped me level up my Android skills! I'm all set to craft some cool custom knobs for my app now. Thanks for sharing this gem of a tutorial!
    Investment Banking courses in bangalore

    ReplyDelete
  38. Exceptional tutorial on creating a PlayStation Knob Android Custom View! Thanks for the detailed guide and sharing your expertise.

    Investment Banking Industry

    ReplyDelete
  39. The blog post is excellent tutorial on Android Custom View.
    Investment banking training Programs

    ReplyDelete
  40. Your post made me think about things in a whole new light. Thank you Investment banking courses in Chennai

    ReplyDelete

  41. "Exciting start to the PlayStation Knob journey! Your blog's 'Getting Started' section provides a great foundation for what promises to be an interesting project. I'm looking forward to following the development and learning more about the process. The inclusion of images and the option to share on various platforms adds a nice touch of interactivity. Can't wait for the next installment! Happy crafting!"
    Investment banking course details

    ReplyDelete