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
  2. I am glad that I saw this post. It is informative blog for us and we need this type of blog thanks for share this blog, Keep posting such instructional blogs and I am looking forward for your future posts. Python Projects for Students Data analytics is the study of dissecting crude data so as to make decisions about that data. Data analytics advances and procedures are generally utilized in business ventures to empower associations to settle on progressively Python Training in Chennai educated business choices. In the present worldwide commercial center, it isn't sufficient to assemble data and do the math; you should realize how to apply that data to genuine situations such that will affect conduct. In the program you will initially gain proficiency with the specialized skills, including R and Python dialects most usually utilized in data analytics programming and usage; Python Training in Chennai at that point center around the commonsense application, in view of genuine business issues in a scope of industry segments, for example, wellbeing, promoting and account. Project Center in Chennai

    ReplyDelete

Post a Comment

Popular Posts