I am developing an application and I would like to use the control that I can see in the Photos application and the Desk Clock (on an HTC Desire).
The one I am referring to is the bar along the bottom of the screen that has various icons in it. When you press on an icon, the bubble moves along the bar to the icon you have pressed and the icon is then shown in colour.
What is the name of this control?
The first control you are talking about is the SlidingDrawer, (here is an example of how to use it), then you can just use a GridView if you also want to show icons on there.
If you want to give it a try, you just have to create an XML layout as this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FF4444CC"
>
<SlidingDrawer
android:id="#+id/drawer"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:handle="#+id/handle"
android:content="#+id/content">
<ImageView
android:id="#id/handle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/tray_handle_normal"
/>
<Button
android:id="#id/content"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="I am big :D"
/>
</SlidingDrawer>
</FrameLayout>
I think you are looking for the Sliding Drawer.
Related
I want to create an android interface, something like a launcher. For this, I need to make a custom title bar and 2 borders in each side of the screen.
I have several activities in my app, and I need this to be in all of them, so I need to create independent layouts, one with the custom titlebar and another with the borders. The result may be this:
This is the xml for the borders:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/border_left"
android:layout_width="100dip"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_alignParentLeft="true"
android:background="#000000" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/border_right"
android:layout_width="100dip"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_alignParentRight="true"
android:background="#000000" >
</RelativeLayout>
And this is the xml for the tittle:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/title"
android:layout_width="fill_parent"
android:layout_height="26dip"
android:orientation="horizontal"
android:background="#000000" >
The questions are 2:
How can I put in the middle of the titlebar (the red square) a logo (image)?
How can I insert these 2 layouts into the other activities? For example, how could I make my plain main layout include these 2 layouts?
Answer for the second question: include the layout into another layout:
<include
layout = "#layout/custom_tittlebar" >
</include>
I'm still fighting with the titlebar, I want to put the image that way and I'm thinking if this is the best way, or maybe I have to create an image with photoshop setting the logo on it, and then set it as background in the layout.
I am creating an application that contains a header with a button on the right that should slide a list view to left when I click on it(similar to the chat list in Facebook)
-->
When I was including this header without putting the list view in it, it was working properly. But now I am inserting this list view inside the .xml file of the header (because the header is always shown for the user and he can click on this list view button in any layout that is shown for him).
The problem that I want to include this header to all the other layouts without changing the way they looks and show this list each time he click on the button.
I searched and found a lot of answers but every solution was about making the same as I did in the previous screen shots in each page which is not an optimistic solution for multiple pages.
*I am working on API level 10 and want to find the solution without using Actionbar.
Tell me please if more information would be helpful, any help will be really appreciated.
Thanks in advance.
UPDATE my xml file :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/GeneralRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<RelativeLayout android:id="#+id/rel_layout"
android:layout_width="200dp"
android:layout_height="fill_parent"
android:background="#android:color/white" android:layout_alignParentRight="true">
<LinearLayout android:id="#+id/fake_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone"></LinearLayout>
<ListView android:id="#+id/list_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:background="#android:color/background_dark"
></ListView>
</RelativeLayout>
<RelativeLayout android:id="#+id/rel_layout_second"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black">
<LinearLayout android:id="#+id/lin_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:color/background_light"
android:orientation="vertical"
android:layout_centerHorizontal="true" android:layout_alignParentTop="true">
<Button android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="slide"
android:layout_gravity="right|center"></Button>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
Try to create a RelativeLayout for the ListView with a android:visibility="gone" and all the other components in the same User Interface inside another RelativeLayout.
Then change its visibility upon the state of the menu if it's opened or closed.
Guess this should be a way to go:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:clickable="false">
<LinearLayout
android:id="#+id/thisistopbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:paddingLeft="3dp"/>
<include here listview etc../>
</LinearLayout>
you can also make the top bar general and include it in every screen. But the basic idea is like above xml, and put the button on the top bar.
i am designing an application which have diff types of functionalies through buttons/image buttons. At final the list might increase. i want to put one custom home button which always keeps on screen when i am in diff activities.
or either if you have any idea about how this Home button is coded to this layout
below screen. please help.
Have you considered the Action Bar which is exactly designed for this purpose?
http://developer.android.com/guide/topics/ui/actionbar.html
While the home button at the bottom can be easily achieved using an image view/button,Using an action Bar is the recommended option.Not only can you link with the home activity but also any other activity of your choice.Refer this to gain a deeper insight.
http://developer.android.com/guide/topics/ui/actionbar.html
http://developer.android.com/reference/android/app/ActionBar.html
You can either place a button/image button/image anything in xml layout and set on click listener on that component. You can also use option menu and give multiple option on all the screens of your application.
Make a layout with a ScrollView on top, and your image-button below the scrollview.
Example:
<!-- language: lang-xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Your Content Here"
/>
</ScrollView>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
/>
</LinearLayout>
</LinearLayout>
It looks like this:
I must make a layout with 2 overlapping ScrollViews. One is an article with a "see comments" button. The other view is transparent and contains the comments, and is shown on top of the article when the "see comments" button is clicked. The problem is that when the comments are shown and do not fill the screen, touching the screen out of the screen (eg. below the button "Retour" on the image shown below. This is an iphone screenshot, the design on android is different) scrolls the article.
Also, the "Voir les Commentaires" button can be clicked, even with another layout on top of it.
Why is the view below not disabled (button, scroll...) when there's another one on top of it? How can it be done?
Anybody can help?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#FFFFFF">
<RelativeLayout android:id="#+id/header"
android:layout_width="fill_parent" android:layout_height="49dp"
android:background="#e7e7e8">
<!-- header -->
</RelativeLayout>
<ScrollView android:id="#+id/article_scroll"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_below="#id/header">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:orientation="vertical">
<!-- article -->
</LinearLayout>
</ScrollView>
<LinearLayout android:layout_width="fill_parent"
android:layout_below="#id/header" android:layout_height="fill_parent"
android:orientation="vertical" android:background="#50000000" android:visibility="gone">
<ScrollView android:id="#+id/comment_scroll"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<!-- comments -->
</ScrollView>
</LinearLayout>
</RelativeLayout>
You should definitely use a new Activity for your comment and use Transucent theme:
<activity android:theme="#android:style/Theme.Translucent">
http://developer.android.com/guide/topics/ui/themes.html
Some alternatives Themes should fit your needs (Dialog for instance)
or a blurried background: http://www.stealthcopter.com/blog/2010/01/android-blurring-and-dimming-background-windows-from-dialogs/
As for the button "Voir les Commentaires", you could set it to enabled = false when the second layer is visible. And I'm not quite sure atm, but I think you can do the same for the bottom ScrollView.
Does anyone know how to make a floating menu like the ones in Angry Birds home screen?
Here is a picture showing the menu buttons in collapsed mode (gear, up buttons). On tapping these buttons, the actual menu would expand, showing two or more round buttons.
Any links, clues is much appreciated.
I might be wrong but I think that the entire thing is done in OpenGL.
I guess it's an image with a transparent background and you calculate its position based on time....
Although you could achieve it with standard widgets, maybe it would be a better idea to create a custom view and implement onDraw()
This is done within the XML of your 'game screen.' Assuming you've done a tutorial on OpenGL-ES, you should have an xml file that holds your custom GLSurfaceView. To add overlay items like buttons and, well.. anything, just add them to this xml file. Here's an example of a game I'm working on:
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
//This is your GLSurfaceView which will fill the whole screen
<android.opengl.GLSurfaceView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/GLSurface" />
//This layout will overlay the game
<LinearLayout
android:gravity="center"
android:weightSum="100"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_weight="10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sel"
/>
<SeekBar
android:paddingLeft="30px"
android:paddingRight="30px"
android:layout_weight="80"
android:gravity="center"
android:id="#+id/RotateBar"
android:layout_width="180px"
android:layout_height="wrap_content"
android:max="180"
/>
<Button
android:layout_weight="10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Act"
/>
</LinearLayout>
Obviously this is modified (I don't have buttons floating in the center of the screen :P ) but you get the idea. Here's a link to good OpenGL-ES tutorial: link