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.
Related
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.
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
{
"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"
}
This tutorial is about New Android API called ShortcutManager, introduced in API Level 25.
By ShortcutManager you can design a better User Experience (UX) for Normal Apps & Launcher Apps (Home).
This is very useful API that increases the productivity of Apps & so users. App Shortcuts are the link to inner part of an app.
If your app targets Android 7.1 (API level 25) or higher, you can define shortcuts to specific actions in your app. These shortcuts can be displayed in a supported launcher. Shortcuts let your users quickly start common or recommended tasks within your app.
Read More
Click to expand...
Click to collapse
The ShortcutManager manages an app's shortcuts. Shortcuts provide users with quick access to activities other than an app's main activity in the currently-active launcher. For example, an email app may publish the "compose new email" action, which will directly open the compose activity. The ShortcutInfo class contains information about each of the shortcuts themselves.
Read More
Click to expand...
Click to collapse
List of Geeks Empire Open Source Projects based on Android 7.1.+ AppShortcut API
- Super Shortcut
- Phone App
# Let Start #
What do you need to get started...
- To Learn: Create Hello World Project
- To Implement: You must have an App with different Activities.
Click to expand...
Click to collapse
What will you learn...
- Creating Launcher App
- Add & Get Info from Shortcut Manager
- Working with List<>
Click to expand...
Click to collapse
Index
- Implement App Shortcut to your App -- Static Shortcuts | Dynamic Shortcuts
- Retrieve ShortcutInfo as Default Launcher App
Thanks for Supporting GeeksEmpire projects
Don't Forget To Hit Thanks
Implement AppShortcuts [Static|Dynamic]
You can publish two different types of shortcuts for your app:
- Static shortcuts are defined in a resource file that is packaged into an APK. Therefore, you must wait until you update your entire app to change the details of these static shortcuts.
- Dynamic shortcuts are published at runtime using the ShortcutManager API. During runtime, your app can publish, update, and remove its dynamic shortcuts.
Click to expand...
Click to collapse
# Static Shortcuts
(If you have Camera App, it is reasonable to create static shortcuts to Selfie Activity, Video Recording or etc.)
Like other resources, you need to define Static Shortcuts inside the .xml file under app/res/xml/static_shortcuts_info.xml and call it inside AndroidManifest.xml
Code:
<shortcuts xmlns:android="http://schemas.android.com/apk/res/android">
<shortcut
android:shortcutId="some_string_must_be_different_for_each"
android:enabled="true"
android:icon="@drawable/icon"
android:shortcutShortLabel="text"
android:shortcutLongLabel="text"
android:shortcutDisabledMessage="warning_text">
<intent
android:action="android.intent.action.VIEW"
android:targetPackage="com.test.application"
android:targetClass="com.test.application.SomeActivity" />
<!-- If your shortcut is associated with multiple intents, include them here. The last intent in the list determines what the user sees whenthey launch this shortcut. -->
<categories android:name="android.shortcut.conversation" />
</shortcut>
<!-- Add More* -->
</shortcuts>
* Add more AppShortcut is limited to each activity with ACTION_MAIN & LAUNCHER Category in intent filter
Code:
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
Get limited amount of AppShortcuts (Static/Daynamic combined) with
Code:
getSystemService(ShortcutManager.class).getMaxShortcutCountPerActivity()
after creating Static Shortcuts Info call them inside Manifest as meta-data inside activity tag with mentioned intent filter.
Code:
<activity android:name="Main">
<intent-filter>
<!-- activity with this intent filter can have app shortcut -->
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<meta-data android:name="android.app.shortcuts" android:resource="@xml/static_shortcuts_info.xml" />
</activity>
Done!
# Dynamic Shortcuts
(If you have Online Shopping App, it is reasonable to implement Dynamic Shortcuts to New Available Product, Special Deals Information to show names or prices)
You need to add dynamic shortcuts in runtime. for example @onStart(Bundle){}
Code:
ShortcutManager shortcutManager = getSystemService(ShortcutManager.class);
List<ShortcutInfo> shortcutInfos = new ArrayList<ShortcutInfo>();
ShortcutInfo firstShortcut = new ShortcutInfo.Builder(getApplicationContext(), "different_text_for_each")
.setShortLabel("Deals")
.setLongLabel("Smartphone 20% Off")
.setIcon(Icon.createWithResource(context, R.drawable.icon_website))
.setIntent(new Intent(context, Activity.class))
.build();
ShortcutInfo secondShortcut = new ShortcutInfo.Builder(getApplicationContext(), "different_text_for_each")
.setShortLabel("NEW Phone")
.setLongLabel("Available April 1st")
.setIcon(Icon.createWithResource(context, R.drawable.icon_website))
.setIntent(new Intent(context, Activity.class))
.build();
shortcutInfos.add(firstShortcut);
shortcutInfos.add(secondShortcut);
shortcutManager.setDynamicShortcuts(shortcutInfos);
//after first time you can just update the value by [B]updateShortcuts(List<ShortcutInfo>)[/B]
You can remove one shortcut by calling removeDynamicShortcuts and set it is specific id (string)
Code:
removeDynamicShortcuts("string_of_id")
Or Just call this method
Code:
removeAllDynamicShortcuts()
Done!
Retrieve AppShortcuts as Launcher App [Default Home]
If you want to develop Launcher App, you can retrieve AppShortcuts Information to show them to your users.
NOTE: Launcher must be set as Default Home App to access this information.
This is simple Launcher Activity Config inside AndroidManifest.xml
Code:
<activity
android:name=".launcher"
android:label="@string/launcher"
android:icon="@drawable/ic_launcher_home"
android:launchMode="singleTask"
android:stateNotNeeded="true"
android:clearTaskOnLaunch="true"
android:theme="@android:style/Theme.DeviceDefault.Wallpaper">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<!-- required intent filter for Launcher App -->
<category android:name="android.intent.category.HOME"/>
<category android:name="android.intent.category.DEFAULT"/>
</intent-filter>
</activity>
Then you can go to Setting > Apps > Home (Select your Launcher).
So you should add this checkpoint inside your code to check if your app has permission (as default home) to get this info.
Code:
LauncherApps.hasShortcutHostPermission ()
For Launcher there is a special API, added in API 21 but methods for AppShortcuts added in API 25. (LauncherApps API)
Class for retrieving a list of launchable activities for the current user and any associated managed profiles that are visible to the current user, which can be retrieved with getProfiles(). This is mainly for use by launchers. Apps can be queried for each user profile. Since the PackageManager will not deliver package broadcasts for other profiles, you can register for package changes here. Read More
Click to expand...
Click to collapse
You set Package of an App to ShortcutQuery to retrieve info.
This method get all AppShortcuts (Static/Dynamic)
Code:
try {
LauncherApps launcherApps = (LauncherApps) getSystemService(LAUNCHER_APPS_SERVICE);
int queryFlags =
LauncherApps.ShortcutQuery.FLAG_MATCH_DYNAMIC
| LauncherApps.ShortcutQuery.FLAG_MATCH_MANIFEST
| LauncherApps.ShortcutQuery.FLAG_MATCH_PINNED;
ApplicationInfo applicationInfo = getPackageManager().getApplicationInfo(packageName, 0);
List<ShortcutInfo> shortcutInfoList = launcherApps.getShortcuts(
new LauncherApps.ShortcutQuery().setPackage(packageName).setQueryFlags(queryFlags),
UserHandle.getUserHandleForUid(applicationInfo.uid));
for (int i = 0; i < shortcutInfoList.size(); i++){
System.out.println("Shortcut :: " + shortcutInfoList.get(i).getShortLabel());
}
}
catch (Exception e){e.printStackTrace();}
Then it is your choice to design how you want to show it to your users. Simple PopupMenu or ListView...
Done!
Reserved 4
Reserved 5
Kindda looking for it
it really helped me
Update Info
開発者 said:
Kindda looking for it
it really helped me
Click to expand...
Click to collapse
Your Welcome
I've been working on a remodel of the overall UI of the NST/G for awhile, but as usual I did the easy stuff first, got cocky, and then got caught.
Here is the stock status bar:
{
"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"
}
Here is the stock status bar in the stock Reader:
OK, just to be totally clear this is what the status bars look like after NookManager gets through with the device, with the "back" and "menu" buttons added in the main bar.
Now the problem. Here's what I've got:
So...the clock is missing. I'm pretty sure it's still there, but the text color is white and that won't show up against the white background. (none of my changes have any effect on the Reader status bar where, of course, the clock time is black. I don't want to do anything with the Reader status bar version).
All of my changes are really changes in icons. The clock is not an icon (a widget?). My reading suggests that the layout for the status bar should be in the framework-res.apk, specifically res/layout/status_bar.xml (attached zip), but unlike the many examples I've seen, there is no mention of the clock. In fact I'm not even sure the xml file attached is controlling the layout of the stock status bar.
I've gone through system apps and jars looking for references to the status bar clock. I skipped the B&N apps because I have a device with all the B&N apps removed and there is still a clock on the status bar.
There is no comparable layout file in the Reader app for the status bar, so no way to compare.
I'm still looking but if there is anyone with an insight into Android 2.1 and where something like the clock display might hide, I'd like to hear about it.
In framework-res.apk:
Code:
style/TextAppearance.StatusBarTitle
textColor = ?textColorPrimary
textColorPrimary = @color/primary_text_dark
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:color="@color/bright_foreground_dark" />
<item android:state_enabled="false" android:color="@color/bright_foreground_dark_disabled" />
</selector>
color/bright_foreground_dark = #ffffffff
Just change it directly in the style: #ff000000
Renate said:
In framework-res.apk:
Code:
style/TextAppearance.StatusBarTitle
textColor = ?textColorPrimary
textColorPrimary = @color/primary_text_dark
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:color="@color/bright_foreground_dark" />
<item android:state_enabled="false" android:color="@color/bright_foreground_dark_disabled" />
</selector>
color/bright_foreground_dark = #ffffffff
Just change it directly in the style: #ff000000
Click to expand...
Click to collapse
OK, I understand the concept but not the execution. There is currently no style "TextAppearance.StatusBarTitle." Am I to create that? If so, wouldn't I need to refer to it in the status_bar.xml?
I do not understand the <selector> statement at all (except at face value). I have that "xmlns:android="http://schemas.android.com/apk/res/android" business at the top of the status_bar.xml but no "selector" tag. Maybe that's the reference I just mentioned in the previous paragraph.
Or.....should I just go into the colors and change "bright_foreground_dark" to #ff000000. That seems risky. That would then apply to everything governed by the framework-res.apk. I think.
Edit: nope, that last idea apparently does nothing.
This is in 1.2.2 FWR res/values/styles.xml TextAppearance.StatusBarTitle
res/color/primary_text_dark.xml is a selector
Renate said:
This is in 1.2.2 FWR res/values/styles.xml TextAppearance.StatusBarTitle
res/color/primary_text_dark.xml is a selector
Click to expand...
Click to collapse
Wow... "Never use Windows Notepad for a search" appears to be the moral. Notepad++ went right to it. How embarrassing.
So this is the current entry:
Code:
<style name="TextAppearance.StatusBarTitle" parent="@style/TextAppearance">
<item name="textAppearance">?textAppearanceSmall</item>
<item name="textStyle">bold</item>
<item name="textColor">?textColorPrimary</item>
</style>
I've located color/primary_text_dark.xml and I see that it contains the selector. So far so good. I've changed colors/bright_foreground_dark to #ff000000.
Which leaves me with an extra puzzle piece:
Code:
textColorPrimary = @color/primary_text_dark
Is that substituted for "textColor"? Or is it an added line in the style?
There are four levels of indirection, each shown in its own chunk.
Renate said:
There are four levels of indirection, each shown in its own chunk.
Click to expand...
Click to collapse
Truer words were never typed.
Edit: I see.
Code:
textColorPrimary = @color/primary_text_dark
is in /res/values/styles.
Therefore it seems the only thing to do is change the color value res/values/colors/bright_foreground_dark which I've done.
....And, it doesn't work. So I have misunderstood.
Apparently it's not there.
Renate said:
Apparently it's not there.
Click to expand...
Click to collapse
No, the whole thing is wonky. The examples I've seen (admittedly only back as far as ICS) all have explicit "clock" statements in the status bar layout xml. This has none. The clock just magically appears in that upper right hand corner.
In any case, I don't see how changing any of the things I've tried would do any good as I can't find any references to the style "TextAppearance.StatusBarTitle." So if no layout xml is referring to it, what good is changing it?
I'm close to "Uncle", but the illogic and obfuscation of the whole thing has inflamed my ire, so I'll keep poking around for something, although I have no idea what.
Edit: Oh boy....Changing that text color did have an effect, it just took me awhile to find it. Any system stuff that has a black background, like the App Manager, used to have white text. Now it has black text or "no" text for practical purposes. Cast too large a net.
Would you settle for lime green?
services.jar, smali/com/android/server/status/StatusBarIcon.smali
Code:
const/high16 v6, 0x41800000 # 16.0f
invoke-virtual {v4, v6}, Landroid/widget/TextView;->setTextSize(F)V
const v7, 0xff00ff00 # Line added for lime green
.line 46
invoke-virtual {v4, v7}, Landroid/widget/TextView;->setTextColor(I)V
Renate said:
Would you settle for lime green?
View attachment 5681603
services.jar, smali/com/android/server/status/StatusBarIcon.smali
Code:
const/high16 v6, 0x41800000 # 16.0f
invoke-virtual {v4, v6}, Landroid/widget/TextView;->setTextSize(F)V
const v7, 0xff00ff00 # Line added for lime green
.line 46
invoke-virtual {v4, v7}, Landroid/widget/TextView;->setTextColor(I)V
Click to expand...
Click to collapse
I think that phenolphthalein pink would be my choice if the screen were colored
Now see, I had services.jar in my sights and even looked at the smali file in question. But it was just too obscure for me. So thank you.
This works (but you knew that) and I am, once again, in your debt. Now I can finish my project instead of setting it aside. For the rest I am on ground I know well.
Yay !!!
another new project @nmyshkin ?
aiamuzz said:
Yay !!!
another new project @nmyshkin ?
Click to expand...
Click to collapse
Yep. I managed to score a pristine BNRV350 from ebay for $20. Totally blind purchase, no response from the seller, but something made me push that button...
It turned out to be a unit from near the end of the run when much of the "grayness" of the background had been addressed and there are no light diffusion artifacts! Like night and day compared to the first NSTG I got. This one's a keeper. It will become my principal reader.
So....I thought....the NSTG is 10 years old this year. Maybe time for a little "makeover"?
The status bar was the first step. I'm almost done with the last part. Just some complications in programming due the non-functional media scanner on the device.
You'll see. Soon.
nmyshkin said:
Yep. I managed to score a pristine BNRV350 from ebay for $20. Totally blind purchase, no response from the seller, but something made me push that button...
It turned out to be a unit from near the end of the run when much of the "grayness" of the background had been addressed and there are no light diffusion artifacts! Like night and day compared to the first NSTG I got. This one's a keeper. It will become my principal reader.
So....I thought....the NSTG is 10 years old this year. Maybe time for a little "makeover"?
The status bar was the first step. I'm almost done with the last part. Just some complications in programming due the non-functional media scanner on the device.
You'll see. Soon.
Click to expand...
Click to collapse
Congrats for the great deal.
Even after so many years, my attachment to this device has only gotten deeper, just can't let go, it's stood the test of time, throw any hack at it and it stands tall and strong ... The device may perish, but it's spirit stands unbroken and appealing, that's the reason I've always gone back to purchasing it.
Look forward to this redesign project ... @nmyshkin ... Were you managing the mods uptill now on a non glowlight NST ?
aiamuzz said:
Look forward to this redesign project ... @nmyshkin ... Were you managing the mods uptill now on a non glowlight NST ?
Click to expand...
Click to collapse
It's all the same except for working around the glowlight function if you want to reassign a long-press of the "n" button. I solved that problem back with QuickTiles by synthesizing the sequence that turns on and off the light as well as the sequence that changes the status bar icon.
I've since come full circle and decided it's easier to stay with the hardware on that issue and use NTMM to arrange things the way I want.
But, no, my development device has been the older NSTG running FW 1.2.1 for some time. I chose that option because 1) I didn't like the look of the really gray screen for reading and 2) it is necessary to re-sign Tasker to get it to install on FW 1.2.2, but if you do, then none of the plugin options function properly and that makes it difficult to debug routines before compiling the app (where the plugins will work just fine on any FW).
So the older NSTG still has a very important purpose.