How do I layout a button bar with buttons of different heights?

How do I go about implementing a button bar with buttons of different shapes and heights? As an example (please excuse my poor drawing skills for this quick mockup):

The example bar has 3 buttons, with the middle button (3) 开发者_JS百科a different shape and height than the other 2 buttons (1,2). The button bar will be a view that is included and merged into other views so as to seem to float on top of the parent view.

I was thinking of implementing buttons 1 and 2 into a layout, and then button 3 as another layout that I then merge with the first two button's layout.

like my previous comrades said, you need some kind of layout or container that can have a background (if you wish for button #3 to hoover above it) then use relative layout for mixing the two the disadvantage of this other than complexity is that youcannot relate to the other two buttons since they reside in a different layout.

More elegant solution may be to have a special background drawable that can:

1. have a method setCurrentHeight() that will specify the height the actual viewable section should have the rest will be filled with transparent color.
2. override it's own draw so just before it's drawing it will have a callback called, call back you can register yourself to.

then you can register the callback in your activity to take the current position of the #3 button and set the height accordingly, this way you are still with one layout with special drawable as background.

A customized LevelDrawable might do the trick.

I would layout this bar as follows:

• A RelativeLayout as a container for the rest, with height set to wrap_content and alignparentbottom = true
• An ImageView for the bar
• 2 Buttons with a transparent background (Button 1 and 2)
• Button 3 is a custom Button with a custom Image of a trapezoid as background

So you will have a Layout similar to this:

<RelativeLayout
   ...>

   <ImageView
      .../>

   <Button
      ... Button 1 />

   <Button
      ... Button 2 />

   <Button
      ... Button 3 />

</RelativeLayout>

I don't exactly know that this will work, and I can't test it, but you might give something like this a try; I believe it can all be done elegantly through XML.

1. Have a RelativeLayout (id:mainLayout) that will contain all of your views, wrap_content for both dimensions.
2. Have a blank View as your first child that will serve as your background bar
3. Set the View's background color/image to what you want; layout_width to fill_parent; layout_height to wrap_content; layout_alignTop="@id/leftButton"; layout_alignBottom="@id/leftButton".
4. Add an ImageButton for your center button (id:bigButton), wrap_content for both dimensions; layout_centerInParent="true".
5. Add an ImageButton for your left button (id:leftButton), wrap_content for both dimensions; layout_toLeftOf="@id/bigButton"; layout_centerInParent="true".
6. Add an ImageButton for your right button (id:rightButton), wrap_content for both dimensions; layout_toRightOf="@id/bigButton"; layout_centerInParent="true".

In my head, I believe this works, but I could be off. Regardless, something to think about, and I hope it helps you find a solution. :)

Better you can tablelayout with different button styles or relative layout for button "3"