Androidify Yourself app for GDG event

Slides

https://speakerdeck.com/larchaon/androidify-yourself

GDG Riga event link

G+ event link

Basic Functionality

• Download and start sample application from "empty" git branch
• Change Application name to "Androidify Yourself!"
• Rename helloworld.xml layout to main.xml
• Split screen into parts

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:weightSum="130">
<TextViewandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="20"android:text="Create your Android" />
....
</LinearLayout>

• Add Layout with Android parts selectors

<LinearLayoutandroid:layout_weight="90"android:layout_width="match_parent"android:layout_height="0dp"android:padding="1dp"android:orientation="vertical"android:background="@drawable/border">
<android.support.v4.view.ViewPager
android:id="@+id/viewPagerHead"android:layout_weight="30"android:layout_width="match_parent"android:layout_height="0dp" />
<android.support.v4.view.ViewPager
android:id="@+id/viewPagerBody"android:layout_weight="30"android:layout_width="match_parent"android:layout_height="0dp" />
<android.support.v4.view.ViewPager
android:id="@+id/viewPagerLegs"android:layout_weight="30"android:layout_width="match_parent"android:layout_height="0dp" />
</LinearLayout>

• Bind Views in MainActivity

@OverrideprotectedvoidonCreate(BundlesavedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.helloworld);
ViewPagerheadViewPager = (ViewPager) findViewById(R.id.viewPagerHead);
ViewPagerbodyViewPager = (ViewPager) findViewById(R.id.viewPagerBody);
ViewPagerlegsViewPager = (ViewPager) findViewById(R.id.viewPagerLegs);
....
}

• Create AndroidifyViewPagerAdapter

publicclassAndroidifyViewPagerAdapterextendsFragmentPagerAdapter {
privateList<Integer> imgIds;
publicAndroidifyViewPagerAdapter(FragmentManagerfm, List<Integer> imgIds) {
super(fm);
this.imgIds = imgIds;
}
@OverridepublicFragmentgetItem(intposition) {
...
}
@OverridepublicintgetCount() {
returnimgIds.size();
}
}

• Create AndroidifyViewPagerItemFragment

publicclassAndroidifyViewPagerItemFragmentextendsFragment {
privateintimgId;
publicAndroidifyViewPagerItemFragment(intimgId) {
this.imgId = imgId;
}
@OverridepublicViewonCreateView(LayoutInflaterinflater, ViewGroupcontainer, BundlesavedInstanceState) {
....
}
}

• Create androidify_part.xml layout

 <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent">
<ImageViewandroid:id="@+id/android_part"android:layout_width="match_parent"android:layout_height="match_parent" />
</LinearLayout>

• Add View inflating in AndroidifyViewPagerItemFragment onCreateView()

@OverridepublicViewonCreateView(LayoutInflaterinflater, ViewGroupcontainer, BundlesavedInstanceState) {
ViewrootView = inflater.inflate(R.layout.androidify_part, container, false);
ImageViewimageView = (ImageView) rootView.findViewById(R.id.android_part);
imageView.setImageResource(imgId);
returnrootView;
}

• Add Fragment creating in AndroidifyViewPagerAdapter getItem(int position)

@OverridepublicFragmentgetItem(intposition) {
returnnewAndroidifyViewPagerItemFragment(imgIds.get(position));
}

• Extend MainActivity from android.support.v4.app.FragmentActivity
• Set Adapter to ViewPagers in MainActivity

@OverrideprotectedvoidonCreate(BundlesavedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.helloworld);
ViewPagerheadViewPager = (ViewPager) findViewById(R.id.viewPagerHead);
ViewPagerbodyViewPager = (ViewPager) findViewById(R.id.viewPagerBody);
ViewPagerlegsViewPager = (ViewPager) findViewById(R.id.viewPagerLegs);
FragmentManagerfm = getSupportFragmentManager();
headViewPager.setAdapter(newAndroidifyViewPagerAdapter(fm, AndroidDrawables.getHeads()));
bodyViewPager.setAdapter(newAndroidifyViewPagerAdapter(fm, AndroidDrawables.getBodies()));
legsViewPager.setAdapter(newAndroidifyViewPagerAdapter(fm, AndroidDrawables.getLegs()));
}

