Yeah, defiantly. It should work as the images don't need a specific api level.oh ok so it shud work on gingerbread as well
thnx man i will surely try it out, i want to make a new UI for my app
And good luck mate!
Sent from my Nexus 5 using Tapatalk
[GUIDE] Quantum Paper UI
- Thread starter TheArc
- Start date
And good luck mate!
Sent from my Nexus 5 using Tapatalk
i use the exact same code you gave, and i just keep getting an overflow logcat for the ImageButton
i have tried making various changes, but still same thing :-/
it gets fixed inside eclipse, but still doesnt work on my phone :-/
Edit: Log
Edit 2 : working just fine without button
Edit 3: Figured it out
Last edited:
G
GuestD2623
Guest
Guys how can i add menu to the imagebutton thing ?
so when i click it a option bar show so i can add some other activities.
and thanks alot for the guid thread.
so when i click it a option bar show so i can add some other activities.
and thanks alot for the guid thread.
This may be what you're looking for - http://stackoverflow.com/questions/3720804/android-open-menu-from-a-button
Sent from my Nexus 5 using Tapatalk
Similar threads
Top Liked Posts
-
There are no posts matching your filters.
-
28
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/[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 -
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/[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 -
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.
2
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.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:
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 here2
thanks for pointing it out, I'll edit the thread sometime.Thank you for this
One mistake though, the parts in bold and underlined should be removed.
Sent from my Nexus 5 using Tapatalk1Thank you for this
One mistake though, the parts in bold and underlined should be removed.
