GDG Tekirdag/Sivas Devfest 2015 – CustomView Workshop

Hello, this tutorial shows what we have done at ‘Making Custom Views on Android’ Workshop of GDG Tekirdag/Sivas Devfest 2015. In this workshop, we try to make a custom view which is on off button and make it useable with just a few layout codes. Below video shows final application at the end of workshop.

Before we start, you need to know this tutorial is not for beginners. So it may be complicated for newbies.

  1. Starting New Project
  2. Creating New Android Library Module
  3. Creating Custom View Class
  4. Deciding Customizable Properties
  5. Declaring That Properties
  6. Getting and Setting Properties
  7. Creating an Interface to Listen On-Off State Changes
  8. Running The Project

1. Starting New Project

  • Open your Android Studio and ‘Start New Android Studio Project’.
  • Project name is up to you. I gave ‘CustomView’ to it and make your minsdk 15.

2. Creating New Android Library Module

  • We have to develop this custom view as a library module. Making module helps compatibility and increases usability. So right click on your project root folder and click New -> Module.
    Screen Shot 2015-12-04 at 14.17.50

 

  • Choose ‘Android Library’ and click ‘Next’
    Screen Shot 2015-12-04 at 14.18.18

 

  • Name is up to you. I gave ‘OnOffSelector’. Click ‘Finish’
    Screen Shot 2015-12-04 at 14.18.46

 

  • We have created a library module. Import onoffselector module in your application module. Open your build.gradle of your app module and add dependency like below.
    Screen Shot 2015-12-04 at 15.01.26

3. Creating Custom View Class

  • As you know, every view element is a java class in Android. So we need to create a class of our custom view in onoffselector module. Right click on java package of onoffselector and click ‘New->Java Class’. Put ‘OnOffSelector’ as name.
    Screen Shot 2015-12-04 at 14.44.30
    Screen Shot 2015-12-04 at 14.48.28

 

  • We have two textviews side by side in our custom view. So we need a linearlayout which has that textivews and its orientation should be horizontal. Open OnOffSelector class. It should extend from LinearLayout. Implement public constructor methods like below.

 

  • We can use our OnOffSelector view in layout file right now. Open your res/layout/activity_main.xml file and declare it like below.

     

4. Deciding Customizable Properties

  • Our OnOffSelector has two textviews. Their background colors, texts, paddings should be changeable to be mostly customizable. Lets decide properties of our custom view.customizable_properties1
    customizable_properties2

5. Declaring That Properties

  • Lets declare these properties. You need to create an attrs.xml in res/values folder of onoffselector module. Right click and go ‘New->Values resource file’ like below.
    Screen Shot 2015-12-04 at 19.38.48

 

  • Open your attrs.xml file and declare properties like below.

 

  • We can use these properties right now. Open your res/layout/activity_main.xml file and add them to your custom view like below. You need to use them with ‘custom’ namespace. So you should declare it before using.

 

  • We declared properties and use them but didn’t apply to our custom view. So we need to get these attributes and set in OnOffSelector class.

6. Getting and Setting Properties

  • Open your OnOffSelector class and get your attributes like below.

 

  • We got attributes. Lets apply them.

 

  • Everything is ready for visual, next move is adding functionality. When on button or off button is clicked, transparencies and texts should change. We need two methods to do this.

 

  • At the end of setProperties() method, we can turn on or turn off depends on INITIAL_STATE variable. So your OnOffSelector class should be like below.

 

  • Set click listeners for on – off textviews. Add below code at the end of setProperties() method.

 

  • Run the project. You can click on and off buttons and state should change when buttons clicked.

7. Creating and Interface to Listen On-Off State Changes

  • When developers use your OnOffSelector view, they want to be noticed of on – off state changes. So you can provide an interface for it.

 

  • Open your OnOffSelector class and declare an interface like below.

 

  • Define a reference and its setter to hold stateChangeListener which is sent by developer.

 

  • When turn on, send ‘1’ otherwise send ‘0’ to onStateChange

 

  • Your OnOffSelector class should be like below.

 

  • Open your MainActivity and set a StateChangeListener to your OnOffSelector view.

     

8. Running The Project

Your custom view is completely ready. Run the project and try it.

download_source_icon Download Source Code
If you don’t know how to open an existing Android Studio Project, follow this tutorial.

2 responses on “GDG Tekirdag/Sivas Devfest 2015 – CustomView Workshop

  1. Orçun

    Teşekkürler.

  2. Mehmet

    Very good, tanks.

Bir Cevap Yazın