Your useless app, slowly becoming…

First lets make sure you have the right style and design for your app. To pick the colors I like to use the material design palette materialpalette.com . Once you’ve picked the colors you like, click on download and select XML. copy the contents of your downloaded xml file into your project’s colors.xml file, (res\values\colors.xml). It should look like this but with your own colors that you picked from the palette.

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <color name="primary">#607D8B</color>
 <color name="primary_dark">#455A64</color>
 <color name="primary_light">#CFD8DC</color>
 <color name="accent">#FFEB3B</color>
 <color name="primary_text">#212121</color>
 <color name="secondary_text">#757575</color>
 <color name="icons">#FFFFFF</color>
 <color name="divider">#BDBDBD</color>
</resources>

Now go to res\values\styles.xml in your project structure and copy this.

<resources>

    <!-- Base application theme. -->
    <style name="AppBaseTheme" parent="android:Theme.Light">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primaryDark</item>
        <item name="colorAccent">@color/accent</item>
    </style>

</resources>

Next, go to res\values\strings.xml and copy this.

<resources>
    <string name="app_name">Call it whatever you want</string>
    <string name="drawer_open">opened</string>
    <string name="drawer_close">closed</string>
    <string name="drawer_header">Choose Default View</string>

    <string-array name="drawer_string_array">
        <item>This does nothing</item>
        <item>This also</item>
        <item>What do you think this does?</item>
    </string-array>

</resources>

Next, create an XML file in res\layout\ and call it drawerlayout_header.xml and copy the following code. You could actually call it whatever you want just keep track of it as we go along with the tutorial.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
   android:background="@color/colorAccent">
    
       <TextView
           android:id="@+id/txt_header"
           android:layout_width="match_parent"
           android:layout_height="100dp"
           android:gravity="center"
           android:layout_centerInParent="true"
           android:text="@string/drawer_header"
           android:textSize="20sp"
           android:textColor="@color/primary_text"/>

</RelativeLayout>

Next, go to res\layout\activity_main.xml and copy this.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.thewannabeprogrammer.wbpuselessapp.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="The Wannabe Programmer"
        android:textAllCaps="true"
        android:textStyle="bold"
        android:textSize="20dp"
        android:layout_centerInParent="true"/>

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar">

        <ListView
            android:id="@+id/list"
            android:background="@android:color/white"
            android:layout_width="285dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"/>

    </android.support.v4.widget.DrawerLayout>

</RelativeLayout>

Finally, copy the following code in the MainActivity.java

package com.thewannabeprogrammer.wbpuselessapp;

import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends AppCompatActivity {

    DrawerLayout drawerLayout;
    ListView drawerList;
    ActionBarDrawerToggle drawerToggle;
    String[] drawerListItems;

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

        Toolbar myToolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(myToolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        
        drawerLayout = (DrawerLayout) findViewById(R.id.drawer);
        drawerList = (ListView) findViewById(R.id.list);
        View drawerHeader = (View) getLayoutInflater().inflate(R.layout.drawerlayout_header, null);
        drawerList.addHeaderView(drawerHeader);

        drawerListItems = getResources().getStringArray(R.array.drawer_string_array);
        drawerList.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, drawerListItems));

        drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, R.string.drawer_open, R.string.drawer_close) {
            public void onDrawerClosed(View v) {
                super.onDrawerClosed(v);
                // Do something if Drawer is closed.
            }

            public void onDrawerOpened(View v) {
                super.onDrawerOpened(v);
                // Do something if Drawer is open.
            }
        };
        drawerLayout.setDrawerListener(drawerToggle);
        drawerToggle.syncState();
    }

    @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();

        switch (item.getItemId()) {
            case android.R.id.home: {
                if (drawerLayout.isDrawerOpen(drawerList)) {
                    drawerLayout.closeDrawer(drawerList);
                } else {
                    drawerLayout.openDrawer(drawerList);
                }
                return true;
            }
        }
        return super.onOptionsItemSelected(item);
    }
}

So now you have an empty shell for your app. It is a simple app with text in the main page and a list menu that opens like a drawer. Soon I will show you how to click on an item from that list and open another page or “activity” if we use app lingo.