Hello
I'm just starting out learning Android, and i only have basic C/C++ programming knowledge, but i've decided to make an app related to my school (just to test Android programming).
I have a UI such as this:
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
And i want to add 1 line between each menu selection. I can do this easily with a <View> and width=match parent and height=1dp in the .xml file (as i've done on the picture showed above), but the problem is that i have around 30-40 xml files where i need this in (Really big menu selection )
Is there any way to simplify this?
I have tried to add my own xml file in the /res/drawable/ folder and that worked out fine with adding the android:background="@xx", but i only want the line inbetween the menu selections, not an entire frame around it.
I tried with the android:shape="line", but i couldn't figure out a way to move it up and down, it was always right in the center of the button.
I hope someone can help me out
- Moon
OK, I guess you want to do it in xml, because you could also add it programatically in a for loop to your list view.
The idea with an own xml file is not bad, though normally you'd want to extend a custom View. This means you create a new xml file with a single text view in your layout folder and then add it to your activity layout via
Code:
<com.example.app.custom_view
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
I don't think you can go shorter using xml. If it is only a list view, you might want to look at some custom list views or at this question here.
Thanks for the reply
I'm still very new to this, so "extend a custom View" says little to me i'm afraid (i'll try and google it and get a better understanding though)
I can easily make a new xml file with a android:shape="line" and set the width to 1dp, but then it ends up like this:
(Just talking about the 1st line)
I don't see any way of forcing it to move further down
I'm currently simply using <LinearLayout> with 7x <Button>. It can most likely be done in 47 other ways, all much smarter, but this currently works for my skill level and for what i need
Would really like to simply create 1 xml file with the properties of the line and then be able to call that xml file whenever i need to input a line in my UI. So if i ever need to change the line width, color or something, i can just change it 1 place and it'll do it all over my app.
I've done this with the actionbar dropdown in the .java files with Extend, but not sure how to go about doing it with xml (prefer xml for the UI)
It's probably extremely easy, but.. ye.. :/
- Moon
Moonbloom said:
Thanks for the reply
I'm still very new to this, so "extend a custom View" says little to me i'm afraid (i'll try and google it and get a better understanding though)
I can easily make a new xml file with a android:shape="line" and set the width to 1dp, but then it ends up like this:
(Just talking about the 1st line)
I don't see any way of forcing it to move further down
I'm currently simply using <LinearLayout> with 7x <Button>. It can most likely be done in 47 other ways, all much smarter, but this currently works for my skill level and for what i need
Would really like to simply create 1 xml file with the properties of the line and then be able to call that xml file whenever i need to input a line in my UI. So if i ever need to change the line width, color or something, i can just change it 1 place and it'll do it all over my app.
I've done this with the actionbar dropdown in the .java files with Extend, but not sure how to go about doing it with xml (prefer xml for the UI)
It's probably extremely easy, but.. ye.. :/
- Moon
Click to expand...
Click to collapse
OK so I googled a bit and it seems to be much easier using a ListView, consider this artcle for how to use it. Then customize the deviders as asked here.
If you really want to stay with the LinearLayout (don't do it!), do it like this:
For the Buttons (not necessarily):
1. create a new xml file (something like "mybutton.xml") in the layout folder.
2. copy your Button code in a single <Button ... /> but leave out the id (and text probably).
3. in your LinearLayout, insert Buttons like this (com.example.app is your appname):
Code:
<com.example.app.mybutton
android:id="@+id/whatever
android:text="@string/thiscanbedoneprogrammaticallyalso"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
For the seperators:
1. same as above ("mydevider.xml")
2. something like this:
Code:
<TextView
android:background = "#FFFFFF"
android:height= "1px"
android:width = "match_parent"
(use 1px and not dp!)
3. same as above (with .mydevider and no text )
I fiddled around with it a bit before seeing your latest post, and got it to work
Added an xml file named "button_divider" and added this code into it:
Code:
<?xml version="1.0" encoding="utf-8"?>
<View xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@android:color/white"
/>
then i simply added
Code:
<include layout="@drawable/button_divider" />
where ever i wanted to draw a line, and it works exactly how i wanted it to
(i know it should probably be in the layout folder, but just added it in drawables to test it out, can always move it, not like it does anything differently)
I'll definately look into ListView, seems like it's build exactly for what i need ^^
But now i at least have a working'ish version of what i needed
Thanks alot for the help, i might be back here on these forums again at some point
- Moon
Shouldn't you just use a listview?
SimplicityApks said:
OK so I googled a bit and it seems to be much easier using a ListView, consider this artcle for how to use it. Then customize the deviders as asked here.
If you really want to stay with the LinearLayout (don't do it!), do it like this:
For the Buttons (not necessarily):
1. create a new xml file (something like "mybutton.xml") in the layout folder.
2. copy your Button code in a single <Button ... /> but leave out the id (and text probably).
3. in your LinearLayout, insert Buttons like this (com.example.app is your appname):
Code:
<com.example.app.mybutton
android:id="@+id/whatever
android:text="@string/thiscanbedoneprogrammaticallyalso"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
For the seperators:
1. same as above ("mydevider.xml")
2. something like this:
Code:
<TextView
android:background = "#FFFFFF"
android:height= "1px"
android:width = "match_parent"
(use 1px and not dp!)
3. same as above (with .mydevider and no text )
Click to expand...
Click to collapse
Tried to get this to work, while im working on figuring out how to use ListView instead as it seems (according to the two of you) that it's much better
I ran into a problem though.. I made a new xml file in the layout folder named "master_button", pasted this code in there:
Code:
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:textSize="25sp"
android:textColor="@color/Blue"
android:background="@android:color/transparent" />
Then i tried using your solution with <com.example.app.mybutton> (i ofc changed to the real name) but nothing would show up at all.. It seemed to need a class (java file) to be able to do it, but that just went horribly wrong when i tried adding it..
Then i tried to use <Include layout="xx"> as i did with the line earlier.. I can set the android:id="xx" easily, but it seems i cant set the android:text="xx".
Off to try out some more stuff and see if i can get anything working ^^
I think that is because you use the weight in the Button. If you set the width to 0 and it's ignoring the weight you will not see anything Try removing the weight(and probably width and height as well) in the Button and put it in your LinearLayout, where you insert your Button.
Found an easier solution for your Seperators:
I added this to my styles:
Code:
<style name="Divider">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">1dp</item>
<item name="android:background">?android:attr/listDivider</item>
</style>
Then in my layouts is less code and simpler to read.
Code:
<View style="@style/Divider"/>
Click to expand...
Click to collapse
here's the link: linklinklink
Should really just use listview next time. it does it automagically.
Related
Hi!!
I've released a prebeta of 0.9.4 version to public. This version has the posibility to include moveable widgets. I post this thread to show an example on how to build simple but powerfull widgets.
For example I've done in about 20 minutes this S2P widget:
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
The code is this one:
Code:
<?xml version="1.0" encoding="utf-8"?>
<panel name="S2PWidget" width="116" height="106">
<icon X="0" Y="0" path="widgets\S2PWidget\back.png"/>
<panel name="Cover" X="3" Y="3" width="70" height="70">
<icon path="widgets\S2PWidget\album.png" exec="#@S2PPath#" height="70" width="70">
<event type="MouseDown"><action execute=":Script" parameters="S2PWidget:Set(MoveLock,true)"/></event>
</icon>
<icon path="#$Registry,HKEY_CURRENT_USER\Software\A_C\S2P\CurrentAlbum#" exec="#@S2PPath#" height="70" width="70">
<event type="MouseDown"><action execute=":Script" parameters="S2PWidget:Set(MoveLock,true)"/></event>
</icon>
</panel>
<icon X="83" Y="5" name="Prev" exec="#$THROTTLE#\Util\S2PControl.exe" params="Previous" path="widgets\S2PWidget\previous.png"/>
<icon X="78" Y="35" name="Play" exec="#$THROTTLE#\Util\S2PControl.exe" params="PlayPause" path="widgets\S2PWidget\#$Registry,HKEY_CURRENT_USER\Software\A_C\S2P\Status,map,[0-pause|default-play]#.png"/>
<icon X="83" Y="75" name="Next" exec="#$THROTTLE#\Util\S2PControl.exe" params="Next" path="widgets\S2PWidget\next.png" />
<text name="Artist" X="3" Y="70" width="70" height="30" alignment="Near" fontcolor="255,255,255" fonttype="7,true" text="#$Registry,HKEY_CURRENT_USER\Software\A_C\S2P\CurrentTitle#" leftmargin="0" textheight="30" textwidth="70" topmargin="2" spacing="0" />
</panel>
As you see it's 16 lines of code for a realtively complex widget that controls S2P .
To install the widget just un compress the zip file to \Program Files\ThrottleLauncher\Widgets and it should now appear when you click the plus button of the widgets page.
If you include Mortscripts in the ecuation.... you can have almost anything done!! .
Hope you'll find this interesting and contribute if you develop cool widgets .
edit: I forgot. You can also include any widget in any page you want by adding <widget name="NAME"/> where name is the folder of the widget. This way you can design module based themes and you can reuse components from one theme to another!
Thanks!!
i'm gonna hardreset and start exploring your new beta.. try to write something of my own as well..
thanks man.
Thanks! I think I'm going to ditch M2D for this
-Arturo- said:
Thanks! I think I'm going to ditch M2D for this
Click to expand...
Click to collapse
nir36 said:
i'm gonna hardreset and start exploring your new beta.. try to write something of my own as well..
thanks man.
Click to expand...
Click to collapse
Thanks to both... . I know it's bad that I'm the one telling it.... but I really thing this is worth a try.
Nice work, keep it up!
made it little bigger and placed buttons under album image and placed on home tab?looks great?tnx
LeAdReW said:
made it little bigger and placed buttons under album image and placed on home tab?looks great?tnx
Click to expand...
Click to collapse
You mean that you've done that?... or is it a request? It's really eassy to do it , hope you've managed to do it...
I just installed the release and I can't find how to get the widgets, sry about the noob question
pgiuoco said:
I just installed the release and I can't find how to get the widgets, sry about the noob question
Click to expand...
Click to collapse
Widgets are in the last tab of the footer. You should see a page with a [+] icon on it... click on the [+] and a dialog must show with the available widgets. Select wichever you want and hit ok, they should appear after a little delay....
nice work mate, keep it up
lol i accidentally installed the old verson off my sdcard, thx again for for your help
Techie87 said:
nice work mate, keep it up
Click to expand...
Click to collapse
Thanks!!
pgiuoco said:
lol i accidentally installed the old verson off my sdcard, thx again for for your help
Click to expand...
Click to collapse
Hehehe, you have scared me for a moment . Glad it was such a simple thing .
!!!
Posted More Plz Thx And New Ideas
Gosh
Will you ever stop improving your software ?
Amazing job, this app just gets better with every release
I will try some tweaks myself asap
Thx for your job !
i have done it,its really easy to customize,tnx,now i delete album art to make it less in height,only track info and buttons
AP, can you describe some more Event types? I cant seem to find the documentation on that. Also can you describe the scripts as well that are mentioned in this line of code:
execute=":Script" parameters="S2PWidget:Set(MoveLock,true)
jdiperla said:
AP, can you describe some more Event types? I cant seem to find the documentation on that. Also can you describe the scripts as well that are mentioned in this line of code:
execute=":Script" parameters="S2PWidget:Set(MoveLock,true)
Click to expand...
Click to collapse
Sorry... I know this is not documented still... that's what the wiki on my web is for .
This is what I can give you right now....
You can specify event's inside Elements and inside pages. Inside each event you can specify as much actions as you want. Here you have an example you can place inside a Page to make it lauch an app:
Code:
<event type="PageShow">
<action execute="#$THROTTLE#\Util\PruebaMAPI\Message2Reg.e xe" parameters="#@SMSAccount# Refresh"/>
</event>
Possible events are:
- For pages: PageLoad,PageUnload,PageShow,PageHide,UpDownGesture,DownUpGesture,LeftRightGesture,RightLeftGesture,ChangeToLandscape,ChangeToPortraitvalid for pages.
- For elements: Click,ElementUpdate
- For elements inside rows with advancedevents="true" (like the widgets page): MouseDown,MouseOver,MouseUp.
Possible actions are (the same that for icons and texts)
- Any executable file with params
- age (parameter is the page name to load)
- :Exit
- :Apps2Cat (parameter is the category to assign)
- :Reload
- :OthersPage (parameter is the page number)
- :Minimize
- :Config
- :ConfigSetup
- :Script: this is the most complicated. execute=":Script" and the param must match this pattern XXXXXX:YYYY(args). for example: <action execute=":Script" parameters="Battery:Refresh()"/>
XXXXXX is the name of the element to change
YYYY is the method to call. Methods supported are:
o Set: Set(Property,value) will set the property to the target value. Valid properties are Name,X,Y,Width,Height,Visible. LocketState is also valid, if set to true the element will follow the finger arround the screen and inside it's containing row until it's released.
o Refresh: supports:
+ (). Will update the whole XXXXXX element
+ (num) will update the XXXXX and the num pixels arround it.
+ (numX,numY) numX means margin in X and numY means margin Y.
+ (x,Y,Width,Height) all the numbers represent margin. To update an especific area watch the next command.
o RefreshRectangle: suports (X,Y,Width,Height)
o Add. Supports (Property,number) will set the property to the property value plus number. Only valid for numeric properties.
o Complement. Supports (property). Only valid for boolean properties (Visible). Will complement it.
WOW!
This totally makes ThrottleLauncher very customizable, especially with MortScript!
Thanks for the help.
jdiperla said:
WOW!
This totally makes ThrottleLauncher very customizable, especially with MortScript!
Thanks for the help.
Click to expand...
Click to collapse
That's the target .
Thank you for your interest!
Hi XDA Developers,
Is it possible to set the TabPageIndicator of ViewPagerIndicator to the center? Like this:
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
And is it possible to set the individual tab width and height? And set that tab to a drawable that support selected/pressed states?
I've not found it yet.
Thanks in advance.
The app on the image is Untis Mobile and can be found on the PlayStore.
I've already ask the creators how they do it but they said the app isn't open source. (But I have found in the source that they do it with TwoDScrollView, but I'm not sure)
Alwaysup said:
Hi XDA Developers,
Is it possible to set the TabPageIndicator of ViewPagerIndicator to the center? Like this:
And is it possible to set the individual tab width and height? And set that tab to a drawable that support selected/pressed states?
I've not found it yet.
Thanks in advance.
The app on the image is Untis Mobile and can be found on the PlayStore.
I've already ask the creators how they do it but they said the app isn't open source. (But I have found in the source that they do it with TwoDScrollView, but I'm not sure)
Click to expand...
Click to collapse
If you know how many tabs you have, then yes (use viewPager.setCurrentItem(total/2))
In terms of styling it, you could do something like this in values/styles.xml...
Code:
<style name="AppBaseTheme" parent="android:Theme.Light">
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- ..... -->
<item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
</style>
<style name="CustomTabPageIndicator">
<item name="android:gravity">center</item>
<item name="android:background">@drawable/bg_tabindicator_statelist</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingRight">8dp</item>
<item name="android:paddingTop">12dp</item>
<item name="android:paddingBottom">12dp</item>
<item name="android:fadingEdge">horizontal</item>
<item name="android:fadingEdgeLength">8dp</item>
<item name="android:textAppearance">@style/TextAppearance.TabPageIndicator</item>
<item name="android:maxLines">1</item>
</style>
PicomatStudios said:
If you know how many tabs you have, then yes (use viewPager.setCurrentItem(total/2))
In terms of styling it, you could do something like this in values/styles.xml...
Code:
<style name="AppBaseTheme" parent="android:Theme.Light">
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- ..... -->
<item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
</style>
<style name="CustomTabPageIndicator">
<item name="android:gravity">center</item>
<item name="android:background">@drawable/bg_tabindicator_statelist</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingRight">8dp</item>
<item name="android:paddingTop">12dp</item>
<item name="android:paddingBottom">12dp</item>
<item name="android:fadingEdge">horizontal</item>
<item name="android:fadingEdgeLength">8dp</item>
<item name="android:textAppearance">@style/TextAppearance.TabPageIndicator</item>
<item name="android:maxLines">1</item>
</style>
Click to expand...
Click to collapse
Thanks for the styling advice, I've now styled as I wanted. :good:
But when I do viewPager.setCurrentItem(5); (I've ten items) it stays on the middle and I'm not able to select a other day. (I call it in onPageScrolled). Is it possible that the item stays in the middle even if I scroll (just as the example)?
Alwaysup said:
Thanks for the styling advice, I've now styled as I wanted. :good:
But when I do viewPager.setCurrentItem(5); (I've ten items) it stays on the middle and I'm not able to select a other day. (I call it in onPageScrolled). Is it possible that the item stays in the middle even if I scroll (just as the example)?
Click to expand...
Click to collapse
Ah OK I see, as you scroll the selected one needs to be in the middle...
From memory I thought it did that by default, with the exception that if you're at either end of the list it won't scroll the screen unnecessarily.
Do you see something different ?
Looking at the ViewPagerIndicator test app (G. Play) if you go to Tabs/Default and scroll from Albums -> Songs, the selection will stay in the middle. Other movements won't since they are already on the screen.
In your case it might be possible to increase the number of days displayed (from 10 -> say, 20) to produce the same effect ?
PicomatStudios said:
Ah OK I see, as you scroll the selected one needs to be in the middle...
From memory I thought it did that by default, with the exception that if you're at either end of the list it won't scroll the screen unnecessarily.
Do you see something different ?
Looking at the ViewPagerIndicator test app (G. Play) if you go to Tabs/Default and scroll from Albums -> Songs, the selection will stay in the middle. Other movements won't since they are already on the screen.
In your case it might be possible to increase the number of days displayed (from 10 -> say, 20) to produce the same effect ?
Click to expand...
Click to collapse
When I add 20 items it stays on the middle but only from item 4 to item 17, item 1, 2, 3, 18, 19, 20 are not in the middle. See:
Can I add a 3 empty items (or empty space) to ensure that the first and last items are in the middle? Something like this (from the Untis Mobile app):
I'll really appreciate your help. :good:
Alwaysup said:
When I add 20 items it stays on the middle but only from item 4 to item 17, item 1, 2, 3, 18, 19, 20 are not in the middle. See:
Can I add a 3 empty items (or empty space) to ensure that the first and last items are in the middle? Something like this (from the Untis Mobile app):
I'll really appreciate your help. :good:
Click to expand...
Click to collapse
OK, that's the behaviour I would expect (no centering if scrolling not required)... I haven't tried altering that myself.
I was going to suggest posting an issue with the vpi guys but I can see you've already done that !
I suppose you could try programatically setting padding etc at the right points but I'm not sure how well that would turn out.
Hopefully someone will know on github. If not, there's probably no easy way.
PicomatStudios said:
OK, that's the behaviour I would expect (no centering if scrolling not required)... I haven't tried altering that myself.
I was going to suggest posting an issue with the vpi guys but I can see you've already done that !
I suppose you could try programatically setting padding etc at the right points but I'm not sure how well that would turn out.
Hopefully someone will know on github. If not, there's probably no easy way.
Click to expand...
Click to collapse
I've tried to set programmatically the padding using android:paddingLeft and android:paddingRight in CustomTabPageIndicator but that doesn't work.
Indeed, hopefully someone will have an answer. I've also asked on Stack Overflow and they refer me to android-spinnerwheel. If I've no answers on this problem I will look into that.
Hey guys this is the image which I would like to set at the top of every layout below the action bar...I dont want to include and set it in each and every layout.
So any alternatives for the same. I want this image to be displayed in all oof my application.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
coolbud012 said:
Hey guys this is the image which I would like to set at the top of every layout below the action bar...I dont want to include and set it in each and every layout.
So any alternatives for the same. I want this image to be displayed in all oof my application.
Click to expand...
Click to collapse
If it is just one view, you can do it similar to the dividers in the third answer to this question. Have a style for the list heading (probably referencing the system or support library resources, depending on the lowest API you use) and then just add the small view wherever you want it. There is also another way using the <include> tag, so you can use a separate xml file to declare your header layout.
SimplicityApks said:
If it is just one view, you can do it similar to the dividers in the third answer to this question. Have a style for the list heading (probably referencing the system or support library resources, depending on the lowest API you use) and then just add the small view wherever you want it. There is also another way using the <include> tag, so you can use a separate xml file to declare your header layout.
Click to expand...
Click to collapse
I dont want to go with include even that way I would have to put the include in every layout.
Should I go with and put this into BaseActivity.java so that it would be loaded with each activity.
Code:
View view = new View(this);
view.setLayoutParams(new LayoutParams(2,LayoutParams.FILL_PARENT));
view.setBackgroundColor(Color.BLACK);
layout.add(view);
Or should I go with this only :
Code:
<style name="Divider">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">1dp</item>
<item name="android:background">?android:attr/listDivider</item>
</style>
Then in my layouts is less code and simpler to read.
<View style="@style/Divider"/>
But the main issues with using the style is that I am using 1 style for layouts in which I am repeating the layout...and I cant use 2 styles for 1 ViewGroup...
I want to know the most optimized way...
coolbud012 said:
I dont want to go with include even that way I would have to put the include in every layout.
Should I go with and put this into BaseActivity.java so that it would be loaded with each activity.
Code:
View view = new View(this);
view.setLayoutParams(new LayoutParams(2,LayoutParams.FILL_PARENT));
view.setBackgroundColor(Color.BLACK);
layout.add(view);
Or should I go with this only :
Code:
<style name="Divider">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">1dp</item>
<item name="android:background">?android:attr/listDivider</item>
</style>
Then in my layouts is less code and simpler to read.
<View style="@style/Divider"/>
But the main issues with using the style is that I am using 1 style for layouts in which I am repeating the layout...and I cant use 2 styles for 1 ViewGroup...
I want to know the most optimized way...
Click to expand...
Click to collapse
Well I don't think there is an easy way to get around putting one line in every layout. So I assume that you want to use a single ImageView to show the image, so create a
Code:
<style name="header">
<item name="android:scr">@drawable/yourimage</item>
<!-- additional information like scale Type and such -->
</style>
And then in each layout, just add
<ImageView style="header"/>
Wherever you need it. I think that's the simplest way to do it.
SimplicityApks said:
Well I don't think there is an easy way to get around putting one line in every layout. So I assume that you want to use a single ImageView to show the image, so create a
Code:
<style name="header">
<item name="android:scr">@drawable/yourimage</item>
<!-- additional information like scale Type and such -->
</style>
And then in each layout, just add
<ImageView style="header"/>
Wherever you need it. I think that's the simplest way to do it.
Click to expand...
Click to collapse
Ok thanks for the suggestion...what about the first way I have described above?
else will follow what you have instructed...
coolbud012 said:
Ok thanks for the suggestion...what about the first way I have described above?
else will follow what you have instructed...
Click to expand...
Click to collapse
Ah you're right, you could also do it programmatically. Not sure what the best way would be, but you could create an abstract class HeaderActivity that would contain the code in the onCreate() so all your activities could extend that class instead of Activity or FragmentActivity. You would need to have one ID for all your top level layout, to call findViewById(R.id.top_view).addView(imageView, 0);
In the HeaderActivity. And you could also set your layout directly in its onCreate with an abstract method getLayoutId.
SimplicityApks said:
Ah you're right, you could also do it programmatically. Not sure what the best way would be, but you could create an abstract class HeaderActivity that would contain the code in the onCreate() so all your activities could extend that class instead of Activity or FragmentActivity. You would need to have one ID for all your top level layout, to call findViewById(R.id.top_view).addView(imageView, 0);
In the HeaderActivity. And you could also set your layout directly in its onCreate with an abstract method getLayoutId.
Click to expand...
Click to collapse
seems to be a great idea but...I had dropped out the idea of header and instead simplified the app header a bit...
Have a look at https://play.google.com/store/apps/details?id=com.droidacid.apticalc
U can create one Base Activity which extends "FragmentActivity" or "SherlockFragmentActivity"(if u use it) and then put that header on the top...below it create a fragment and in the whole app just replace that fragment and stay in one activity only..then u just need to have only one layout for the header and you can do the rest very easily....
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
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.
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:
Great job on reaching portal. Shouldn't be surprised from your previous works. Are you planning on adding these changes to your themed apps?
Fitchman said:
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:
Click to expand...
Click to collapse
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.
pandasa123 said:
Great job on reaching portal. Shouldn't be surprised from your previous works. Are you planning on adding these changes to your themed apps?
Click to expand...
Click to collapse
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
Beautiful! This is how it looks.... Thanks for such resources!!!
Thank you for this
One mistake though, the parts in bold and underlined should be removed.
krishneelg3 said:
Code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/[COLOR="Red"]menu_[b][u]button_[/b][/u]blue[/COLOR]"
android:state_focused="true"
android:state_pressed="true" />
<item android:drawable="@drawable/[COLOR="red"]menu_[b][u]button_[/b][/u]blue_pressed[/COLOR]"
android:state_focused="false"
android:state_pressed="true" />
<item android:drawable="@drawable/[COLOR="red"]menu_[b][u]button_[/b][/u]blue_pressed[/COLOR]"
android:state_focused="true" />
<item android:drawable="@drawable/[COLOR="red"]menu_[b][u]button_[/b][/u]blue[/COLOR]"
android:state_focused="false"
android:state_pressed="false" />
</selector>
Click to expand...
Click to collapse
XxPixX said:
Thank you for this
One mistake though, the parts in bold and underlined should be removed.
Click to expand...
Click to collapse
thanks for pointing it out, I'll edit the thread sometime.
Sent from my Nexus 5 using Tapatalk
Thank you, Thats awesome! Under which license is this released? Read the readme, but I am not sure.
I am getting this error :
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
Ashutos1997 said:
I am getting this error :
Click to expand...
Click to collapse
Try @string/app_name and let me knows what happens. It shouldn't give an error. also, hover your mouse on the "error" icon thing. and it'll tell you what the issue is, let me know what it says.
Sent from my Nexus 5 using Tapatalk
Ashutos1997 said:
I am getting this error :
Click to expand...
Click to collapse
Just delete those comments
Update : error solved. Thanks for the resources
---------- Post added at 07:26 PM ---------- Previous post was at 06:58 PM ----------
bamsbamx said:
Beautiful! This is how it looks.... Thanks for such resources!!!
Click to expand...
Click to collapse
Just asking, how u added "Hello, Quantum" inside the card ?
---------- Post added at 07:34 PM ---------- Previous post was at 07:26 PM ----------
Added a scroll view, looks good
it looks like this is mainly for android 4.4? will it work on all or is it just for 4.4?
Sahaab said:
it looks like this is mainly for android 4.4? will it work on all or is it just for 4.4?
Click to expand...
Click to collapse
Only 4.4 i guess.
Ashutos1997 said:
Only 4.4 i guess.
Click to expand...
Click to collapse
ya thought so, anywayz it is an awesum guide
wanted to use it :-/ but im on 4.3 XD
Here's my app, haven't done much to it yet. Still gotta add a lot.
I changed a few of the resources too to suit my taste
I uploaded the basic app structure / template for the QuantumPaperUI , It includes :
Two cards
Scroll View
Green color
Sahaab said:
ya thought so, anywayz it is an awesum guide
wanted to use it :-/ but im on 4.3 XD
Click to expand...
Click to collapse
you may use it for 4.3 or any android version, but you won't be able enable transparent bars.
Sent from my Nexus 5 using Tapatalk
krishneelg3 said:
you may use it for 4.3 or any android version, but you won't be able enable transparent bars.
Sent from my Nexus 5 using Tapatalk
Click to expand...
Click to collapse
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
A Beginner's Guide to Make Android Apps
Most of the tutorials out in blogs and YouTube say you need not have any kind of programming experience to make apps. Well, that's not the truth. To make apps, you've got to have basic knowledge of programming, let it be some easy programming language like #C, Java Basics, XML, HTML, etc.
If you don't have any kind of programming experience, visit this link to learn or if I find time, I'll post a few links and educational sites to learn making apps for free.
Click to expand...
Click to collapse
How did I learn to make apps and how long it took?
I was a member in the Xperia 2011 device line up and loved porting apps, making ROMS for those lineup. However, my goal was to code apps and make UX. The main difficulty was to find resources and the next one was understanding it without a classroom experience. After all this managing time was another headache. So I used to give up learning new things easily.
Once I started seeing a downfall in the development for the devices, I made up my mind to learn making better UI/UX. That's when I got into making Zooper Widgets and Homscreen Designs. This was just a drill to understand how can someone make their Android Homescreen look beautiful. Things changed and I had to move to the United States and stopped making Homescreens.
Later, I started referring to java concepts even though I knew how to code. Brushed my XML and HTML coding techniques and gave it a shot and it paid off! Since then (2015 October) till date, I've been making apps for my school and personal use with no intentions to upload them to play store.
Click to expand...
Click to collapse
The below image shows our journey to become a professional android app developer. However, one cannot become a professional app developer over night or by going through this guide. You can almost reach half way through if you're understanding and practicing things right.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
To finish the other half, I'd recommend learning it from code camps or attending school or may be by researching things and learning it from other developers or by yourself.
Step1:
Let's not get into writing the code itself first. We first need to understand what are views, layouts, modifying the views and also positioning the views.
I will try my best to refer https://developers.google.com/ resources the most here to make things easy for everyone.
View: A View is a rectangular area visible on the screen. It has a width and height, and sometimes a background color.
ImageView: An ImageView displays an image such as an icon or photo
TextView: A TextView displays text
Button: A Button is a TextView that is sensitive to touch: tap it with your finger and it will respond
ViewGroup: ViewGroup is a big View—often invisible—that contains and positions the smaller Views inside of it.
To understand better with an example visit this linkand start typing in the above definitions in the grey search box
Click to expand...
Click to collapse
Now I assume that everyone's gone through the above link and searched for each item and how does it look like. To implement a view/layout we need a place to code and a language to make the computer understand that we are coding to implement a view.
The place where we code or simply the IDE we will be using is strictly Android Studio. Why is it only Android Studio? You can use any alternative IDE. However, Using Android Studio makes life easier to manage both SDK, the android projects and the IDE helps you finish the code by actively prompting.
The language in which we will be writing the code is XML. XML stands for Extended Markup Language.
Let's take up an example to write a code for a TextView in XML and how does it look as a view.
Code:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello XDA!"
android:textSize="40sp"/>
If the above code is executed, the TextView Looks like this,
Before we even go and talk about the things that are present in the code, Let's understand the syntax of xml. Syntax is nothing but rules to define what a valid XML is. If the syntax isn't right, it wouldn't even show up on your android device.
Here's the syntax for xml
Code:
<ViewName
attribute: "attribute_value"/>
If you carefully observe the syntax, the xml tag/code opens with a opening angle brackets "<" followed by the ViewName in "Camel Case"
The next line has a attribute. attributes must always be lowercase. if you enter it camel case or any other format, you end up with errors.
For every attribute, you'll have a attribute value assigned within "quotes"
You can have any number of attributes as long as they are valid.
The close the xml code. You'll use a forward slash "/" and a closing angle bracket ">"
In the above shown example for a text view, the type of xml code we used is called as a "Self-Closing" tag. An xml can be closed in many different ways. One of the way is "Self-Closing" and the other one is by having "children tags". An example for that tag is shown below.
Code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.aneel.xda.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello XDA!"
android:textSize="40sp"/>
</RelativeLayout>
If we observe. the ViewType in the beginning says "<RelativeLayout" and the end of declaring the "Relative Layout" is just done by using a ">" not a "/>" this is because, ">" indicates there is something after that or in simple words, it's not the end of XML. Right below that there is a child tag for "TextView" which ends right there followed by the "</RelativeLayout". So this means, the "TextView" is a part of "RelativeLayout"
we can close an xml either by "/>" or </ViewName>"
Styling the views
Step2: Styling the views
Now that we know how the code looks for TextView/ButtonView/ImageView, Let's get into styling the views as per our choice.
Code:
<View
android:layout_width="100px"
android:layout_height="100dp"
android:background="#4E4B4F" />
The above code generates a line instead of a box. WE usually make polygons and shapes in px. However, there is a very special reason why we shouldn't be using px (pixels). Every screen is covered by pixels and to understand better, See the image below and look how 2px width and 2px height looks like on different devices.
The dimesnion 2px x 2px in a mdpi device is good to touch and see. the same resolution in a hdpi is also good to see and touch, but when it comes to a xhdpi device we barely can see the pixels. This is the reason why we should use dp (density independent pixels) if we are defining the dimensions of any view.
Lets see the same devices with 2dp x 2dp and see how it looks.
Voila! The 2dp is evenly spread out on all the devices unlike the 2px.
Let's learn a few layout based definitions to understand the code. I'm taking the definitions from developer.google.com again to make it easy for everyone to refer in the future.
wrap_content: We can specify the width or height of a View as a given distance. Alternatively, we can specify it as the special value wrap_content to shrink-wrap the View around its content.
match_parent: To allow a View to expand horizontally to occupy the full width of its parent, we set the View’s layout_width attribute to the special value match_parent. Similarly, to let a View expand vertically to occupy the full height of its parent, we set its layout_height to match_parent.
Click to expand...
Click to collapse
Now let's learn how to set a text size in a ViewType. Just like giving dimensions to a view as "dp" we use "sp"(scale independent pixels) to set the size of text.
Let's look at an example code.
Code:
<TextView
android:textSize="50sp"/>
We can add this line to any view which has text in it. By using "sp" the text looks consistent in all types of devices.
Here's a reference to the material design's typography styles. https://material.google.com/style/typography.html#typography-styles
Please check back in a few hours for more content.
reserved for Daniel Radcliff's magic
Wait, don't forget about Kevin Hart's post here
P.S: Apologies to the moderators. Reserving a lot of place for the guide. Just one more.
reserved
Kudos for the nice guide. http://tutorialspoint.com/ is also another great place to learn.
Sent from my HTC Desire 626s using Tapatalk