Lesson 2 How to exit your application and add a button, position it on the screen and set localizable caption on it
Another mysterious question I hit was "How do I exit my application?"
Surprisingly there was almost no information on that subject. Originally surprising, but not for long. The secret is that normally you don't exit from your application the way you do in other languages like quit() in Python or return 0; in C++. The user just hit back button or hides your application by pressing Android '⭘' button.
But what if you need to exit programmatically?
Let's add to our newly created application a button (you should view activity_main.xml as shown):
First, as shown in "Step 1", drag the button from Palette to the Component Tree. Most likely it will show up at the top left corner of the screen. To position it you need to add Constraints that will become visible in attributes. There are two ways to do that.
Notice those wiggly lines going describing the position constraints. The prevent your button from taking all the space along with layout width and height set to wrap content. Try to set them to 0 and your button will take all the space available. And normally you would not like that.
In the UI design view (notice that "Design" picked in the right top corner of the picture)
Click on the button and you will see circles on the top, bottom, left and right. Follow Step 2 arrow and drag those circles to upper, lower, left and right boundaries you want. You will get something similar to the picture. Now you button is positioned.
Notice that you can drag those edge circles to the edges of the phone screen or other components. For example, the top constraint is connected to the bottom of already existing TextView with "Hello, World!"
Adding button in XML source
The file activity_main.xml is XML, so you can edit it manually. See that "Design" tab in the right top corner of the picture? Click the "Code" tab on the left of it, and you will see XML source:
1 <?xml version="1.0" encoding="utf-8"?>
2 <androidx.constraintlayout.widget.ConstraintLayout …
7 ...>
8
9 <TextView
10 android:id="@+id/textView"
11 ...
17 ... />
18
19 <Button
20 android:id="@+id/button"
21 android:layout_width="wrap_content"
22 android:layout_height="wrap_content"
23 android:text="Button"
24 app:layout_constraintBottom_toBottomOf="parent"
25 app:layout_constraintEnd_toEndOf="parent"
26 app:layout_constraintStart_toStartOf="parent"
27 app:layout_constraintTop_toBottomOf="@+id/textView" />
28
29 </androidx.constraintlayout.widget.ConstraintLayout>
Highlighted is what was added when you added a button in the design. You could do that manually, if you would like to.
Notice that the enclosing component is always referred to as parent, but you can also refer to other components. Just use their id as you see in this code in red.
And what about those wiggly lines? That's layout width and height set to "wrap_content" (highlighted in purple). Set layout_width to "0dp"
android:layout_width="0dp"
and you button will widen to the whole screen from left to right:
Again, normally you would not want that.
Not using absolute lengths and sizes
Notice also, that normally you would not want to set fixed lengths and sizes like "0dp" at all unless in another component that is already automatically scaled. Phones and tablets vary a lot in sizes. So when using fixed sizes it's nearly impossible to make your application look well on all screens.
String as resources
Look at the first picture. Do you see in the Component Tree next to the button a yellow triangle with an exclamation mark? And a similar yellow triangle at the bottom. You will be told that your button has a hardcoded text (caption) and a "Fix" button.
In XML source you will see a similar warning before line 23 with android:text attribute. Add if you click on it you will get a proposal to fix it. Let's try it, and see what will happen.
In this dialog you can name the string to refer to, see the folder and the file it will be put into.
Once you press "Ok", your line 23 in the activity_main.xml file will now look like:
android:text="@string/button"
What is that "@string/button"? Go to the strings.xml file and see:
<resources>
<string name="app_name">Simple1</string>
<string name="button">Button</string>
</resources>
Now you text on the button will come from the XML file. Why is this important? Simple. You can have different string.xml file for different languages, and so your application will be able to change the language.
Finally, how to exit the application?
Let's get to how we exit the application. After all, we added a button to do exactly that. Let's change the caption on it, since "Button" does not give an idea that it will make the application quit. Go to the same string.xml file and change that line to:
<string name="button">Quit</string>
Go to MainActivity.kt and add:
package net.galiel.simple1
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlin.system.exitProcess
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}
public fun Quit() {
this@MainActivity.finish()
exitProcess(0)
}
}
Notice that you don't have to remember what to import in most cases. Once you add a method Quit() with a call to exitProcess(), it will be highlighted in red, and a red bulb that marks that line will offer you a choice. If you pick "Import" then the proper import line will be added to the header of the file.
And then:
Return to the activity_main.xml.
Select button.
On the right scroll to "Common Attributes"
Find there "onClick" and set it to Quit (without parenthesis).
That's it, you are done. Build and run. Click on the button. See the application quitting.
One thing though. You may have noticed a message at the bottom "Using Android:onCLick" in older version of the platform is broken."
Sure, visual design only goes so far. If you want to support older versions of Android, you'll need to do that in the code. But that's for the next time.
Comments
Post a Comment