Project 0 : My Portfolio App

Required Tasks

Download Android Studio. Check out our mini-course on How to Download Android Studio if you need help.
Create a new project in Android Studio using the “Application with blank activity” template.
Create a layout for your main activity, adding a title, buttons for each app, and a style of your choosing.
You can begin working in either the text view or design view (whichever you prefer) within Android Studio’s Layout Editor.

Here is a screenshot of the Design View, for those of you who are new to Android Studio.

Note that if you start in the design view, it’s often a best practice to return to the text view to make final tweaks as this mode offers the most precision and control over your layout attributes.

Feel free to use this mockup as a guide:

Names of your Nanodegree apps

Spotify Streamer
Super Duo (2 buttons: Football Scores App and Library App)
Build It Bigger
XYZ Reader
Capstone

Colors and Styles

When designing your layout for the project portfolio, you may enjoy customizing the style and color of your buttons and changing the layout. If you are interested in learning about colors you can use, take a look at the material design color page, from Google.

If you’d like your app to look Udacious, feel free to use #F08C35 to match the orange buttons on our site.

In the Java source for your main activity, enable your buttons to respond to click or touch events.
Display a toast within the methods you created in the last step.
You should see a message like this whenever a button is clicked!

Review Of the App :

app/src/main/res/layout/content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ScrollView01"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    android:scrollbars="none"
    android:visibility="visible"
    tools:showIn="@layout/activity_main">

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.example.ajinkyawavare.myappportfolio.MainActivity"
    tools:showIn="@layout/activity_main"
    android:background="#d5f9f7">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Spotify Streamer"
        android:id="@+id/button"
        android:textSize="20dp"
        android:background="#fab914"
        android:layout_below="@+id/textView"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="38dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SCORES APP"
        android:id="@+id/button2"
        android:layout_below="@+id/button"
        android:layout_marginTop="34dp"
        android:background="#fab914"
        android:clickable="true"
        android:textSize="20dp"
        android:layout_alignLeft="@+id/button"
        android:layout_alignStart="@+id/button"
        android:layout_alignRight="@+id/button"
        android:layout_alignEnd="@+id/button" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="LIBRARY APP"
        android:id="@+id/button3"
        android:layout_below="@+id/button2"
        android:layout_marginTop="30dp"
        android:background="#fab914"
        android:clickable="true"
        android:textSize="20dp"
        android:layout_alignLeft="@+id/button2"
        android:layout_alignStart="@+id/button2"
        android:layout_alignRight="@+id/button2"
        android:layout_alignEnd="@+id/button2" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BUILD IT BIGGER"
        android:id="@+id/button4"
        android:layout_below="@+id/button3"
        android:layout_marginTop="30dp"
        android:background="#fab914"
        android:clickable="true"
        android:textSize="20dp"
        android:layout_alignLeft="@+id/button3"
        android:layout_alignStart="@+id/button3"
        android:layout_alignRight="@+id/button3"
        android:layout_alignEnd="@+id/button3" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="XYZ READER"
        android:id="@+id/button5"
        android:layout_marginTop="28dp"
        android:layout_below="@+id/button4"
        android:background="#fab914"
        android:clickable="true"
        android:textSize="20dp"
        android:layout_alignLeft="@+id/button4"
        android:layout_alignStart="@+id/button4"
        android:layout_alignRight="@+id/button4"
        android:layout_alignEnd="@+id/button4" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CAPSTONE:MY OWN APP"
        android:id="@+id/button6"
        android:background="#ff0000"
        android:clickable="true"
        android:textSize="20dp"
        android:layout_marginTop="41dp"
        android:layout_below="@+id/button5"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="My NanoDegree Apps!"
        android:id="@+id/textView"
        android:autoText="false"
        android:textSize="30dp"
        android:textColor="#4fb75d"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="63dp" />

</RelativeLayout>
</ScrollView>

Suggestion :

1.In order to make all your color values reusable and structural, you can consider to put these color values in res/values/colors.xml file.

2.What you implemented here is already really good. But I still have a little advice here. To avoid repeating your button’s code, you can also define a general Button style and put all general attributes setting in one style definition saved in res/values/styles.xml resource file. And when you want to create button, you can extract it out from this resource file and only write some specific values for each button (for example, android:id, or android:text). By doing so you can make your code cleaner. Try it!

app/src/main/java/com/example/ajinkyawavare/myappportfolio/MainActivity.java

package com.example.ajinkyawavare.myappportfolio;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private Button button;
    private Button button2;
    private Button button3;
    private Button button4;
    private Button button5;
    private Button button6;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        /*FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_SHORT)
                        .setAction("Action", null).show();
            }
        });
*/
        button = (Button)findViewById(R.id.button);
        button.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View arg0) {

                Toast.makeText(getApplicationContext(),
                        "This Button will launch my Spotify Streamer App!", Toast.LENGTH_SHORT).show();

            }
        });
        button2 = (Button)findViewById(R.id.button2);
        button2.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View arg0) {

                Toast.makeText(getApplicationContext(),
                        "This Button will launch my Scores App!", Toast.LENGTH_SHORT).show();

            }
        });
        button3 = (Button)findViewById(R.id.button3);
        button3.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View arg0) {

                Toast.makeText(getApplicationContext(),
                        "This Button will launch my Library App!", Toast.LENGTH_SHORT).show();

            }
        });
        button4 = (Button)findViewById(R.id.button4);
        button4.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View arg0) {

                Toast.makeText(getApplicationContext(),
                        "This Button will launch my Build It Bigger App!", Toast.LENGTH_SHORT).show();

            }
        });
        button5 = (Button)findViewById(R.id.button5);
        button5.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View arg0) {

                Toast.makeText(getApplicationContext(),
                        "This Button will launch my XYZ Reader App!", Toast.LENGTH_SHORT).show();

            }
        });
        button6 = (Button)findViewById(R.id.button6);
        button6.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View arg0) {

                Toast.makeText(getApplicationContext(),
                        "This Button will launch my Capstone:My Own App!", Toast.LENGTH_SHORT).show();

            }
        });

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

Suggestion :

1.Since from your codes, I can see that you are a really advanced student, in order to learn more, you could also check a package called “butterknife”. In the future, you can find and automatically cast the corresponding view in your layout easily. This will save you a lot of time.

Supp:
http://jakewharton.github.io/butterknife/
Also, a video tutorial:
https://www.skillfeed.com/zh/courses/11756-android-butter-knife-the-complete-guide

To learn more, you can also register function for your buttons using XML definition like this sample code:

<Button
     android:onClick="onClick" />

app/build.gradle

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:1.5.0'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        jcenter()
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

Yes great! You have your minSdkVersion value set to 15, this can make your app be able to run on most of the Android devices (96%). In the meantime, you can gain most of the latest powerful features of Android 4.X. Great job here!
Supp: https://developer.android.com/about/dashboards/index.html?utm_source=suzunone

app/src/main/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.example.ajinkyawavare.myappportfolio.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

<!--
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />
-->

</android.support.design.widget.CoordinatorLayout>

S	M	T	W	T	F	S
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

Required Tasks

Names of your Nanodegree apps

Colors and Styles

Review Of the App :

Share this:

Leave a ReplyCancel reply