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

▶
lab 2 activity layout
SMART_READER_LITE
LIVE PREVIEW

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

Aug 22, 2022 524 likes •802 views

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

slide-1
SLIDE 1

Lab 2 – Activity & Layout

KUAN-TING LAI 2020/9/28

slide-2
SLIDE 2

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

slide-3
SLIDE 3

Declare Activity

  • Declare activity in manifest.xml

<manifest ... > <application ... > <activity android:name=".MainActivity" /> ... </application ... > ... </manifest >

slide-4
SLIDE 4

Activity Life Cycle

slide-5
SLIDE 5

Managing the Activity Lifecycle

  • onCreate()
  • Must implement!
  • onStart()
  • Called after onCreate()
  • onResume()
  • APP regains focus
  • onPause()
  • APP loses focus
  • onDestroy()
slide-6
SLIDE 6

Tasks and Back Stack

  • Stack -> last in, first out
slide-7
SLIDE 7

Fragment

  • Introduced in Android 3.0 (API level 11)
  • Support dynamic design on large screen
slide-8
SLIDE 8

Layouts

  • Define the structure of APP UI
  • View – Widgets, like button or text view
  • View Group – LinearLayout or ConstraintLayout
slide-9
SLIDE 9

XML Layout Attributes

slide-10
SLIDE 10

Layout Types

  • Linear layout – Vertical or horizontal
  • Relative layout
  • Web view
slide-11
SLIDE 11

Today’s Lab

  • TextView + ListView
  • Click item to show position and

item name on Text View

Ref: https://androidexample.com/Create_A_Simple_Listview_-_Android_Example/index.php?view=article_discription&aid=65

Top TextView FrameLayout + Bottom ListView

slide-12
SLIDE 12

Create a New Project

  • Create a new project names TextListLayout
  • Use default API 15
  • Select Empty Activity
  • Use default class name “MainActivity”
  • Finish
slide-13
SLIDE 13

Open “res/activity_main.xml”

slide-14
SLIDE 14

Select “Text” to View Code

Select Text

slide-15
SLIDE 15

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>

slide-16
SLIDE 16

Create Top Text View

  • Add FrameLayout, ScrollView, and a TextView

<Fr Fram ameLayou

  • ut

an android id:la :layou

  • ut_wid

idth="match_parent" an android id:la :layou

  • ut_height="0px"

an android id:la :layou

  • ut_weig

ight="1"> <Scr Scrol

  • llV

lVie iew androi

  • id:layout_w

_width="match_parent" androi

  • id:la

layout_h _heig ight="match_parent"> <TextVie iew androi

  • id:id

id="@+i +id/top

  • pTextVie

iew" androi

  • id:layout_width="match_p

_parent" androi

  • id:la

layout_heig ight="wrap_content" androi

  • id:textAppearance="@style

le/TextAppearance.AppCompat.Headli line" " /> </Scr Scrol

  • llV

lVie iew> </ Fr FrameLa Layou

  • ut >
slide-17
SLIDE 17

layout_weight

<Fr Fram ameLayou

  • ut

an android id:la :layou

  • ut_wid

idth="match_parent" an android id:la :layou

  • ut_height="0px"

an android id:la :layou

  • ut_weig

ight="1"> <Scr Scrol

  • llV

lVie iew androi

  • id:layout_w

_width="match_parent" androi

  • id:la

layout_h _heig ight="match_parent"> <TextVie iew androi

  • id:id

id="@+i +id/top

  • pTextVie

iew" androi

  • id:layout_width="match_p

_parent" androi

  • id:la

layout_heig ight="wrap_content" androi

  • id:textAppearance="@style

le/TextAppearance.AppCompat.Headli line" " /> </Scr Scrol

  • llV

lVie iew> </ Fr FrameLa Layou

  • ut >

Layout_weight: Expand and fill all the free space 0px to let layout_weight decide height

slide-18
SLIDE 18

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>

slide-19
SLIDE 19

Gravity

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

slide-20
SLIDE 20

FrameLayout

slide-21
SLIDE 21

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> ….

slide-22
SLIDE 22

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>

slide-23
SLIDE 23

Click “Design” to See the Layout

slide-24
SLIDE 24

Adding Margins

slide-25
SLIDE 25

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); } }

slide-26
SLIDE 26

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); } }); …

slide-27
SLIDE 27

Final Result

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