• Create and register all Drawables

publicclassAndroidDrawables {
privatestaticfinalList<Integer> bodies = newArrayList<Integer>(Arrays.asList(
R.drawable.body1,
R.drawable.body2,
R.drawable.body3,
R.drawable.body4,
R.drawable.body5,
R.drawable.body6,
R.drawable.body7,
R.drawable.body8,
R.drawable.body9,
R.drawable.body10,
R.drawable.body11,
R.drawable.body12,
R.drawable.body13,
R.drawable.body14,
R.drawable.body15,
R.drawable.body16,
R.drawable.body17,
R.drawable.body18,
R.drawable.body19
));
privatestaticfinalList<Integer> heads = newArrayList<Integer>(Arrays.asList(
R.drawable.head1,
R.drawable.head2,
R.drawable.head3,
R.drawable.head4,
R.drawable.head5,
R.drawable.head6,
R.drawable.head7,
R.drawable.head8,
R.drawable.head9,
R.drawable.head10,
R.drawable.head11,
R.drawable.head12,
R.drawable.head13,
R.drawable.head14,
R.drawable.head15,
R.drawable.head16,
R.drawable.head17,
R.drawable.head18,
R.drawable.head19
));
privatestaticfinalList<Integer> legs = newArrayList<Integer>(Arrays.asList(
R.drawable.legs1,
R.drawable.legs2,
R.drawable.legs3,
R.drawable.legs4,
R.drawable.legs5,
R.drawable.legs6,
R.drawable.legs7,
R.drawable.legs8,
R.drawable.legs10,
R.drawable.legs11,
R.drawable.legs12,
R.drawable.legs13,
R.drawable.legs14,
R.drawable.legs15,
R.drawable.legs16,
R.drawable.legs17,
R.drawable.legs18,
R.drawable.legs19
));
publicstaticList<Integer> getBodies() {
returnbodies;
}
publicstaticList<Integer> getHeads() {
returnheads;
}
publicstaticList<Integer> getLegs() {
returnlegs;
}
}

Bug fixes

• Try to flip your device ;) Lets try to fix AndroidifyViewPagerItemFragment:

publicclassAndroidifyViewPagerItemFragmentextendsFragment {
publicstaticfinalStringIMG_ID = "IMG_ID";
privateintimgId;
@OverridepublicViewonCreateView(LayoutInflaterinflater, ViewGroupcontainer, BundlesavedInstanceState) {
if (savedInstanceState != null) {
imgId = savedInstanceState.getInt(IMG_ID);
}
ViewrootView = inflater.inflate(R.layout.androidify_part, container, false);
ImageViewimageView = (ImageView) rootView.findViewById(R.id.android_part);
imageView.setImageResource(imgId);
returnrootView;
}
@OverridepublicvoidonSaveInstanceState(BundleoutState) {
outState.putInt(IMG_ID, imgId);
}
publicvoidsetImgId(intimgId) {
this.imgId = imgId;
}
}

• And fix getItem() in AndroidifyViewPagerAdapter

@OverridepublicFragmentgetItem(intposition) {
AndroidifyViewPagerItemFragmentfragment = newAndroidifyViewPagerItemFragment();
fragment.setImgId(imgIds.get(position));
returnfragment;
}

Extended Functionality

