Add user interactivity

Objectives

1. Obtaining user input from an EditText.
2. Setting text to a TextView from a EditText.

3. Working with View and ViewGroup

4. Changing the visibility of a View

Adding an EditText for text input

1. Drag and drop EditText to the panel.

   <EditText
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
   />
   

2. Style the EditText by adding a hint, changing the text alignment, changing the style to the NameStyle, and setting the input type.

   <EditText
      style="@style/NameStyle"
      android:id="@+id/nickname_edit"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:inputType="textPersonName"
      android:hint="@string/what_is_your_nickname"/>
   

   <string name="what_is_your_nickname">What is your NickName?</string>
   

   <style name="NameStyle">
      <item name="android:layout_marginTop">@dimen/layout_margin</item>
      <item name="android:fontFamily">@font/roboto</item>
      <item name="android:paddingTop">@dimen/small_padding</item>
      <item name="android:textColor">@android:color/black</item>
      <item name="android:textSize">@dimen/text_size</item>
   </style>	
   

3. Adding Button and style it

   <string name="done">Done</string>
   

   <Button
      android:id="@+id/done_button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center_horizontal"
      android:text="@string/done"/>
   

   <Button
      style="@style/Widget.AppCompat.Button.Colored"
      android:id="@+id/done_button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center_horizontal"
      android:layout_marginTop="@dimen/layout_margin"
      android:fontFamily="@font/roboto"
      android:text="@string/done" />
   

   • Widget.AppCompat.Button.Colored changes the button color to the ColorAccent.

   <color name="colorAccent">#76bf5e</color>
   

4. Adding a TextView to display the nickname

   <TextView
      style="@style/NameStyle"
      android:id="@+id/nickname_text"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:textAlignment="center"
      android:visibility="gone"
      android:text="" />
   

5. Adding a click listener to the DONE Button and TextView

   • View.OnClickListener that is defined in View class.

   public static interface View.OnClickListener {
      void onClick(View v);
   }
   

   button.setOnClickListener(object:View.OnClickListener {
      override fun onClick(v:View){
         clickEvent(it)
      }
   })
   // or 
   button.setOnClickListener{
      clickEvent(it)
   }
      
   fun clickEvent(view:View){
      // TODO: ...
   }
   

   <Button
      android:id="@+id/done_button"
      android:text="@string/done"
      ...
      android:onClick="clickEvent"/>
   

   private fun addNickname(view: View) {
      val editText = findViewById<EditText>(R.id.nickname_edit)
      val nicknameTextView = findViewById<TextView>(R.id.nickname_text)
   
      nicknameTextView.text = editText.text
      editText.visibility = View.GONE
      view.visibility = View.GONE
      nicknameTextView.visibility = View.VISIBLE
   
      // Hide keyboard ...
   }
   

   override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContentView(R.layout.activity_main)
      ...
      findViewById<Button>(R.id.done_button).setOnClickListener {
      addNickname(it)
   }
   

   • How to show / hide the soft keyboard

      // Show the keyboard.
      val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
      imm.showSoftInput(editText, 0)
   
      // Hide the keyboard.
      val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
      imm.hideSoftInputFromWindow(view.windowToken, 0)
   

6. Homework

   • What is EditText a subclass of?
     • View
     • LinearLayout
     • TextView (O)
     • Button
   • Which of the following visibility attribute values, if set on a view, makes it so the view is hidden and does not take up any space in the layout?
     • visible
     • invisible
     • gone (O)
     • hide
   • For EditText views, it’s not a good practice to provide hints, because hints clutter the input field. True or false?
     • True
     • False (0)
   • Which one of the following statements is true about Button views?
     • A Button view is a view group.
     • You can only have three Button views per screen.
     • Button views are clickable, and on click, the attached click listener performs an action. (O)
     • Button is an extension of ImageView.