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.

Comments

  1. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    Graphic design service in chennai

    ReplyDelete
    Replies
    1. I have read your article, it is very informative and helpful for me.I admire the valuable information you offer in your articles. Thanks for posting it.
      Tangki Panel
      Tangki Fiberglass
      Jual Septic Tank
      Mesin RO

      Delete

Post a Comment

Popular Posts