Lab 2 Activity & Layout KUAN-TING LAI 2020/9/28 Concept of - PowerPoint PPT Presentation

Lab 2 – Activity & Layout KUAN-TING LAI 2020/9/28

Concept of Activities • Activity shows the UI components • One activity, one window (screen) • Enables one app to invoke another app • Use Intent to communicate • An activity can contain multiple fragments https://developer.android.com/guide/components/activities/intro-activities#java

Declare Activity • Declare activity in manifest.xml <manifest ... > <application ... > <activity android:name=".MainActivity" /> ... </application ... > ... </manifest >

Activity Life Cycle

Managing the Activity Lifecycle • onCreate() ◦ Must implement! • onStart() ◦ Called after onCreate() • onResume() ◦ APP regains focus • onPause() ◦ APP loses focus • onDestroy()

Tasks and Back Stack • Stack -> last in, first out

Fragment • Introduced in Android 3.0 (API level 11) • Support dynamic design on large screen

Layouts • Define the structure of APP UI • View – Widgets, like button or text view • View Group – LinearLayout or ConstraintLayout

XML Layout Attributes

Layout Types • Linear layout – Vertical or horizontal • Relative layout • Web view

Top Today’s Lab TextView • TextView + ListView • Click item to show position and item name on Text View FrameLayout + Bottom ListView Ref: https://androidexample.com/Create_A_Simple_Listview_-_Android_Example/index.php?view=article_discription&aid=65

Create a New Project • Create a new project names TextListLayout • Use default API 15 • Select Empty Activity • Use default class name “ MainActivity ” • Finish

Open “res/activity_main.xml”

Select “Text” to View Code Select Text

Modify activity_main.xml (1) • Change from default ConstraintLayout to LinearLayout <Lin Linea earLayout xm xmlns:android id=http://schemas.android id.com/apk/res/android android id:layout_width="match_parent" android id:layout_heigh ght="match_parent" android id:orientation="vertic ical" l" > </Lin Linea earLayout>

Create Top Text View • Add FrameLayout, ScrollView, and a TextView <Fr Fram ameLayou out an android id:la :layou out_wid idth="match_parent" an android id:la :layou out_height="0px" an android id:la :layou out_weig ight="1"> <Scr Scrol ollV lVie iew androi oid:layout_w _width="match_parent" androi oid:la layout_h _heig ight="match_parent"> <TextVie iew androi oid:id id="@+i +id/top opTextVie iew" androi oid:layout_width="match_p _parent" androi oid:la layout_heig ight="wrap_content" androi oid:textAppearance="@style le/TextAppearance.AppCompat.Headli line" " /> </Scr Scrol ollV lVie iew> </ Fr FrameLa Layou out >

layout_weight <Fr Fram ameLayou out 0px to let layout_weight an android id:la :layou out_wid idth="match_parent" decide height android an id:la :layou out_height="0px" an android id:la :layou out_weig ight="1"> Layout_weight: <Scr Scrol ollV lVie iew Expand and fill all androi oid:layout_w _width="match_parent" the free space androi oid:la layout_h _heig ight="match_parent"> <TextVie iew androi oid:id id="@+i +id/top opTextVie iew" androi oid:layout_width="match_p _parent" androi oid:la layout_heig ight="wrap_content" androi oid:textAppearance="@style le/TextAppearance.AppCompat.Headli line" " /> </Scr Scrol ollV lVie iew> </ Fr FrameLa Layou out >

Adding weights to Multiple Views < LinearLayout ... > ... < EditText android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:hint="@string/to" /> < EditText android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="2" android:hint="@string/message" /> ... </ LinearLayout >

Gravity < LinearLayout ... > ... < EditText android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:gravity="top" android:hint="@string/message" /> ... </ LinearLayout >

FrameLayout

Create Bottom ListView • Insert ListView after </FrameLayout> …. <Fr FrameLayout> …. </ </FrameLayout> > <Li ListVie iew an android id:id id="@+id/bottomListV tView" an android id:la layout_height="wrap_content" an android id:la layout_wid idth="match_parent"> </Li ListView> ….

Final activity_main.xml <Lin LinearLayout xm xmlns: s:android="http://sc schemas. s.android.com/apk/res/ s/android" an android:layout_width="match_parent" an android:layout_height="match_parent" an android:orientation="vertical" > <Fr Fram ameLayout an android:layout_width="match_parent" an android:layout_height="0px" an android:layout_weight="1"> <Scr ScrollView an android:l :layout_w _width="match_parent" an android:l :layout_height="match_parent"> <Text xtView an android:id="@+i +id/topText xtView" an android:layout_width="match_parent" an android:layout_height="wrap_c _content" an android:textAppearance="@style/TextAppearance.A .AppCompat.Headline" " /> </Scr ScrollView> </Fr Fram ameLayout> <Lis ListView an android:id="@+id/bottomListView" an android:layout_height="wrap_content" an android:layout_width="match_parent"> </Lis ListView> </Line LinearLayout>

Click “Design” to See the Layout

Adding Margins

Add ListView Reference in MainActivity.java import … public class MainActivity extends AppCompatActivity { ListView listView ; @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout. activity_main ); listView = findViewById(R.id. bottomListView ); String[] values = new String[] { "Android List View" , "Adapter implementation" , "Simple List View In Android" , "Create List View Android" , "Android Example" , "List View Source Code" , "List View Array Adapter" }; ArrayAdapter<String> adapter = new ArrayAdapter<String>( this , android.R.layout. simple_list_item_1 , android.R.id. text1 , values); listView .setAdapter(adapter); } }

Add “ setOnItemClickListener ” … listView .setAdapter(adapter); listView .setOnItemClickListener( new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { int itemPosition = position; String itemValue = (String) listView .getItemAtPosition(position); String posInfo = "Position :" +itemPosition+ " ListItem : " +itemValue; // Show Alert Toast. makeText (getApplicationContext(), posInfo , Toast. LENGTH_LONG ).show(); TextView topView = findViewById(R.id. topTextView ); topView.setText(posInfo); } }); …

Final Result • Click any text in the listView • TextView will display your selection • Toast also show a pop-up message