How to Make Android Apps 2

How to Make Android Apps 2In this part of my how to make Android apps tutorial I will cover the following topics : strings.xml, Linear Layouts, Toasts, Event Handling, Excepting User Input, Translation, EditText, Button and a whole bunch of other topics.

If you missed part 1 of this series, or if you need to install Android Studio I have you covered with these links. For translation you’ll need the ISO 639-1 Codes as well. All of the code from the video can be found below.

If you like videos like this, it helps me if you share on Google Plus with a click here

Code From the Video

MainActivity.java

package com.newthinktank.messingaround.app;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;


public class MainActivity extends ActionBarActivity {

    // 17. Create the components here that you want to use in your code

    private Button answerYesButton, answerNoButton;
    private EditText usersNameEditText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 18. Initialize all of your components in the code here

        answerYesButton = (Button) findViewById(R.id.answer_yes_button);
        answerNoButton = (Button) findViewById(R.id.answer_no_button);
        usersNameEditText = (EditText) findViewById(R.id.users_name_edit_text);
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    public void onYesButtonClick(View view) {

        String usersName = String.valueOf(usersNameEditText.getText());

        String yourYesResponse = "That is great " + usersName;

        // 19. We display a short popup or Toast when the user clicks
        // LENGTH_SHORT or LENGTH_LONG defines how long the toast shows

        Toast.makeText(this, yourYesResponse, Toast.LENGTH_SHORT).show();
    }

    public void onNoButtonClick(View view) {

        String usersName = String.valueOf(usersNameEditText.getText());

        String yourNoResponse = "To bad " + usersName;

        Toast.makeText(this, yourNoResponse, Toast.LENGTH_SHORT).show();

    }
}

activity_main.xml

