Post Reply

[GUIDE] Quantum Paper UI

OP TheArc

15th June 2014, 03:46 AM   |  #1  
TheArc's Avatar
OP Recognized Themer
Flag Auckland City
Thanks Meter: 1,799
 
2,289 posts
Join Date:Joined: Jan 2012
Donate to Me
More


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.

Last edited by TheArc; 24th June 2014 at 09:35 AM.
The Following 30 Users Say Thank You to TheArc For This Useful Post: [ View ]
17th June 2014, 09:54 PM   |  #2  
Fitchman's Avatar
Member
Thanks Meter: 13
 
55 posts
Join Date:Joined: Apr 2010
More
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:
18th June 2014, 04:06 AM   |  #3  
pandasa123's Avatar
Senior Member
Flag South Grafton
Thanks Meter: 1,184
 
1,488 posts
Join Date:Joined: Jul 2013
Donate to Me
More
Great job on reaching portal. Shouldn't be surprised from your previous works. Are you planning on adding these changes to your themed apps?
18th June 2014, 05:03 AM   |  #4  
TheArc's Avatar
OP Recognized Themer
Flag Auckland City
Thanks Meter: 1,799
 
2,289 posts
Join Date:Joined: Jan 2012
Donate to Me
More
Quote:
Originally Posted by Fitchman

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

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
Last edited by TheArc; 18th June 2014 at 06:25 AM.
The Following 2 Users Say Thank You to TheArc For This Useful Post: [ View ]
18th June 2014, 08:41 AM   |  #5  
bamsbamx's Avatar
Senior Member
Flag Bilbo
Thanks Meter: 537
 
418 posts
Join Date:Joined: Aug 2011
Donate to Me
More
Beautiful! This is how it looks.... Thanks for such resources!!!

Last edited by bamsbamx; 18th June 2014 at 08:46 AM.
The Following 2 Users Say Thank You to bamsbamx For This Useful Post: [ View ]
18th June 2014, 11:16 AM   |  #6  
XxPixX's Avatar
Senior Member
Flag Warsaw
Thanks Meter: 487
 
641 posts
Join Date:Joined: Dec 2012
More
Thank you for this
One mistake though, the parts in bold and underlined should be removed.

Quote:
Originally Posted by krishneelg3

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>

The Following User Says Thank You to XxPixX For This Useful Post: [ View ]
18th June 2014, 11:18 AM   |  #7  
TheArc's Avatar
OP Recognized Themer
Flag Auckland City
Thanks Meter: 1,799
 
2,289 posts
Join Date:Joined: Jan 2012
Donate to Me
More
Quote:
Originally Posted by XxPixX

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
The Following 2 Users Say Thank You to TheArc For This Useful Post: [ View ]
18th June 2014, 01:16 PM   |  #8  
Senior Member
Flag Cologne
Thanks Meter: 215
 
190 posts
Join Date:Joined: May 2013
More
Thank you, Thats awesome! Under which license is this released? Read the readme, but I am not sure.
18th June 2014, 01:25 PM   |  #9  
Ashutos1997's Avatar
Senior Member
Flag New Delhi , India
Thanks Meter: 657
 
499 posts
Join Date:Joined: May 2012
More
I am getting this error :

18th June 2014, 01:25 PM   |  #10  
TheArc's Avatar
OP Recognized Themer
Flag Auckland City
Thanks Meter: 1,799
 
2,289 posts
Join Date:Joined: Jan 2012
Donate to Me
More
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

Post Reply Subscribe to Thread
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Top Threads in Java for Android App Development by ThreadRank