How to float/stick android button (containing image) totally left or right

Question

I try to make a design for my application. I order to attract user's attention I tried to imagine something interesting. My plan is obtaining a design like below: my plan

Visual elements:

red areas are buttons
thin circles are images i will out later...

My goals:

On creation of the activity, buttons will com into screen, from out bounds of the screen. (they can come one by one in an order, because I do not want to get crazy with asynctasks, handlers and etc. )
2 corners of each button will be rounded smoothly
The Important and last one: when I click on a button, I want it to hide out of the screen with reverse action as it came to screen.

At the first second I have faced with a problem already. Here it is: problematic one

As you see there is some space between button and layout. Current xml layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginTop="22dp"
        android:text="Button" />

</RelativeLayout>

How can I solve this problem? And I will be very happy to here suggestions about how to achieve my suggestions.

Could you provide your layout XML? There might be some padding / margin in there. — mbmc, Jun 06 '14 at 21:12
Ok... I suspect the Button widget has already a margin (need to double check though). You could get away with a negative left margin. Or, you can draw a rectangle in XML, and specify which rounded corners you want. This [example](http://stackoverflow.com/questions/19042670/create-a-drawable-with-rounded-top-corners-and-a-border-on-bottom) should help. Assign this rectangle to a RelativeLayout's background, and have the rest of the view (text, image etc.) inside. — mbmc, Jun 06 '14 at 21:47
I have applied negative margin. That idea was shining like a diamond... Now I will try to add rounded corners as your link suggest. — The_Last_Debugger, Jun 06 '14 at 22:17

mbmc · Answer 1 · 2014-06-06T22:50:28.180

Ok, try that:

drawable/corners.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <corners android:topRightRadius="10dp" android:bottomRightRadius="10dp" />
            <solid android:color="#888888" />
        </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <corners android:topRightRadius="10dp" android:bottomRightRadius="10dp" />
            <solid android:color="#888888" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <corners android:topRightRadius="10dp" android:bottomRightRadius="10dp" />
            <solid android:color="#BBBBBB" />
        </shape>
    </item>
</selector>

with that:

layout/button.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginTop="22dp"
        android:background="@drawable/corners"
        android:text="Button" />

</RelativeLayout>

Here is the version with text and picture:

drawable/corner.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle">
            <corners android:topRightRadius="10dp" android:bottomRightRadius="10dp" />
            <solid android:color="#BBBBBB"/>
        </shape>
    </item>
</selector>


drawable/corner_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle">
            <corners android:topRightRadius="10dp" android:bottomRightRadius="10dp" />
            <solid android:color="#888888"/>
        </shape>
    </item>
</selector>


drawable/states.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/corner_pressed" />
    <item android:drawable="@drawable/corner" />
</selector>

and the main layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="22dp"
        android:background="@drawable/states"
        android:clickable="true">

        <TextView
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:text="Button"
            />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_launcher"
            android:layout_toRightOf="@id/button1"
            />

        </RelativeLayout>

</RelativeLayout>

How to float/stick android button (containing image) totally left or right

1 Answers1