How to Make Android Apps 7
In 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>
how to find conversion_types.xml
It is at the very bottom of the page
What is the difference between match_parent and fill_parent?
They do the same thing, but fill_parent has been deprecated and so it should not be used anymore
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.
You may be right. Oddly I have never had a problem with doing that. I’ll look into it
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.
Sorry, but I’m not sure which lines of code your are specifically talking about.