android - Adding two buttons which are touching each other in Framelayout

Question

I want to add two buttons one below another in a FrameLayout but they should be touching. However, I am not managing to do this. Here is my code:

<FrameLayout
    android:id="@+id/lytOptions"
    android:layout_below="@id/imgLine"
    android:layout_width="fill_parent"        
    android:layout_height="wrap_content" 
    >

    <Button
        android:id="@+id/btnLogin"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/action_via_email"
        android:textColor="@android:color/white"
        android:textStyle="bold" />

    <Button
        android:id="@+id/btnSignUp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"            
        android:text="@string/action_sign_up"
        android:textColor="@android:color/white"
        android:textStyle="bold" />
</FrameLayout>

score 1 · Accepted Answer

Try this

        <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" />

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="49dp"
            android:text="Button" />

    </RelativeLayout>

to get the output like this

enter image description here

score 0 · Accepted Answer

Use vertical LinearLayout instead...

<LinearLayout 
android:layout_width="fill_parent"
android:layout_below="@id/imgLine"
android:layout_height="wrap_content"
android:orientation="vertical" >


<Button
    android:id="@+id/btnLogin"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/action_via_email"
    android:textColor="@android:color/white"
    android:textStyle="bold" />

<Button
    android:id="@+id/btnSignUp"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"            
    android:text="@string/action_sign_up"
    android:textColor="@android:color/white"
    android:textStyle="bold" />
</LinearLayout>

score 0 · Accepted Answer

By using framelayout you are actually placing one image on another, instead use linearlayout with buttons width and height as wrap content,and avoid using layout weights of the buttons. Let me know if this solves your problem

score 0 · Accepted Answer

As others have pointed out, the key answer is to use a LinearLayout to position the buttons next to each other. However, to a "touching" effect, you will need to do one or more of the following:

Change the padding on each Button.
Change the margin on each Button.
Change the button background image so that it goes right to the edge of the View area.

My preference would be to set the margins and paddings to zero and to set the image to be the effect you want:

<LinearLayout 
    android:layout_width="fill_parent"
    android:layout_below="@id/imgLine"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <!-- options 1 and 2 -->
    <Button
        android:id="@+id/btnLogin"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/action_via_email"
        android:textColor="@android:color/white"
        android:padding="0dp" <!-- Set there to be no space between the content and the surrounding views -->
        android:padding="0dp" <!-- Set to be no space int the content area but between the content and the edge of the content area -->
        android:textStyle="bold" />

    <!-- option 3 -->
    <Button
        android:id="@+id/btnSignUp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"            
        android:text="@string/action_sign_up"
        android:textColor="@android:color/white"
        android:background="@drawable/my_background"
        android:textStyle="bold" />
</LinearLayout>

You will need to define my_background as an imagine the drawable directory or res. You may the section on 9 patch images from http://developer.android.com/guide/topics/graphics/2d-graphics.html helpful.

score 0 · Accepted Answer

Use a TableLayout instead:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" android:background="@drawable/button_style"/>

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button" android:background="@drawable/button_style"/>

    </TableRow>

</TableLayout>

Assign a drawable button_style to the buttons:

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
 android:shape="rectangle">
<solid android:color="#38393B"/>    
<stroke android:width="0.5dp"  android:color="#8aaa"/>
<size android:width="120dp" android:height="80dp" />

android - Adding two buttons which are touching each other in Framelayout

5 回答 5

Related

Reference