[Java for Android App Development] TheArc:
As we all know, Google's planning something quite new for it's beloved Android users. So after examining and researching more into Google's new project Quantum Paper.

I have created a resource base for your project layouts, so you can make your app look more like Google's upcoming project Quantum Paper.

Please note - I have added explanations as there new comers to Android development and perhaps these explanations will help them understand what these certain files do.

Outcome design - One of my simple projects, click here to see what it'll look like.

Project source code and installable apk - click here.

What you'll need -

[x] Eclipse, Android Studio or any Android app developing IDE.

[x] Paint.NET or any image editor.

[x] My custom resource package - Download

[x] Some experience with the IDE that you're using, as I will not be showing you how to use it.

Setup -

Create the following folders and files in your project.

[x] A directory named drawable.

[x] A directory named drawable-nodpi.

[x] A file named colors.xml in the values directory.

Explanation -

Drawable folder - The reason you need a folder named drawable is because we want to create code based images. This is a better approach to things that deal with button clicks, layouts and such. This eliminates warped layouts and stuff.

Drawable-nodpi folder - Since I have made UI images just by using screenshots and the information provided, I cannot present you with a proper dpi image.

But on the other hand, these .pngs are high quality so don't worry about it being unclear.

Colors.xml - An easy way to store preset hex colour codes in Android. It's made so you do not have to enter hex codes manually or for people that just want to link it to the colour they want with the name provided with the hex colour, it's sort of like an ID.

Let's start

Okay, the first thing you will have to do is, unpack the resource file I have provided you with somewhere appropriate, such as the desktop.

Navigate to Action Bar Colors and open the colors.xml file. From there, copy and paste the colours you know you'll be working with in your projects colors.xml file. Now navigate to the Card Layout directory and copy bg_card.xml to your projects drawable directory.

Now head into the Menu Buttons directory. And you will be greeted with two folders, one named normal and the other named pressed. Copy the coloured menu button that you wish to use from both directories to your projects folder named drawable-nodpi. For example, if you want to have a blue ActionBar, then go ahead and copy menu_button_blue and menu_button_blue_pressed.

Now we can go ahead and create our selectable menu buttons.

Create an .xml called menu_button_colorname. For exmaple - menu_button_blue.xml in the drawable folder.

I named it blue because the menu buttons are blue, if it's another colour please link it to that to make things easier.

Add the following code inside the .xm file you have just created. (menu_button_blue.xml/whatever the colour name is)

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="@drawable/[COLOR="RoyalBlue"]menu_blue_pressed[/COLOR]"/>
<item android:state_pressed="true" android:drawable="@drawable/[COLOR="rgb(65, 105, 225)"]menu_blue_pressed[/COLOR]" />
<item android:drawable="@drawable/[COLOR="rgb(65, 105, 225)"]menu_blue[/COLOR]" />
</selector>

Replace the lines in red with the resource colour name. ie - menu_button_green, if you're making a green button.

For example, if I have a green action bar, and I have chosen my green menu buttons. I will change the blue to green, like below -

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="@drawable/[COLOR="rgb(152, 251, 152)"]menu_green_pressed[/COLOR]"/>
<item android:state_pressed="true" android:drawable="@drawable/[COLOR="rgb(152, 251, 152)"]menu_green_pressed[/COLOR]" />
<item android:drawable="@drawable/[COLOR="PaleGreen"]menu_green[/COLOR]" />
</selector>

Now go into activity_main.xml (The main layout, this may be different if you have changed the name). And replace all the code with this following code -

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/blue" <!-- Change the main window colour to whatever colour you like -->
tools:context=".MainActivity" >

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#eeeeee"
android:orientation="vertical" >

<RelativeLayout
android:id="@+id/action_bar"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:background="@color/blue" > <!-- This should be the same colour as your main window background -->

<ImageButton
android:id="@+id/qpaper_menu"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="@drawable/menu_button_blue" /> <!-- This should be the same colour as your action bar layout -->

<TextView
android:id="@+id/app_header_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="@+id/qpaper_menu"
android:text="You applications name" <!-- Change it to your apps name -->
android:textColor="#fff"
android:textSize="18sp" />
</RelativeLayout>

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="350dp" <!-- Change this to what ever height you want to make the layout bigger -->
android:layout_margin="12dp"
android:background="@drawable/bg_card"
android:orientation="vertical" >

</RelativeLayout>

</LinearLayout>

</RelativeLayout>

The code above is a pre-set template layout. So you will have to do some experimental and edits to the code, I have supplied the code with minor notes to help you. Also many of you guys would probably wish to add more card views than just one.

To add more card views add the code below under the original card view, you can see it above.

<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="350dp" <!-- Change this to what ever height you want to make the layout bigger -->
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:layout_marginBottom="12dp" <!-- Ihave not added marginTop because you don't want to have a huge gap between your card placements -->
android:background="@drawable/bg_card"
android:orientation="vertical" >
</RelativeLayout>

And yes, you can add scrollable views without issues, so you can scroll through your interface ;).

I will be updating this thread regularly with new info, package updates with new resources and new guide sections.