CODEWITHSUNDEEP
androidlayouttext
SSJ
SSJ

Reputation: 1

Defining layout

Below is the xml code that i have for creating a text box with caption "enter phone number here". I have a edit box which gets the phone number and also a button. The problem is text box and edit box are overlapping on each other. how to solve this problem.

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

    <TextView android:id="@+id/textLabel"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:text="Enter number to dial"
        />
    <EditText android:id="@+id/phoneNumber"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        />
     <Button android:id="@+id/callButton"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:layout_alignParentBottom="true"
     android:text="Show Dialer"
     />


</RelativeLayout>

Upvotes: 0

Views: 106

Answers (5)

Chintan Raghwani
Chintan Raghwani

Reputation: 3370

Use android:layout_below="@+id/textLabel" property, in EditText as following:

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

    <TextView
        android:id="@+id/textLabel"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:text="Enter number to dial" />

    <EditText
        android:id="@+id/phoneNumber"
        android:layout_below="@+id/textLabel"  //  <--- MUST  Add  This
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="Now phoneNumber Will Appear"  //  <---  See  This
        android:layout_alignParentRight="true" />

    <Button
        android:id="@+id/callButton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="Show Dialer" />

</RelativeLayout>

Upvotes: 0

Colin MacKenzie - III
Colin MacKenzie - III

Reputation: 1393

It is best to use a TableLayout when you have items you want across from one another. I am sure others have a favorite way, but this is mine. 

<?xml version="1.0" encoding="utf-8"?>
     <TableLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_height="match_parent" 
        android:layout_width="match_parent"
        android:background="#000044">
        <TableRow> 
            <TextView 
                android:text="Name:"
                android:width ="120px"
                />
            <EditText 
                android:id="@+id/someUserName" 
                android:width="200px" />
        </TableRow> 
        <TableRow>
            <TextView 
                android:text="Phone:"
                />
            <EditText 
                android:id="@+id/somePhone"  
                />
        </TableRow>
       <TableRow>
            <TextView 
                android:text="Address:"
                />
            <EditText 
                android:id="@+id/someAddress"  
                />
        </TableRow>
        <TableRow>
            <Button 
                android:id="@+id/buttonToClick" 
                android:text="Go Do Something Cool" />
        </TableRow>
    </TableLayout>

If you want all three items in one row do this

<?xml version="1.0" encoding="utf-8"?>
 <TableLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent" 
    android:layout_width="match_parent"
    android:background="#000044">

   <TableRow>
        <TextView 
            android:text="Call Number"
            android:paddingRight="50px"
            />
        <EditText 
            android:id="@+id/someNumber" 
            android:width ="120px"
            android:paddingLeft="10px"
            />

        <Button
            android:id="@+id/buttonToClick"
            android:text="Call" />

    </TableRow>
</TableLayout>

Upvotes: 1

gsb
gsb

Reputation: 5640

If you are using Eclispe for the development, just switch to Graphical layout option where you can drag items and position them [which will add the code in the answer above to your XML]. Check this video to get a sense of the RelativeLayout and how it can be used. [Video source: Google I/O 2012]

Upvotes: 1

Dheeraj Vepakomma
Dheeraj Vepakomma

Reputation: 28697

You should learn more about the various LayoutParams of RelativeLayout. The code below uses some of them, which also avoids the overlap issue.

<TextView android:id="@+id/textLabel"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:text="Enter number to dial"
    />
<EditText android:id="@+id/phoneNumber"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@id/textLabel"
    android:layout_alignParentRight="true"
    android:layout_marginLeft="8dp"
    />
<Button android:id="@+id/callButton"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_below="@id/textLabel"
     android:layout_marginTop="8dp"
     android:text="Show Dialer"
     />

Upvotes: 0

Ashish Kumar
Ashish Kumar

Reputation: 960

Use LinearLayout instead of RelativeLayout with orientation horizontal or vertical. LinearLayout automatically arrange the content in Linear fashion.

Upvotes: 0

Related Questions