How to Make Android Apps 7

Android Spinner TutorialIn this tutorial we’ll start making a useful Android unit conversion app. I’ll show you everything this time because I on purpose didn’t pre-plan anything.

I’ll cover relative layouts, grid layouts, array resources, Array Adapters, Spinners, and more. In the next video I’ll finish the entire app. Like always all the code follows the video below. If it is still the month of July 2014, don’t forget to sign up to win a Samsung Galaxy Note 3 in my current contest.

If you like videos like this it helps to share it on Google Plus with a click here

Code From the Video

Use Case Description

SIMPLE ACTIONS

1. The user enters a number they want converted 
into an EditText

2. They change the spinner to the unit of 
measure to convert from

3. The other conversion types all show their
measurement version of that unit amount

1. Create the layout in 
activity_main.xml

a. Use relative layout for for 
label "Convert From", Edittext and
Spinner

b. Use GridLayout for bottom that
contains 2 columns and 6 rows

c. Make gridlayout a blue color

d. Use the units teaspoons, tablespoons,
cup, ounces, pints, quarts, gallons,
pounds, milliliter, liter, milligram
kilograms

2. Setup MainActivity

a. Create Spinner, EditText, TextViews

b. In onCreate

I. add items to the spinner

i. Create an ArrayAdapter using String array resource 
(Make strings.xml)

ii. Define the layout to use with the Spinner

iii. Connect the Adapter to the Spinner

II. Add a listener to the Spinner

i. Use setOnItemSelectedListener for Spinner

ii. NOTE : Maybe check if I am going to use a base class for unit 
conversion

III. Get the value in the EditText

IV. Initialize the TextViews

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    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.androidlayouts2.app.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="@string/convert_from_text"
        android:id="@+id/convert_from_text_view"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginRight="20dp" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/amount_text_view"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/convert_from_text_view"
        android:inputType="numberDecimal"
        android:text="1.0"/>

    <Spinner
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/unit_type_spinner"
        android:layout_below="@+id/amount_text_view"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"/>


    <!-- You need the min Android version set to 14 in build.gradle -->
    <GridLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@+id/unit_type_spinner"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:columnCount="2"
        android:rowCount="6"
        android:orientation="horizontal"
        android:background="#ffdae6ff"
        android:padding="15dp">

        <TextView
            android:id="@+id/tsp_text_view"
            android:text="@string/default_teaspoon_value"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left|top"
            android:layout_marginRight="30dp"
            android:layout_marginBottom="30dp" />

        <TextView
            android:id="@+id/cup_text_view"
            android:text=".0208 cup"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_gravity="left|top" />

        <TextView
            android:id="@+id/tbs_text_view"
            android:text=".3333 tbs"
            android:layout_gravity="left|top"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_marginRight="30dp"
            android:layout_marginBottom="30dp" />

        <TextView
            android:id="@+id/oz_text_view"
            android:text=".1666 oz"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_gravity="left|top" />

        <TextView
            android:id="@+id/kg_text_view"
            android:text=".0057 kg"
            android:layout_gravity="left|top"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_marginRight="30dp"
            android:layout_marginBottom="30dp" />

        <TextView
            android:id="@+id/quart_text_view"
            android:text=".0052 quart"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_gravity="left|top" />

        <TextView
            android:id="@+id/gallon_text_view"
            android:text=".0013 gallon"
            android:layout_gravity="left|top"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_marginRight="30dp"
            android:layout_marginBottom="30dp" />

        <TextView
            android:id="@+id/pound_text_view"
            android:text=".0125 pound"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_gravity="left|top" />

        <TextView
            android:id="@+id/ml_text_view"
            android:text="4.9289 ml"
            android:layout_gravity="left|top"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_marginRight="30dp"
            android:layout_marginBottom="30dp" />

        <TextView
            android:id="@+id/liter_text_view"
            android:text=".0049 liter"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_gravity="left|top" />

        <TextView
            android:id="@+id/mg_text_view"
            android:text="5687.5000 mg"
            android:layout_gravity="left|top"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_marginRight="30dp"
            android:layout_marginBottom="15dp" />

        <TextView
            android:id="@+id/pint_text_view"
            android:text=".0104 pint"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_gravity="left|top" />


    </GridLayout>

    <!-- A Table Layout arranges widgets into rows and columns and is
    available if you must use Android versions sub 14 -->

</RelativeLayout>