<!-- 1. When you change to a linear layout add orientation -->

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="com.newthinktank.messingaround.app.MainActivity"
    android:gravity="center|top">

    <!-- 4. Setting gravity defines where on the screen the layout aligns to (top, bottom, right,
    left, center-->

    <!-- 3. layout_weight considers the amount of space needed for each element and divides up the
    space. Since 1 widget is so much bigger then the other 2 this causes problems. If we change
    the text in the second to "Goodbye you crazy android" you see that the screen divides up well.
    (1/3rd for each) -->

    <!--
    <TextView
        android:text="@string/hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" />
        -->

    <!-- 2. wrap_content causes the widget to become shorter or longer depending on whether the content
     is longer than the screen width. If it is longer a newline is added. If it does take up
     all the space horizontally and a new widget is added it won't show on the screen.

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Goodbye you crazy android app it has been nice knowing you"
        android:layout_weight="1"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="More Random Text"
        android:layout_weight="1" />
    -->

    <!-- 5. We can define the height, width, gravity, background color, background image,
    whether it is clickable or not, styling and more.  -->

    <!-- 6. We can make these buttons fit by changing their font size (sp : Scale Independent of
    Pixels : scaled pixels based on preferred font size -->

    <!-- 7. Padding increases the size of the button : padding, paddingBottom, paddingTop,
     paddingLeft, paddingRight (paddingEnd & paddingStart change depending upon letter direction
     -->

    <!-- 8. Margin is padding on that surrounds the border : layout_margin, layout_marginLeft
    layout_marginRight, layout_marginTop, layout_marginBottom -->

    <!-- 9. If we use match_parent with the first widget it will push the rest off the screen. If
    we use match_parent with the last component it will take up the space not needed by the
     previous widgets. -->

    <!--
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1st Button"
        android:textSize="15sp"
        android:padding="15dp"
        android:layout_weight="1"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2nd Button"
        android:textSize="15sp"
        android:padding="15dp"
        android:layout_weight="3"/>

        -->

    <!-- 10. layout_weight can be used to define how much of the extra space should be allocated
     to a widget.

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3rd Button"
        android:textSize="15sp"
        android:padding="15dp"
        android:layout_weight="2"/>

        -->

    <!-- 11. You can define multiple gravity options for our layout like this
     android:gravity="center|top" -->

    <!--
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Are you Happy?"
        android:textSize="20sp"/>
        -->

    <!-- 12. Let's add a Nested Linear Layout with buttons in it -->

    <!-- 13. You can add a hint if the user may be confused by the component -->

    <!--

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Yes"
            android:hint="Pick Me" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="No"
            android:hint="No Pick Me" />

        </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

    -->

        <!-- 14. We'll also add an editable text field so we can interact. We'll also be
         able to define the type of input expected so that we can automatically capitalize
         among other things.-->

    <!--
        <EditText
            android:layout_width="200dp"
            android:layout_height="50dp"
            android:hint="@string/users_name_edit_text"
            android:inputType="textPersonName"/>

        </LinearLayout>

    -->

    <!-- 15. We can define multiple strings.xml files for different languages
        ( Highlight the text -> Click Light bulb -> Extract string resource )
        Then create a directory in /res named values-(2 digit country code)
        and put a file named strings.xml in it with the translation
        http://en.wikipedia.org/wiki/List_of_ISO_639-1_codes -->

    <TextView
        android:id="@+id/happy_question"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/happy_question"
        android:textSize="20sp"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <!-- 16. We can define a function to execute when the user clicks a button with
        android:onClick="functionNameHere" then we have to create that function in
        MainActivity.java ( Highlight the function name here and click the lightbulb
        Create functionNameHere in MainActivity ) Then give everything you want to be able to
        use in code an id. -->

        <Button
            android:id="@+id/answer_yes_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/answer_yes"
            android:hint="@string/hint_pick_me"
            android:onClick="onYesButtonClick"/>

        <Button
            android:id="@+id/answer_no_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/answer_no"
            android:hint="@string/hint_no_pick_me"
            android:onClick="onNoButtonClick"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <EditText
            android:id="@+id/users_name_edit_text"
            android:layout_width="200dp"
            android:layout_height="50dp"
            android:hint="@string/users_name_edit_text"
            android:inputType="textPersonName"/>

    </LinearLayout>

</LinearLayout>

strings.xml Default

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">MessingAround</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
    <string name="users_name_edit_text">Your Name</string>
    <string name="happy_question">Are You Happy?</string>
    <string name="answer_yes_button">Yes</string>
    <string name="answer_no_button">No</string>

</resources>

strings.xml Spanish

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Perder el tiempo</string>
    <string name="hello_world">¡Hola, mundo</string>
    <string name="action_settings">Configuración</string>
    <string name="users_name_edit_text">Su nombre</string>
    <string name="happy_question">¿Eres feliz?</string>
    <string name="answer_yes">Sí</string>
    <string name="answer_no">No</string>
    <string name="hint_pick_me">Llevarnos</string>
    <string name="hint_no_pick_me">No, me recogiera</string>

</resources>

8 Responses to “How to Make Android Apps 2”

  1. Roni says:

    Hi Dr Derek,
    Can I use java 1.8?
    how to make canvas?

    Thanks

  2. Frank J. says:

    By the way: be careful when you try to create strings.xml file. I recently managed to overwrite mine, when I rightclick on values-en and told him to create a new value-xml.
    🙁
    So make a backup before trying to create strings in other languages.

  3. mike keur says:

    Thanks for your tutorials. I rely on them heavily to learn. I am having a problem with the Android Studio. If I create a project, it uses Activity. If I change it to ActionBarActivity and try to import this it doesnt find it until I add compile ‘com.android.support:appcompat-v7:+’ to the gradle dependencies. This fixes the ActionBar import, but leads to a new problem I cant solve, the compile gives the following.
    Error:Execution failed for task ‘:app:processDebugManifest’.
    > Manifest merger failed : uses-sdk:minSdkVersion 15 cannot be smaller than version L declared in library com.android.support:appcompat-v7:21.0.0-rc1

    I would appreciate your help. I see that the Android studio has a lot of nice features, but so far I havent been able to get any of your
    projects to compile.

    Thank you

    Mike Keur
    mike.keur@gmail.com

    • Derek Banas says:

      You’re very welcome 🙂 When you start a new app select ActionBarActivity as the type of app you want to make in the starting dialog boxes. This will avoid a bunch of strange errors.

  4. Moj says:

    Hi Derek,
    Great tutorials as always. I’m staring on Android series and got to this one so far. But along the way I think I missed the section where you describe how to export our apps to the phone. There are posts out there on how to export APK, but rather involved.
    I was wondering if you have covered it using the Android Studio and I just missed it or in one upcoming videos?

    Thanks
    Moj

Leave a Reply

Your email address will not be published.

Google+