• Lets add a control panel in main.xml layout

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:weightSum="3"android:layout_weight="20">
<LinearLayoutandroid:layout_width="0dp"android:layout_weight="1"android:gravity="center"android:layout_height="wrap_content">
<ImageButtonandroid:id="@+id/button_share"android:layout_width="wrap_content"android:layout_height="match_parent"android:src="@drawable/android_icon"android:background="@null"android:adjustViewBounds="true"android:scaleType="centerInside" />
</LinearLayout>
<LinearLayoutandroid:layout_width="0dp"android:layout_weight="1"android:gravity="center"android:layout_height="wrap_content">
<ImageButtonandroid:id="@+id/button_record_sound"android:layout_width="wrap_content"android:layout_height="match_parent"android:src="@drawable/record_off"android:background="@null"android:adjustViewBounds="true"android:scaleType="centerInside" />
</LinearLayout>
<LinearLayoutandroid:layout_width="0dp"android:layout_weight="1"android:gravity="center"android:layout_height="wrap_content">
<ImageButtonandroid:id="@+id/button_play_sound"android:layout_width="wrap_content"android:layout_height="match_parent"android:src="@drawable/play"android:background="@null"android:adjustViewBounds="true"android:scaleType="centerInside" />
</LinearLayout>
</LinearLayout>

• Lets implement Androidify Share intent in MainActivity

@OverrideprotectedvoidonCreate(BundlesavedInstanceState) {
...
initShareButton(headViewPager, bodyViewPager, legsViewPager);
}
privatevoidinitShareButton(finalViewPagerviewPagerHead, finalViewPagerviewPagerBody, finalViewPagerviewPagerLegs) {
ViewshareButton = findViewById(R.id.button_share);
shareButton.setOnClickListener(newView.OnClickListener() {
@OverridepublicvoidonClick(Viewview) {
...
}
});
}

• Create BitmapUtils for creating an image Bitmap

publicclassBitmapUtils {
publicstaticBitmapgetBitmap(Resourcesresources, intdrawableResourceId) {
returnBitmapFactory.decodeResource(resources,
drawableResourceId);
}
publicstaticBitmapcombineDrawables(Resourcesresources, inthead, intbody, intlegs) {
BitmapheadBitmap = getBitmap(resources, head);
BitmapbodyBitmap = getBitmap(resources, body);
BitmaplegsBitmap = getBitmap(resources, legs);
intheight = headBitmap.getHeight() + bodyBitmap.getHeight() + legsBitmap.getHeight();
intwidth = Math.max(headBitmap.getWidth(), Math.max(bodyBitmap.getWidth(), legsBitmap.getWidth()));
Bitmapresult = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
CanvascomboImage = newCanvas(result);
comboImage.drawBitmap(headBitmap, 0f, 0f, null);
comboImage.drawBitmap(bodyBitmap, 0f, headBitmap.getHeight(), null);
comboImage.drawBitmap(legsBitmap, 0f, headBitmap.getHeight() + bodyBitmap.getHeight(), null);
returnresult;
}
}

• Add share intent invocation onClick

privatevoidinitShareButton(finalViewPagerviewPagerHead, finalViewPagerviewPagerBody, finalViewPagerviewPagerLegs) {
ViewshareButton = findViewById(R.id.button_share);
shareButton.setOnClickListener(newView.OnClickListener() {
@OverridepublicvoidonClick(Viewview) {
Integerhead = AndroidDrawables.getHeads().get(viewPagerHead.getCurrentItem());
Integerbody = AndroidDrawables.getBodies().get(viewPagerBody.getCurrentItem());
Integerlegs = AndroidDrawables.getLegs().get(viewPagerLegs.getCurrentItem());
Bitmapbitmap = BitmapUtils.combineDrawables(getResources(), head, body, legs);
StringimagePath = MediaStore.Images.Media.insertImage(getContentResolver(), bitmap, "Android Avatar", null);
UriimageURI = Uri.parse(imagePath);
startShareActivity(imageURI);
}
});
}
privatevoidstartShareActivity(UriimageURI) {
IntentshareIntent = newIntent(Intent.ACTION_SEND);
shareIntent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
shareIntent.putExtra(Intent.EXTRA_STREAM, imageURI);
shareIntent.setType("image/png");
startActivity(shareIntent);
}

• Oops we have an exception. Lets fix it

<uses-permissionandroid:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

• Next stop - sound recording. Create AndroidSoundRecorder