MainActivity.java

package com.newthinktank.androidlayouts2.app;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.util.Log;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.EditText;
import android.widget.Spinner;
import android.widget.TextView;
import android.widget.Toast;


public class MainActivity extends ActionBarActivity {

    private Spinner unitTypeSpinner;

    private EditText amountTextView;

    TextView teaspoonTextView, tablespoonTextView, cupTextView, ounceTextView,
            pintTextView, quartTextView, gallonTextView, poundTextView,
            milliliterTextView, literTextView, milligramTextView, kilogramTextView;

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

        // Fills the spinner with the unit options
        addItemsToUnitTypeSpinner();

        // Add listener to the Spinner
        addListenerToUnitTypeSpinner();

        // Get a reference to the edit text view to retrieve the amount of the unit type
        amountTextView = (EditText) findViewById(R.id.amount_text_view);

        initializeTextViews();

    }

    public void initializeTextViews(){

        teaspoonTextView = (TextView) findViewById(R.id.tsp_text_view);
        tablespoonTextView = (TextView) findViewById(R.id.tbs_text_view);
        cupTextView = (TextView) findViewById(R.id.cup_text_view);
        ounceTextView = (TextView) findViewById(R.id.oz_text_view);
        pintTextView = (TextView) findViewById(R.id.pint_text_view);
        quartTextView = (TextView) findViewById(R.id.quart_text_view);
        gallonTextView = (TextView) findViewById(R.id.gallon_text_view);
        poundTextView = (TextView) findViewById(R.id.pound_text_view);
        milliliterTextView = (TextView) findViewById(R.id.ml_text_view);
        literTextView = (TextView) findViewById(R.id.liter_text_view);
        milligramTextView = (TextView) findViewById(R.id.mg_text_view);
        kilogramTextView = (TextView) findViewById(R.id.kg_text_view);

    }

    public void addItemsToUnitTypeSpinner(){

        // Get a reference to the spinner
        unitTypeSpinner = (Spinner) findViewById(R.id.unit_type_spinner);

        // Create an ArrayAdapter using the string array and a default spinner layout
        ArrayAdapter<CharSequence> unitTypeSpinnerAdapter = ArrayAdapter.createFromResource(this,
                R.array.conversion_types, android.R.layout.simple_spinner_item);

        // Specify the layout to use when the list of choices appears
        unitTypeSpinnerAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

        // Apply the adapter to the spinner
        unitTypeSpinner.setAdapter(unitTypeSpinnerAdapter);

    }

    public void addListenerToUnitTypeSpinner() {
        unitTypeSpinner = (Spinner) findViewById(R.id.unit_type_spinner);
        unitTypeSpinner.setOnItemSelectedListener(new OnItemSelectedListener() {
            public void onItemSelected(AdapterView<?> parent, View arg1, int pos, long arg3)
            {
                // Get the item selected in the Spinner
                String itemSelectedInSpinner = parent.getItemAtPosition(pos).toString();

                // Verify if I'm converting from teaspoon so that I use the right
                // conversion algorithm
                checkIfConvertingFromTsp(itemSelectedInSpinner);

            }
            public void onNothingSelected(AdapterView<?> arg0)
            {
                // TODO maybe add something here later
            }
        });
    }

conversion_types.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="conversion_types">
        <item>teaspoon</item>
        <item>tablespoon</item>
        <item>cup</item>
        <item>ounce</item>
        <item>pint</item>
        <item>quart</item>
        <item>gallon</item>
        <item>pound</item>
        <item>milliliter</item>
        <item>liter</item>
        <item>milligram</item>
        <item>kilogram</item>
    </string-array>
</resources>

8 Responses to “How to Make Android Apps 7”

  1. how to find conversion_types.xml

  2. Nikolay says:

    What is the difference between match_parent and fill_parent?

  3. Martshal Kohn says:

    Just a quick note. I think the value of
    android:layout_toRightOf=”@+id/convert_from_text_view”

    that is in the <EditText should actually be
    android:layout_toRightOf="@id/convert_from_text_view"

    (without the +), because it's already listed as
    android:layout_toRightOf="@+id/convert_from_text_view"
    in the definition.

  4. Kevin Kesler says:

    i have spent an exhaustive amount of time on line 50(54) id will not populate. if i type it manually the text color stays black and underlined red.

Leave a Reply

Your email address will not be published.

Google+