View Properties

Intrinsic Content Size
Compression Resistance
Content Hugging

-stack view
axis, spacing, alignment, distribution

happily modifies size of view
-> fill(default), fill equally, fill proportionally

works hard not to modify size of views
->equal spacing, equal centering

alignment -horizontal stack views
text-> ascender, baseline, descender

guiding principles of autolayout
-stackView first, constraints later
-Start small, or not at all
-Work from the inside out
-Trust the simulator only
-Don’t panic

Seven Commandments of AutoLayout
1. Tweak the properties of the StackView
2. Use another StackView
3. Tweak the compression resistance or the hugging priority
4. Add constraints to the StackView
5. Add constraints to the views
6. To connect views within different StackViews, use V.
7. If everything else fails, use a filler view

AutoLayout

-Laying out the views
-Deciding how these views will adapt when the available screen size changes

import UIKit

class CodeViewController:
	UIViewController {

	override func loadView(){
		code
	}
}

-screen size changes
iphone se, iphone 6+
rotaion

code, xibs, storyboards

-Swift Code(NSLayoutConstraint)
-Visual Format Code
-Creating constraints in IB

UIStackView

MediaPlayer resources

/**
 * Clean up the media player by releasing its resources.
 */

private void releaseMediaPlayer(){
	if (mMediaPlayer != null){
		mMediaPlayer.release();

		mMediaPlayer = null;
	}  
}

Activity Lifecycle
-create, started, resumed, (User is interacting with app) paused, stopped, destroyed

http://androidniceties.tumblr.com/

States of Media Player

Idle -> Prepared -> Started -> Pause -> Stopped

object data type, variable name = object data type. factory method name(input arguments);

static method
MediaPlayer.create(context, R.raw.song);

Non-static (regular) Method
myMediaPlayer.start();

listView.setAdapter(adapter);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener(){
	@Override
	public void onItemClick(AdapterView<?> parent, View view, int position, long id){
		mMediaPlayer = MediaPlayer.create(NumbersActivity.this, R.raw.number_one);
		mMediaPlayer.start();
	}
});

@Override
	public String toString(){
		return "Word{" +
		"mDefaultTranslation='" + mDefaultTranslation + '\'' +
		", mMiwokTranslation='" + mMiwokTranslation + '\'' +
		", mAudioResourceId=" + mAudioResourceId +
		", mImageResourceId=" + mImageResourceId +
		'}'; 
	}

Word word = words.get(position);
Log.v("NumbersActivity", "Current word: " + word);
mMediaPlayer = MediaPlayer.create(PhrasesActivity.this, word.getAudioResourceId());
mMediaPlayer.start();
	}
});

Music Player App

activity_main.xml

<?xml version="1.0" encoding="utf-8" ?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://chemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="@color/tan_background"
	android:orientation="vertical"
	tools:context="com.example.android.miwok.MainActivity">

	<Button
		android:id="@+id/play_button"
		android:text="Play"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content" />

	<Button
		android:id="@+id/pause_button"
		android:text="Pause"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content" />

</LinearLayout>

MainActivity.java

package com.example.android.musicplayer;

import

public class MainActivity extends AppCompactActivity {

	private MediaPlayer mediaPlayer;


	@Override
	protected void onCreate(Bundle savedInstanceState){
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		mediaPlayer = MediaPlayer.create(this, R.raw.android_trailer);

		Button playButton = (Button)findViewById(R.id.play_button);

		playButton.setOnClickListener(new View.OnClickListener(){
			@Override
			public void onClick(View v){
				mediaPlayer.start();
			}
		});

		Button pauseButton = (Button)findViewById(R.id.play_button);

		playButton.setOnClickListener(new View.OnClickListener(){
			@Override
			public void onClick(View v){
				mediaPlayer.pause();
			}
		});
	}
}

Plan to build the audio feature

android media player
https://developer.android.com/guide/topics/media/mediaplayer.html

Which step to accomplish
– modify list item layout to include a play button
– handle clicking on a list item to play an audio file
– add in all audio files
– modify word class to store audio resource ID
– play correct audio file per word
– visual plish

use media player api in sample app

Providing Constructors

public Bicycle(int startGadence, int startSpeed, int startGear){
	gear = startGear;
	cadence = startCadence;
	speed = startSpeed;
}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="horizontal"
	android:padding="16dp">

	<ImageView
		android:id="@+id/image"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:src="@mipmap/ic_launcher" />

	<LinearLayout
		android:id="@+id/text_container"
		android:layout_width="match_parent"
		android:layout_height="match_parent"
		android:orientation="vertical"
		android:paddingLeft="16dp">

		<TextView
			android:id="@+id/miwok_text_view"
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			tools:text="lutti" />

		<TextView
			android:id="@+id/default_text_view"
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			tools:text="one" />
	</LinearLayout>
</LinearLayout>

Change view visibility
textView.setVisibility(View.VISIBLE);
textView.setVisibility(View.INVISIBLE);
textView.setVisibility(View.GONE);

Modify Word Class

package com.example.android.miwok;

public class Word {
	private String mDefaultTranslation;
	private String mMiworkTranslation;
	private int mImageResourceId;

	public String getDefaultTranslation(){
		return mDefaultTranslation;
	}

	public String getMiwokTranslation() { return mMiwokTranslation; }

	public int getImageResourceId(){
		return mImageResourceId;
	}
}

Prioritize code change

strategry 1: do the riskiest part first (to demonstrate proof of concept)
strategry 2: implement what you can based on the available data, Use placeholder data

<ImageView
	android:width="wrap_content"
	android:height="wrap_content"
	android:src="@mipmap/ic_launcher" />

Density Buckets
-mdpi(medium) ~160dpi
-hdpi(high) ~240dpi
-xhdpi(extra-high) ~320dpi
-xxhdpi(extra-extra-high) ~480dpi
more pixel fit in the screen