Attend XDA's Second Annual Developer Conference, XDA:DevCon 2014!
5,804,709 Members 46,988 Now Online
XDA Developers Android and Mobile Development Forum

[GUIDE] Quantum Paper UI

Tip us?
 
TheArc
Old
(Last edited by TheArc; 24th June 2014 at 09:35 AM.)
#1  
TheArc's Avatar
Recognized Themer - OP
Thanks Meter 1,760
Posts: 2,215
Join Date: Jan 2012
Location: Auckland City
Default [GUIDE] Quantum Paper UI



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)

Code:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="@drawable/menu_blue_pressed"/>
<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 -

Code:
<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/menu_green" />
</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 -

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.

Code:
       <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.

The Following 30 Users Say Thank You to TheArc For This Useful Post: [ Click to Expand ]
 
Fitchman
Old
#2  
Fitchman's Avatar
Member
Thanks Meter 13
Posts: 54
Join Date: Apr 2010
This is Fantastic!
Here is a patchwork job I did of the Google+ and Youtube card interfaces. It looks like they made the shadow a bit subtler and added a 1 px border that goes from dark to slightly lighter on the top. This is probably part of their Hera/Moonshine UI, do you think it'll be part of Quantum Paper cards, too? If so, I'm not able to figure out how to define it in an XML relative to what you've posted.
Again, great tutorial and starter project!!

See below:
 
pandasa123
Old
#3  
pandasa123's Avatar
Senior Member
Thanks Meter 1,023
Posts: 1,384
Join Date: Jul 2013

 
DONATE TO ME
Great job on reaching portal. Shouldn't be surprised from your previous works. Are you planning on adding these changes to your themed apps?
My work:

For the HTC One XL:

SlimKat 4.4.4 | TWRP 2.7.0.8 | How to Update to 2.15 firmware | Accidentally Wiped Your Internal Storage?

For the HTC One Max:

SlimKat 4.4.4

For the HTC One Mini:

SlimKat 4.4.4

For the HTC Droid DNA:

SlimKat 4.4.4

For the Xiaomi Mi3:

SlimKat 4.4.4 | AOSP Flashing Guide

Other:

How To Get An Invite for the OnePlus One | Zoe Beta App for All Devices

Donate to me if you like my work or found anything I said helpful
 
TheArc
Old
(Last edited by TheArc; 18th June 2014 at 06:25 AM.)
#4  
TheArc's Avatar
Recognized Themer - OP
Thanks Meter 1,760
Posts: 2,215
Join Date: Jan 2012
Location: Auckland City
Quote:
Originally Posted by Fitchman View Post
This is Fantastic!
Here is a patchwork job I did of the Google+ and Youtube card interfaces. It looks like they made the shadow a bit subtler and added a 1 px border that goes from dark to slightly lighter on the top. This is probably part of their Hera/Moonshine UI, do you think it'll be part of Quantum Paper cards, too? If so, I'm not able to figure out how to define it in an XML relative to what you've posted.
Again, great tutorial and starter project!!

See below:
I will definitely take a look at this, and try and see if I can make something similar to this. I'll defiantly update the thread if I find a way.
Quote:
Originally Posted by pandasa123 View Post
Great job on reaching portal. Shouldn't be surprised from your previous works. Are you planning on adding these changes to your themed apps?
Thanks! And I haven't recently released any new themed applications so I'm unaware if I will do so.

I've created some extra .pngs and will be updating the resource package do there is a better selection of buttons.
@Fitchman I have found a workround - Let me know if it works.

Click here
iOS7 Kik Messenger | Svelte UI CM11 Theme | Active Launcher
The Following 2 Users Say Thank You to TheArc For This Useful Post: [ Click to Expand ]
 
bamsbamx
Old
(Last edited by bamsbamx; 18th June 2014 at 08:46 AM.)
#5  
bamsbamx's Avatar
Senior Member
Thanks Meter 533
Posts: 416
Join Date: Aug 2011
Location: Bilbo

 
DONATE TO ME
Beautiful! This is how it looks.... Thanks for such resources!!!

The Following 2 Users Say Thank You to bamsbamx For This Useful Post: [ Click to Expand ]
 
XxPixX
Old
#6  
XxPixX's Avatar
Senior Member
Thanks Meter 478
Posts: 636
Join Date: Dec 2012
Location: Warsaw
Thank you for this
One mistake though, the parts in bold and underlined should be removed.

Quote:
Originally Posted by krishneelg3 View Post
Code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/menu_button_blue"
        android:state_focused="true"
        android:state_pressed="true" />
    <item android:drawable="@drawable/menu_button_blue_pressed"
        android:state_focused="false"
        android:state_pressed="true" />
    <item android:drawable="@drawable/menu_button_blue_pressed"
            android:state_focused="true" />
    <item android:drawable="@drawable/menu_button_blue"
        android:state_focused="false"
        android:state_pressed="false" />
</selector>

Device: Samsung Galaxy Note GT-N7000
ROM: Homemade OmniROM KitKat 4.4 with a few cherry-picks
Version: January 12th 2014
Kernel: Stock Kernel
The Following User Says Thank You to XxPixX For This Useful Post: [ Click to Expand ]
 
TheArc
Old
#7  
TheArc's Avatar
Recognized Themer - OP
Thanks Meter 1,760
Posts: 2,215
Join Date: Jan 2012
Location: Auckland City
Quote:
Originally Posted by XxPixX View Post
Thank you for this
One mistake though, the parts in bold and underlined should be removed.
thanks for pointing it out, I'll edit the thread sometime.

Sent from my Nexus 5 using Tapatalk
iOS7 Kik Messenger | Svelte UI CM11 Theme | Active Launcher
The Following 2 Users Say Thank You to TheArc For This Useful Post: [ Click to Expand ]
 
giuliomvr
Old
#8  
Senior Member
Thanks Meter 213
Posts: 190
Join Date: May 2013
Location: Cologne
Thank you, Thats awesome! Under which license is this released? Read the readme, but I am not sure.
 
Ashutos1997
Old
#9  
Ashutos1997's Avatar
Senior Member
Thanks Meter 638
Posts: 492
Join Date: May 2012
Location: New Delhi , India
I am getting this error :

Current phones :

Galaxy Nexus - Slimkat
Moto E - Stock KK
 
TheArc
Old
#10  
TheArc's Avatar
Recognized Themer - OP
Thanks Meter 1,760
Posts: 2,215
Join Date: Jan 2012
Location: Auckland City
The resources are not license released. Its just a project that I've been working on with my apps. And decided to share my resources with the community.

Sent from my Nexus 5 using Tapatalk
iOS7 Kik Messenger | Svelte UI CM11 Theme | Active Launcher

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes