Lesson 1 – TextView, ImageView, Button

In Eclipse, Choose File, new, android application project, pop up window like this.

Give it a name, if you want to submit app Google Play, package name must not has com.example, so change it to another name, like com.company.mygame.

Delete from second Override to } below return true, screen now like this.

No need to see extends, override, super they are Java keywords.

Double click folder res, layout, activity­_main, screen now like this.

Copy this lines replace in to activity­_main.xml

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >  

    <TextView

        android:id="@+id/tv"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="This is example text"

        android:textColor="#800000"

        android:textSize="20dp" />

</LinearLayout>

File xml use to create user interface.

Right click to project name, Run as, Android Application, choose phone, check to Use same device for future launches, OK.

Back to MainActivity.java, copy to above Override

TextView tv;

We declare a TextView name tv. Press Ctrl+Shift+O to import library.

Copy to below setContentView(R.layout.activity_main);

tv = (TextView)findViewById(R.id.tv);

This line declare textView address in file activity_main.

Copy to below findviewByid.

tv.setText("My text go here");

Save and run.

This code show text in textView, programme ignore text we write in file xml activity_main.

To center text, go to activity­_main.xml, add this line.

android:layout_gravity="center_horizontal"

Right click to res, New, Folder, name it drawable, finish.

Copy an image in to Drawable, name it abc.

In file activity_main, copy these line in to above last line.

<ImageView

            android:id="@+id/img"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_gravity="center_horizontal"          

            android:contentDescription="@null"

            android:src="@drawable/abc" />

Copy to above Override

ImageView im;

Press Ctrl+Shift+O to import library.

Copy to below setContentView(R.layout.activity_main);

im = (ImageView) findViewById(R.id.img);

Run to see result.

Copy to activity_main.xml, below imageView.

<LinearLayout

        android:layout_width="wrap_content"

        android:layout_height="41dp"

        android:layout_gravity="center_horizontal"

        android:layout_marginTop="5dp" >

        <Button

            android:id="@+id/bu1"

            android:layout_width="85dp"

            android:layout_height="40dp"

            android:text="Button"

            android:textColor="#0000cd"

            android:textSize="14sp" />

        <Button

            android:id="@+id/bu2"

            android:layout_width="65dp"

            android:layout_height="40dp"

            android:layout_marginLeft="4dp"

            android:text="Next"

            android:textColor="#0000cd"

            android:textSize="14sp" />

    </LinearLayout>

Copy to above Override

Button b1, b2;

Press Ctrl+Shift+O to import library.

Copy to below setContentView(R.layout.activity_main);

b1 = (Button) findViewById(R.id.bu1);

b2 = (Button) findViewById(R.id.bu2);

Copy continue to below findViewById.

b1.setOnClickListener(new View.OnClickListener() {

               @Override

               public void onClick(View v) {

                     tv.setText("Two birds"); 

               }

          });

Save and run, press button to see text. Button Next show nothing because we didn’t code for it.

Every android app will has same steps as we done here. Create user interface in file xml, declare variable, find address, add code.

If you don’t know what is extends, override, super, just ignore them, no need to see.

Let look at activity_main.xml, put cursor in character l in the line android:layout_marginLeft="4dp" and press Ctrl+Space bar to see hint, change something for more practical.