Android Developer Fundamentals V2 User Interaction Lesson 4

4.1 Buttons and clickable images

Button & ImageButton View that responds to tapping (clicking) or pressing Usually text or visuals indicate what will happen when tapped State: normal, focused, disabled, pressed, on/off ImageButton only shows image

Button image assets Right-click app/res/drawable Choose New > Image Asset Choose Action Bar and Tab Items from drop down menu Click the Clipart: image (the Android logo) Experiment: Choose New > Vector Asset

Responding to button taps In your code: Use OnClickListener event listener. In XML: use android:onClick attribute in the XML layout: <Button android:id="@+id/button_send" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_send" android:onClick="sendMessage" /> android:onClick A click event occurs when the user taps or clicks a button, or an image used as a button. The object notifies an event listener called OnClickListener, which is an interface in the View class. You can use the listener to respond to a click event. Android Studio provides a shortcut for setting up an OnClickListener for the clickable object in your Activity code, and for assigning a callback method: use the android:onClick attribute with the clickable object’s element in the XML layout. For example: <Button android:id="@+id/button_send" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_send" android:onClick="sendMessage" /> In this case, when a user clicks the button, the Android system calls the Activity’s sendMessage() method.

Setting listener with onClick callback Button button = findViewById(R.id.button); button.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { // Do something in response to button click } });

Clickable images

ImageView ImageView with android:onClick attribute Image for ImageView in app>src>main>res>drawable folder in project

Responding to ImageView taps In your code: Use OnClickListener event listener. In XML: use android:onClick attribute in the XML layout: <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/donut_circle" android:onClick="orderDonut"/> android:onClick A click event occurs when the user taps or clicks a button, or an image used as a button. The object notifies an event listener called OnClickListener, which is an interface in the View class. You can use the listener to respond to a click event. Android Studio provides a shortcut for setting up an OnClickListener for the clickable object in your Activity code, and for assigning a callback method: use the android:onClick attribute with the clickable object’s element in the XML layout. For example: <Button android:id="@+id/button_send" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_send" android:onClick="sendMessage" /> In this case, when a user clicks the button, the Android system calls the Activity’s sendMessage() method.

Dialogs

Dialog A dialog is a small window that prompts the user to make a decision or enter additional information. A dialog does not fill the screen and is normally used for modal events that require users to take an action before they can proceed.

AlertDialog The AlertDialog class allows you to build a variety of dialog designs and is often the only dialog class you'll need. AlertDialog dialog; AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.setTitle("Enter Job"); EditText input = (EditText) new EditText(this); builder.setView(input);

AlertDialog builder.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which){ dialog.dismiss(); String jobName = input.getText().toString(); todolistAdapter.add(jobName); input.setText(""); } }); builder.setNegativeButton(android.R.string.cancel,new DialogInterface.OnClickListener(){

AlertDialog dialog=builder.create(); dialog.show();

ListView

ListView ListView is a view group that displays a list of scrollable items. The list items are automatically inserted to the list using an Adapter that pulls content from a source such as an array or database query.

ListView private ArrayList<String> todolist; private ArrayAdapter<String> todolistAdapter; todolist=new ArrayList(); todolist.add("AAA"); todolist.add("BBBB"); todolistAdapter =new ArrayAdapter<String> (this, R.layout.simplerow, todolist); list= findViewById(R.id._list1); list.setAdapter(todolistAdapter); todolistAdapter.add( "Eris" );

ListView We need to Create a layout with name simplerow.xml Simplerow is a layout that determines how items should be appear in the LstView It can be a Simple Text View <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/rowTextView" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="itemclicked" android:padding="10dp" android:textSize="16sp"></TextView>

Floating action button

Floating Action Buttons (FAB) Raised, circular, floats above layout Primary or "promoted" action for a screen One per screen For example: Add Contact button in Contacts app

Using FABs Start with Basic Activity template Layout: <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin" android:src="@drawable/ic_fab_chat_button_white" .../>

FAB size 56 x 56 dp by default Set mini size (30 x 40 dp) with app:fabSize attribute: app:fabSize="mini" Set to 56 x 56 dp (default): app:fabSize="normal"

Common Gestures

Touch Gestures Touch gestures include: long touch double-tap fling drag scroll pinch Don’t depend on touch gestures for app's basic behavior!

Detect gestures Classes and methods are available to help you handle gestures. GestureDetectorCompat class for common gestures MotionEvent class for motion events

Touch Gestures class MyGestureListner extends GestureDetector.SimpleOnGestureListener { public boolean onFling(MotionEvent event1, MotionEvent event2 ,float velocityX, float velocityY) { Log.d("Gestur", "onFling: " + event1.toString()+event2.toString()); return true; } } private GestureDetectorCompat mDetector; mDetector=new GestureDetectorCompat(this,new MyGestureListner()); public boolean onTouchEvent(MotionEvent event){ this.mDetector.onTouchEvent(event)){ return super.onTouchEvent(event); }

Scale Gestures class MyPinchGesture extends ScaleGestureDetector.SimpleOnScaleGestureListener { public boolean onScale(ScaleGestureDetector scaleGestureDetector){ … return true; } } private ScaleGestureDetector gs; g2=new ScaleGestureDetector(this,new MyPinchGesture ()); LinearLayout l2=findViewById(R.id.lay); l2.setOnTouchListener(new View.OnTouchListener(){ public boolean onTouch(View v, MotionEvent event) { g2.onTouchEvent(event); return true; } });

END