publicclassAndroidSoundRecorder {
privateMediaRecordermediaRecorder;
privateStringmFileName;
publicAndroidSoundRecorder(StringmFileName) {
this.mFileName = Environment.getExternalStorageDirectory().
getAbsolutePath() + "/" + mFileName;
}
publicvoidstartRecording() {
if (mediaRecorder != null) stopRecording();
mediaRecorder = newMediaRecorder();
mediaRecorder.setAudioSource(MediaRecorder.AudioSource.MIC);
mediaRecorder.setOutputFormat(MediaRecorder.OutputFormat.MPEG_4);
mediaRecorder.setOutputFile(mFileName);
mediaRecorder.setAudioEncoder(MediaRecorder.AudioEncoder.AAC);
mediaRecorder.setAudioSamplingRate(44100);
mediaRecorder.setAudioEncodingBitRate(16);
try {
mediaRecorder.prepare();
} catch (IOExceptione) {
Log.e(AndroidSoundRecorder.class.getSimpleName(), "prepare() failed");
}
mediaRecorder.start();
}
publicvoidstopRecording() {
if (mediaRecorder == null) return;
mediaRecorder.stop();
mediaRecorder.release();
mediaRecorder = null;
}
publicbooleanisRecording() {
returnmediaRecorder != null;
}
}

• Initiate RecordButton in MainActivity

...
privatefinalStringmySound = "my_recorded_sound";
privateAndroidSoundRecordersoundRecorder;
...
@OverrideprotectedvoidonCreate(BundlesavedInstanceState) {
...
initRecordButton();
}
privatevoidinitRecordButton() {
soundRecorder = newAndroidSoundRecorder(mySound);
ViewrecordButton = findViewById(R.id.button_record_sound);
recordButton.setOnTouchListener(newView.OnTouchListener() {
@OverridepublicbooleanonTouch(Viewview, MotionEventmotionEvent) {
ImageButtonrecordButton = (ImageButton) view;
if (MotionEvent.ACTION_UP == motionEvent.getAction()) {
if (soundRecorder.isRecording()) {
soundRecorder.stopRecording();
recordButton.setImageDrawable(getResources().getDrawable(R.drawable.record_off));
} else {
soundRecorder.startRecording();
recordButton.setImageDrawable(getResources().getDrawable(R.drawable.record_on));
}
}
returnfalse;
}
});
}

• Create AndroidSoundPlayer

public class AndroidSoundPlayer {
private final String fileName;
private MediaPlayer mediaPlayer;
public AndroidSoundPlayer(String fileName) {
this.fileName = Environment.getExternalStorageDirectory().
getAbsolutePath() + "/" + fileName;
}
public void startPlaying() {
if (mediaPlayer != null) stopPlaying();
mediaPlayer = new MediaPlayer();
try {
mediaPlayer.setDataSource(fileName);
mediaPlayer.prepare();
mediaPlayer.start();
} catch (IOException e) {
Log.e("SoundPlayer", "prepare() failed");
}
}
public void stopPlaying() {
if (mediaPlayer == null) return;
mediaPlayer.release();
mediaPlayer = null;
}
public boolean isPlaying() {
return mediaPlayer != null && mediaPlayer.isPlaying();
}
}

• Initiate PlayButton in MainActivity

privateAndroidSoundPlayersoundPlayer;
...
@OverrideprotectedvoidonCreate(BundlesavedInstanceState) {
...
initPlayButton();
}
privatevoidinitPlayButton() {
soundPlayer = newAndroidSoundPlayer(mySound);
ViewplayButton = findViewById(R.id.button_play_sound);
playButton.setOnClickListener(newView.OnClickListener() {
@OverridepublicvoidonClick(Viewview) {
if (soundPlayer.isPlaying()) {
soundPlayer.stopPlaying();
} else {
soundPlayer.startPlaying();
}
}
});
}

• Add permission to AndroidManifest.xml

<uses-permissionandroid:name="android.permission.RECORD_AUDIO"/>