Angry birds like Floating menu on Android - android

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

Related

i want to fix an home button for all activities.how?

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:

Android screen "watermarked"

How could be done such thing, like "watermark" on top of any other Activities on Android?
In detail: I need to show some message on top of everything what is running on my device. No matter if this is game, movie, app.
Is possible to achive something on Android? My phone is rooted.
Is possible to use some OpenGL features?
Use this code.
At first, I am using here FrameLayout, that is transparent and you can see "watermarked" text on image.
At second, I am using android:background="#99 000000" on my button and you also can see it on the image. First 2 digits, as i know, named alpha channel and you can set them from 0 to ff; 0 is fully transparent, and ff is non-transparent, as usual.
I think you get the idea or may be you can draw your custom image on canvas, put on your framelayout and set 50% trasparent-background. And you have to do this 50% transparent layers onto all your layouts and so, all activities will have watermark.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/frameLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<FrameLayout
android:id="#+id/frameLayout2"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:src="#drawable/ic_launcher" />
</FrameLayout>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:background="#99000000" />
</LinearLayout>
</FrameLayout>
Use a master activity which have layout according to you. And then use this master activity in other activity by extending to child activity.
Its simple.
Yes, it is possible to run a base activity and over that some intended activity to perform the action you want.
Now, you can use the concept of sub-activities and activities in android to ensure this type of result.

Android Button Layout - Not Displaying Correctly

I am trying to get three images to display on the "welcome screen" of my Android app. Only one of the images is being displayed, and I cant figure out why... any Help?
XML File:
<?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:gravity="center"
android:background="#drawable/main_bg"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:paddingTop="30dip"
android:layout_height="wrap_content"
android:gravity="center"
>
<ImageButton
android:id="#+id/mnwvbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="15dip"
android:background="#drawable/mnwvicon" />
<ImageButton
android:id="#+id/reportsbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/reportsicon" />
</LinearLayout>
<ImageButton
android:id="#+id/mnwvshowbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/showicon"
android:paddingTop="30dip" />
</LinearLayout>
I have the exact same set up in another app, so I dont know why it isnt working here??
I think its because the last image is outside the inner linearlayout so put it inside the inner linearlayout and you should be able to see all three images in a row.
Try scaling the images using the attribute android:ScaleType="centre" inside the ImageButton
or try a different layout like Tablayout for arranging the images in rows and columns with proper spacing.
Sorry guys. I didnt have the app support the different screen sizes. I am not sure why this mattered, but once I added support, then it worked perfectly!. Thanks for your input though! Anyone know why this mattered though?? I dont know why supporting screen sizes matters?

Android Image Button Layout

Could someone please explain how android uses image button sizes? I seem to be getting odd behavior with my buttons.
I have the following code as an example. I have two buttons that sit at the bottom of my layout. These buttons share 50% of the total width as they sit side-by-side.
Within Abode PS, the two images (used for these two buttons) are actually 2" x 38" or 495x94 pixels. This size is of course larger than the available space in the layout.
I am using edge effects on my buttons to give them definition. Android is cutting the edges off my buttons in order to center then in the available layout space.
This particular layout that I am working on will only allow vertical orientation, in case that helps.
Thank you.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<ImageButton
android:id="#+id/ImageButton1"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_marginLeft="1dip"
android:layout_marginRight="1dip"
android:layout_weight="1"
android:background="#FF000000"
android:src="#drawable/map4" >
</ImageButton>
<ImageButton
android:id="#+id/ImageButton3"
android:layout_width="0dip"
android:layout_marginRight="1dip"
android:layout_weight="1"
android:background="#FF000000"
android:src="#drawable/buy"
android:layout_height="wrap_content"
android:layout_marginLeft="1dip">
</ImageButton>
</LinearLayout>
</RelativeLayout>
Try using an ImageView and android:scaleType:
http://developer.android.com/reference/android/widget/ImageView.html#attr_android:scaleType
Experiment the values available to see what is the best combination!
Then add a listener to behave like a button...
try use the button and make it with empty text after this set the background .
or :
use the image button and put the source and the background the same image to get button exactly like the image
**you can use the selector to make some beauty for application buttons
Google it it's easy to use ;)

How to set the absolute position of an image or button so that it is consistent across multiple screen sizes?

After searching for a few hours, I was unable to find the exact answer to my situation. I'm currently using a RelativeLayout and all I have is a background image and a button. The problem I'm having is placing the button in the exact location I want it to be (a little offset from the center).
My first attempt was to modify the layout_margins of the button. While this worked for the current emulator I was working with (3.7in WVGA), the positioning of the button was slightly/way off for a different screen size (such as 3.2in HVGA).
I then attempted to modify the padding of the parent layout but got the same issue. My XML looks like this:
<?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:paddingLeft="98dip" android:paddingBottom="68dip" android:background="#drawable/background">
<Button android:id="#+id/starttimer"
android:background="#drawable/button"
android:layout_width="wrap_content" android:clickable="true" android:layout_height="wrap_content" android:layout_alignParentBottom="true"/>
</RelativeLayout>
Please let me know if I'm completely off with my approach. It seems like an extremely simple problem, and I'm bummed out that it's taken me so long to try to get it. Thanks for any help!
I take it that you want to center the button on the bottom of the parent with a little offset, try layout_centerHorizontal then add your preferred margin.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="98dip" android:paddingBottom="68dip" android:background="#drawable/background">
<Button android:id="#+id/starttimer"
android:background="#drawable/button"
android:layout_width="wrap_content" android:clickable="true" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android_marginLeft="5dp"/>
</RelativeLayout>
Absolute Layout is used for absolute positions of the control.

Categories

Resources