I'm making an app that will allow a user to make and edit a picture (think MS Paint like). I want there to be a "formatting window" type control which contains a set of tools the user can pick from to edit the picture. For example, it could contain buttons for inserting text, drawing lines, erasing content, etc. The flow would be: user presses the action bar icon for the formatting window, the formatting window opens, and the user presses the button for the associated tool.
I'm curious how I should be handling this type of control for different form factors. It's very simple UI wise - a relative layout view group with a set of buttons lined up in rows. But if I wanted to have it appear at the bottom of the screen on phones (animating up from beneath the screen when the action bar button associated with showing the window is pressed), and at the top right corner of the screen in tablets (animating from the right), how would I best do that? Do I just setup my two phone and tablet layouts to contain the custom formatting window view in different positions? Should the formatting window be a fragment? Help!
I would think that either approach would work, but a custom view sounds easier to me. Either way, you'll need separate layout files for phone vs tablet, since you need to place the view or fragment in a different location.
The thing that would probably make a difference here is how your backing data is being stored. Meaning, what stores the user's choice for formatting controls? My immediate thought would be to use a custom view for the formatting window and allow the activity to set a listener to be notified when the formatting choices change.
Related
I'm trying to make TalkBack work for my Android app, in my app layout I have a list of CardViews inside a RecyclerView, each CardView contains several TextViews and several Buttons: App layout image
When I turn on Android TalkBack, and tap on a CardView, TalkBack announces all the TextViews, but doesn't announce any Button. If I continue swiping right, the buttons will gain focus one by one. Not sure if my understanding is correct, but seems like TalkBack treats TextViews and Buttons differently because the buttons are focusable.
Is there a way to make TalkBack announce all content on the CardView (TextViews and Buttons) and keep the Buttons focusable (so I'll still be able to set focus on Buttons by swiping)?
PS:
One solution that worked is to directly set a content description on the CardView, and make the content description contain all content of TextViews and Buttons, but that's kind of hacky, so I'm trying to find a better solution here.
Any help is appreciated. Thanks!
The behaviour you've described is expected and your solution is the correct one.
For ViewGroups with no explicit content description, TalkBack will attempt to infer one from the children, by concatenating the content description (or text value if view extends from TextView) of all the children.
Since the buttons themselves are actionable (focusable/clickable), they are not included in the inferred content description.
Setting an explicit content description on the card is the correct approach to take - your goal should be to describe the information that the card represents. IMO, it should not contain the description for the buttons since they will be separately focusable and will be read aloud when the user focuses on them.
The best approach IMO is to hide the buttons if TalkBack is enabled, and to present the cards as entities that contain a single action and a single, explicitly-set content description.
It's important not to reduce functionality for TalkBack users - all the user goals that were achievable should still be achievable; there is no requirement that the goals must be achieved in the same way by all users. So in this case, you could make the card's primary action as the click action, and offer the actions from the buttons in another place in the app.
One pattern which works well is to display a dialog on click, and this contains all the actions. This has a couple of benefits:
the card is single action so navigating between cards is single-swipe only
the default dialog is accessible by default - no extra work needed
I wrote a blog post explaining how you can do it with (and without) a library I helped write. The section under "actions dialog" is the relevant bit.
A button is actionable. If you want your users to be able to do the actions of each button, they need to be separately focusable. If they aren't actionable, they shouldn't be buttons.
I am not the best at android programming so please correct any errors I make.
According to this developer.android.com.
Android view is:
This class represents the basic building block for user interface
components. A View occupies a rectangular area on the screen and is
responsible for drawing and event handling. View is the base class for
widgets, which are used to create interactive UI components (buttons,
text fields, etc.).
However, I have not found an article about how to get a full view. I mean as in an entire screen as a view. The image I used below is to show what I want to include in that view. I want to include everything on screen. Everything On that Screen. (I can't repeat enough). It includes the chat heads, background, and menu bar. Everything that is on screen.
I can't figure out how to get a view like that from a service or from an activity. Any help is appreciated. I don't have exact code because I don't know how to do this.
Edit:
I know that I am very bad at explaining, so if you are confused, I am going to explain what I want to do with my view.
So basically, I want to make a screen tapper that taps for you so you can king of "cheat" games like cookie clicker. Therefore I need a view that contains the entire screen so then I can fake "touches" on the screen.
Hope this cleared any confusion
So you have a few things to deal with. Generally, the menu bar (and possibly soft-key buttons on the bottom) will remain visible. However, you can hide the menu bar:
hide the top menu bar in my android device & Tablet
You may want gestures to allow users to see it. Or, since it appears you are building a game, you just leave it hidden until they hit "home" or "back" or "exit" or whatever.
The "chat heads" are a horrible idea, but some developers think they are awesome. You can see more about that here:
Creating a system overlay window (always on top)
You might find something like this will work (but if new notifications pop-up, it may not help):
http://goobbe.com/questions/1390940/how-to-close-cancel-dismiss-a-system-dialog-programmatically-android
When I try to make a layout while working with the graphical layout interface in Eclipse (and not the xml) I came across with this problem:
Let's say that my main layout is only a simple button on the bottom of the screen,
when clicked the button opens up a text box that covers most of the screen.
note : I do this be setting the visibility of the text box from GONE to VISIBLE (and the other way around when I want to hide the text box).
Now (the text box is hidden) I want to use the extra space I have and add a button to the main layout.
normally this isn't much of a problem but since I have the text box covering almost the entire screen in the graphical layout I'm having a lot of trouble doing so (and this is just an example, I want to add more complicated things to my new gained space).
What can I do ? in the graphical layout I can't hide an object (like text box or button) and I drag another button to that space I can see/work with it.
set the android:visibility attribute to "gone" while designing the layout
You are going about this all wrong.
You should be using either a new activity or a diloag box to create a textbox that covers the entire screen or a ViewFlipper to create multiple views on your activity.
It appears that you want to do it from one layout so ViewFlipper would be the simplest choice here.
The documentation is available in the usual place:
http://developer.android.com/reference/android/widget/ViewFlipper.html
Some examples can be found at:
http://www.androidpeople.com/android-viewflipper-example
http://android-pro.blogspot.com/2010/09/using-view-flipper-in-android.html
EDIT
Your question isn't very clear so I have tried to give you my best guess from the information provided. Perhaps a diagram of what you are trying to do here might be more easily understood. Though as I stated a new activity or a dialog box might be better. So you could also look at using a dialog method:
http://www.androidsnippets.com/prompt-user-input-with-an-alertdialog
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.