Android TitleBar / NavBar? - android

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.

Related

android ui design for an app help needed

One activity in my app looks like below picture. In the below picture ,can any one suggest that best way to implement view,
view in my app
and when i click one of the options(filters in app) available on activity,
the view will be extended like below
view after one of the option selected
For this, i want to use a horizontal linear layout for below options bar,
when one of the options clicked, i wanna use slide up functionality and views show and hide functionalities.
can any one suggest better design for this . thanks.
I think for most apps, all toolbars should stay in the same place throughout the execution of the app. When the toolbar item ("Veg & Non Veg") is clicked, the filter should appear above the toolbar instead of below it. You can still use the slide up function, just have the toolbar layout displayed above (higher z-index) the filter linear layout.
You should also standardize the sizes for the distances/times to each location, personally I think the first one looks better.
Other than that, I think your UI looks pretty good!

Android - Create a view that includes the entire screen

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

Custom view vs. fragment for supplementary UI sections

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.

An alternative to a list of SlidingDrawers

Hi I am developing an application that needs to display list of items. Clicking (or Tapping) on an item should display a description text of the item right below the item. I am talking about something like a vertical accordion.
I want them dynamically created (created in code rather than the XML). That part was completed with ease. I inflated multiple SlidingDrawer in a LinearLayout to accomplish it.
But the problem is only one SlidingDrawer is displayed in the activity. This was accomplished by giving fixed heights to SlidingDrawer. This approach will not hold as I mentioned above that the list of items is dynamically generated and also the area in the activity where the description of the item must come remains blank.
I am now looking for alternative views for accomplishing this. As I am a beginner in Android Development I cant find any that will work in android versions 2.3 and later.
You can always take a look at the SlidingMenu. The project can be found on GitHub. I guess you need to modify the behaviour a bit.

Android UI question. Implementation guidance

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.

Categories

Resources