Making a Switch On/Off Button

In this tutorial, we will make switch on/off button.

  • Start a new project. Project name is up to you, I opened it as SwitchOnOff. If you forget how to open new project in android studio, follow this.

 

  • First of all, you need to define all resources which are used by application.
    Open your res/values/colors.xml file and add below color items. We will use these colors for button backgrounds and text color.

    Open your res/values/strings.xml file and add below string items.

    Create two drawable resource files in res/drawable folder by Right Click->New on it. File names will be ‘on background‘ and ‘off_background‘. These drawables are for backgrounds of on and off buttons.
    Write below to on_background.xml

    Then write below to off_background.xml
  • At this point, our final project hieararchy must be like below.
    Screen Shot 2015-10-19 at 16.11.41

 

  • Right now, we have all necessary resources. Lets design the screen. Open your res/layout/activity_main.xml file and write below

    Note

    I need to explain some features on activity_main.xml

    We use android:weight for children elements inside a LinearLayout.
    For example, observe below layout code.

    If LinearLayout orientation is horizontal and weight feature is used for children elements, it means LinearLayout will be splitted in spesific ratio horizontally. You can arrange ratio with weight feature. You must set width of child elements to 0dp. It means, this calculation will be made later. For above example, result will be like below.
    weight_feature

    Of course, you can make this in vertically version. Observe below.

  • You can look at how it looks with switching to design mode
    Screen Shot 2015-10-19 at 16.05.25

 

  • So we have everything for design lets go to java side, we need add functionality to our buttons. We assume our textviews as buttons. Open your MainActivity.javaBind TextViews

     

     

  • Add below functions. These functions are used when on or off button is clicked.

     

  • Our MainActivity must like below.

     

  • So we need to call switchOn and switchOff functions when buttons are clicked. To do this, we need set click listeners to buttons. At this point, you can turn your activity into a clicklistener.

    After implementing View.ClickListener interface you need to override OnClick method, in this way you can listen if specified views are clicked.

     

  •  Our MainActivity must like below.

     

  • We defined what will going on if buttons are clicked but we have not set click listeners to buttons yet. Below is what you must do after binding buttons.

     

  • Our MainActivity must like below.

     

  • We need to start with an initial state. Its up to you. You can start the application either on state or off state. I choose on state. You must call switchOn or switchOff method at the end of the onCreate method.

     

    Thats all. You can run the application. See you next tutorial.

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

     

Bir Cevap Yazın