First Application_Part1 (GUI)

I though It'd be good to start developing a couple of simple application to see how this whole thing works...so First application will be a simple calculator and it's gonna look like this :




A Simple Calculator which will also be able to Save the results of calculations(SR Button) and users will be able to view what have been stored(Show Saved Data Button).
Android has provided a XML_Based Mechanism for designing GUI, you define your XML file and then bind it to an activity, that activity will interpret XML files into android components.
in this case our XML will be like this :

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">


<TextView android:id="@+id/note"
android:maxLines="1"
android:minLines="1"
android:layout_marginTop="2dip"
android:layout_width="wrap_content"
android:ems="25"
android:layout_height="wrap_content"
android:autoText="true"
android:capitalize="sentences"
android:singleLine="true"
android:cursorVisible="true"
android:layout_gravity="center_vertical|center_horizontal|center"
android:layout_margin="10px"
android:padding="5px"
android:background="@color/white"
android:textColor="@color/black"/>


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal|center">


<Button android:id="@+id/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/number_One"
android:layout_gravity="center_horizontal"
android:onClick="oneClicked"
android:minWidth="70px"/>


<Button android:id="@+id/two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/number_Two"
android:layout_gravity="center_horizontal"
android:onClick="twoClicked"
android:minWidth="70px"/>

<Button android:id="@+id/three"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/number_Three"
android:layout_gravity="center_horizontal"
android:onClick="threeClicked"
android:minWidth="70px"/>


<Button android:id="@+id/devide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/devide_sign"
android:layout_gravity="center_horizontal"
android:minWidth="70px"/>


</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal|center">


<Button android:id="@+id/four"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/number_Four"
android:layout_gravity="center_horizontal"
android:onClick="fourClicked"
android:minWidth="70px"/>


<Button android:id="@+id/five"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/number_Five"
android:layout_gravity="center_horizontal"
android:onClick="fiveClicked"
android:minWidth="70px"/>

<Button android:id="@+id/six"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/number_Six"
android:layout_gravity="center_horizontal"
android:onClick="sixClicked"
android:minWidth="70px"/>


<Button android:id="@+id/multiply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/multiply_sign"
android:layout_gravity="center_horizontal"
android:minWidth="70px"/>


</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal|center">


<Button android:id="@+id/seven"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/number_Seven"
android:layout_gravity="center_horizontal"
android:onClick="sevenClicked"
android:minWidth="70px"/>


<Button android:id="@+id/eight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/number_Eight"
android:layout_gravity="center_horizontal"
android:onClick="eightClicked"
android:minWidth="70px"/>

<Button android:id="@+id/nine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/number_Nine"
android:layout_gravity="center_horizontal"
android:onClick="nineClicked"
android:minWidth="70px"/>


<Button android:id="@+id/subtract"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/subtract_sign"
android:layout_gravity="center_horizontal"
android:minWidth="70px"/>

</LinearLayout>


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal|center">


<Button android:id="@+id/zero"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/number_Zero"
android:layout_gravity="center_horizontal"
android:onClick="zeroClicked"
android:minWidth="70px"/>


<Button android:id="@+id/save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/save_btn"
android:layout_gravity="center_horizontal"
android:minWidth="70px"/>


<Button android:id="@+id/equalSign"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/equal_sign"
android:layout_gravity="center_horizontal"
android:minWidth="70px"/>


<Button android:id="@+id/addition"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/addition_sign"
android:layout_gravity="center_horizontal"
android:minWidth="70px"/>


</LinearLayout>

<Button android:id="@+id/clear"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/clear"
android:layout_gravity="center_horizontal"
android:minWidth="70px"
android:layout_marginLeft="18px"
android:layout_marginRight="18px" />

<Button android:id="@+id/show"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/show"
android:layout_gravity="center_horizontal"
android:minWidth="70px"
android:layout_marginLeft="18px"
android:layout_marginRight="18px" />


</LinearLayout>


When user presses SR button a dialog should get opened asking for a title with which the result of calculation will be saved. This dialog will look like this :




We would need an Layout file like this for what we see above:

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:minWidth="300px">



<TextView android:text="@string/empty" android:id="@+id/ResultBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="top"
android:layout_margin="15px"
android:padding="5px"/>



<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="15px">

<TextView android:text="@string/Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="top"/>


<EditText android:id="@+id/content"
android:maxLines="5"
android:minLines="5"
android:minWidth="200px"
android:layout_width="fill_parent"
android:ems="30"
android:layout_height="wrap_content"
android:autoText="true"
android:cursorVisible="true"/>


</LinearLayout>

<Button android:id="@+id/SaveBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/saveBtn"
android:layout_gravity="center_horizontal"
android:minWidth="120px"/>

</LinearLayout>


When user presses 'Show Saved Data' we will need a simple dialog box just to show all values that have been saved, therefore something like this would be good enough :


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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:minWidth="300px">



<TextView android:id="@+id/viewBox"
android:maxLines="15"
android:minLines="5"
android:layout_marginTop="2dip"
android:layout_width="wrap_content"
android:ems="25"
android:layout_height="wrap_content"
android:autoText="true"
android:capitalize="sentences"
android:scrollHorizontally="true"/>




</LinearLayout>


Remember that all values with '@String' prefix need to be defined in a resource file named string.xml which apparently must be placed in 'values' directory of your project (layouts files must go under 'layout' directory as well).