How to create a semi-oval footer with buttons in android

Question

Unfortunately I unable to understand the below design that's why asked like semi-oval footer.

enter image description here

Actually this is the footer design of a layout with two side buttons comes from one of the ios app. First I thought it like a bottom tab, but after some research i got to know that ,it is a footer with a FramaLayout, two buttons and one text to show the count, but still not sure what is this and how to do..

I added one footer in my layout and give it transparent-black background, but still unable to do this particular semi-oval style. suggestions and helps will be mostly appreciable. Please suggest.

Thanks

is it essential that only the semi oval surface is clickable? — Philipp Jahoda, Jul 11 '14 at 09:07
It is a PNG. And it has a transparent upper "curved" area. That's it. Nothing magic. — Phantômaxx, Jul 11 '14 at 09:08
If you want, you can make 2 PNGs (2 halves) or just one and mirror it. Making 2 is easier, of course. — Phantômaxx, Jul 11 '14 at 09:10
@FrankN.Stein can you explain it with a answer,which will help me to design this. — Ranjit, Jul 11 '14 at 09:11

score 3 · Accepted Answer · answered Jul 11 '14 at 09:29

3

I imagine your footer being a container: a LinearLayout (so that you can use weights) or a RelativeLayout.

Then it has a couple of clickable elements disposed horizontally (not giving details on this, assuming you can manage it by yourself)

Now, these two "clickables" (I'd use TextViews, so I can put the images and even text inside) have a semitransparent (50% black) background like these:

enter image description here (rect_left)

and

enter image description here (rect_rite)

To let the container background image see through.

I'm not so great at graphics, you will be able to make better pictures than mine. ;)
These ones just illustrate the concept.

answered Jul 11 '14 at 09:29

Phantômaxx

37,901
21
84
115

Great Frank.you are so great at graphics also. Thanks for your help. – Ranjit Jul 11 '14 at 09:35
how do you manage that the white area above the gray "semi-oval" shape is not clickable? – Philipp Jahoda Jul 11 '14 at 09:35
@PhilippJahoda no, the "white" (but it's really **transparent**) area is clickable, but you don't even notice that. – Phantômaxx Jul 11 '14 at 09:37
1

@RanjitPati no, I'm not. You see it looks like a saw (it's called aliasing). I should spend more time over it, to make it look good. But time is so precious in this week-end... ;) – Phantômaxx Jul 11 '14 at 09:39

score 1 · Answer 2 · edited May 23 '17 at 12:13

1

You should create a new Drawable and use it as a background on a Relative/Linear Layout or View

Check this SO question and answer: Can I draw rectangle in XML?

As the question answer pair above gives an example of a rectangle you can modify it to be ovular:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

   <solid 
       android:color="#666666"/>

   <size 
       android:width="120dp"
        android:height="120dp"/>
</shape>

edited May 23 '17 at 12:13

Community

1
1

answered Jul 11 '14 at 09:15

Ryno Coetzee

516
4
13

Thanks for a suggession.I tried it,but no result. it only work for the corner upto 5/10 dp. – Ranjit Jul 11 '14 at 09:29
I Edited my answer, please check it – Ryno Coetzee Jul 11 '14 at 11:33
Thanks Ryno for your help. But I already resolve the problem by the help of Frank's answer. I will use your suggestion on some other parts of my app.so i upvoted you. – Ranjit Jul 11 '14 at 12:36

How to create a semi-oval footer with buttons in android

2 Answers2