I am trying to buid an user interface to allow to present information to a user.
The information would be grouped in windows related to the category that might look kind of like this:
Crude drawing of the window
It should have a place to put a title, a button I can set to different options and an inner layout to display the information.
Is there a similar object I can use in android or how would I go about building one?
EDIT:
The final result for a phone should be something like Drawing of a phone
EDIT2: Since i feel like I wasnt clear enough in my question I changed the title. I know how to place a list of elements on the screen, what I wonder is how to make those elements be framed by a rectangle with rounded corners that has a field for the title and a customizable button
Look at ReyclerView for displaying a list of items.
Look at CardView for displaying each "window" item.
Look at the documentation for how to make a layout.
Related
I want to customize the FullWidthDetailsOverviewRowPresenter in the Leanback DetailFragment.
Three things I want to accomplish are:
Getting the Actions from top to below of the overview.
Reducing the height of the overview so that it the related movies can be seen without scrolling down.
The background image and the space it occupies at the top of the overview should be gone. The screen should start like the one above.
The end result should be like this:
I already know how to modify inside the overview. How should I modify outside of it?
Because you are moving around the key views of this screen, it sounds like you might have to ditch the current implementation altogether and create your own custom view from scratch. By moving the buttons to the bottom and the detail image (seems like you're moving it to the right side of the description text), you're making it less and less justifiable to even subclass DetailFragment. The developers of Leanback were probably intentional about limiting customizing the interfaces too much as they want a consistent experience for different apps.
I would create a new layout file and load it up on your subclass of DetailsFragment (or DetailsPresenter), depending on your architecture.
You might find inspiration in this tuenti tv sample and part two of Marcus Gabilheri's customization series
Create Row List Fragment
In 1st Row create a Rowpresenter that fits your design with buttons
In other row/s add ListRowPreesenter
Like the image. I am trying to make something like this. When i click my sidemenu that consists of textviews that represents numbers. I want to be able to show what number the user are holding his finger on. So in this case. I was holding my finger over the number 14 and 14:00 is showing on the left side of it.
So does anyone have a good approach for me to deal with this issue.
It seems you want to use a fastscroll like feature. Try to take a look at the example code here. Then you have to customize it to your needs.
Or you can also try a different approach using a PopupMenu on the list element click.
A third approach could be using a PopupWindow, and showing it using showAsDropDown() method, passing the anchor view (in your case the list element clicked)
After seeing the last screenshots of new foursquare application and their balloon like cartoon instructions, I'd like to create some of these in my application.
I found a similar question for iPhone
Small popup for instructions... How?
Here is another screenshot of foursquare app:
I'd like to know how I could achieve that with Android.
Thanks in advance for any help.
UPDATE: This is what I could get so far but adding some buttons with a custom drawn background and layering them with a FrameLayout:
But I still couldn't get the triangle effect. Maybe there is something I can do with my custom background shape?
UPDATE2
After checking your suggestions, I decided to go with Aaron C idea and added an image with an arrow on it. This is my current result:
Thank you Snailer, QuickAction API project seems very much promissing. I'll check it out when implementing more features in my app.
Now, I just need to get the right color or maybe I could just let it this way. It seems nice too.
And, so, to summarize what I did:
Got my initial xml layout inside a FrameView.
As I'm using a frameview, everything I put in here will be piled one over the other. That's how I could add things to the layout.
In that framelayout, I put 2 relativelayouts whith an image with the triangle and a button to create the two upper popups. In the bottom I put a button only.
That's it. I hope it helps somebody.
Thank you very much again for all your help!
That sounds like a neat thing to implement. There might be a built-in Android variation on AlertDialog that achieves this, but if not here is how I would go about implementing it:
Create a new Activity whose background is black with a very high (low?) alpha color value. This will allow you to see through it to the previous Activity in the stack. Then, add your alert at whatever coordinates you like using a relative layout with padding values.
You might also want to add a touch listener that exits the Activity if the user touches the balloon (or maybe anywhere in the screen).
If you want to be fancy with coordinate placement of the balloon, you can pass this information into the new Activity using the Activity's launch Intent with the putExtra() methods.
It's probably achieved through skinning a toast.
The developer documentation shows a skinned toast in "Creating a custom toast view" at http://developer.android.com/guide/topics/ui/notifiers/toasts.html
You may want to look at the QuickAction API. It acheives this by using PopupWindow, skinned, positioned, and animated.
I'm working on implementing a UI for an Android application, and I wanted to ask if there is already something in the native widgets to accomplish most of what I'm trying to do.
The application that I'm working on performs 15 different tasks that can be divided into 3 different groups. (5 tasks per group) I have 18 icon images (3 for the groups and 15 for the individual tasks) and I want to be able to panel these icons (starting with the groups) like this:
I want the next icon visible below and above (if further down than the first icon) and swipe to go to the next icon
Once an icon is clicked, the panels slide to the side, exposing the next layer (the specific 5 tasks for the selected group) with the selected group still visible on the side:
From there, the user can tell at a glance what group they are in, what the current, next and previous selectable tasks are, and that by swiping right, they can get back to the group selection.
What types of widgets would I need to look into in order to accomplish something like this? Are there already pre-built lists to do these activities?
Thanks for any guidance!
You can get close with a LinearLayout of ImageView widgets and a ScrollView (vertical) or HorizontalScrollView. However, it will not give you the desired "centered image with bits of the previous/next images" effect -- it will be wherever the user positions it.
You can get close with a Gallery. However, it will not give you the vertical orientation, and it will always give you a fixed set of full options to the sides, not the partial images that you seek.
If it's gotta be the way you describe it, you'll have to roll it yourself. Gestures and animations should give you the desired effect.
Have you taken a look at ViewFlipper? http://developer.android.com/reference/android/widget/ViewFlipper.html This will give the side by side effect but you will have to make custom views for each group to populate it with the proper icons.
I'd use a ListActivity for the first 3 top level items. This won't give you the auto centering effect that you'll probably want, but you should be able to look at the Gallery source code, which can be found here, and make some modifications to the ListActivity so that it autocenters.
For the next items, I'd add an onClick and a GestureListener so you can navigate to another activity with another list view. Since you know where you came from (add some data to your Intent) you can set the color rectangle on the left so that it appears that you have just swiped the whole view left.
If you need to customize the animation, you can call this:
overridePendingTransition(R.anim.slide_left_entry, R.anim.slide_left_exit);
To make the yellow icon look good as it animates to the left, I'd change the list bounds (on the first activity) to have no margins, and change the yellow icon to have square right edges - This will make the small yellow rectangle on the next activity appear to be part of the first activity.
It should be relatively easy to mock this up to see if it's going to work properly for you.
Good luck!
EDIT: Ok, so I've made a basic project that does most of what you want.
here is the link to the eclipse project file. I was going to put the source up here, but there's a bit much to display.
What you still have to do:
Tweak animation
Configure the layer lists to display the correct colors
Add information to the top level intent for the sub-activity to be able to configure itself.
Quite a few other small things.
I think I've got the main stuff done. I've also added the gesture listener I talked about, although re-reading your question, you actually didn't ask for that. Since it's cool, I left it in.
Good Luck once again!!
Have you thought of launching Activities with different view configurations? You can switch from one activity to another with a gesture and you can Animate the views. What your UI looks like to me is a bunch of screens with affordances that show the other screens. So one Activity per screen maybe the same in different configurations or something like that.
I am not sure what the proper term is, but I am trying to add a "TitleBar" to the top of one of the windows in my App. Much like the Contacts App, I have several Tabs along the top of the screen. When you select an item from the list, it loads the next Activity, but that Activity no longer has the Tabs at the top of the screen.
I don't know if it is called a TitleBar or what. The Contacts App has this TitleBar along the top of the screen when you select a person from the list of Contacts.
I am trying to mimick the Grey Bar that says "George Washington"
The Contacts app is open source (as are most of the core Android system apps). I suggest checking it out and looking at the layout you want to emulate. In general, poking around a lot of that code is a good idea to get a handle on some best practices, or just to borrow a few tricks.
In this particular case, they're using a custom View called ContactHeaderWidget, which is actually a FrameLayout wrapping a TextView and Checkbox (styled to look like a star), along with the photo view (which has some special behavior to bind with the multiple contact source data on click and so on).
If you just want the look and not the functionality, though, just adding a LinearLayout with a GradientDrawable background containing an ImageView, a TextView, and a Checkbox styled as a star to your activity's layout should get you there a lot more easily without requiring custom widgets.