CODEWITHSUNDEEP
javaandroidandroid-layout
Asad
Asad

Reputation: 49

how to differentiate two "views" from overlapping each other

i am beginner to android programming and trying to build a simple app program. whenever i try to make more than one views they stack on each other. I am trying to make a text field and a button, but when i run it, the text field and button overlap each other however, i want them to be separated by some distance. i am using the following code.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android1="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context="com.example.new1.MainActivity" >

 <EditText android:id="@+id/edit_message"
        android:layout_weight= "1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />

 <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />

</RelativeLayout>

i am checking this code on Samsung Galaxy S2. does anybody knows the solution to this problem and can guide me where i am doing it wrong.

Upvotes: 0

Views: 240

Answers (3)

Chamu
Chamu

Reputation: 194

RelativeLayout positions views relative to each other. So if you do not specify the relationship between view, all the views will be put one above the other. You can either use LinearLayout with orientation attribute or define relationship between views. Following can be your working code

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

    <EditText
        android:id="@+id/edit_message" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
         android:hint="@string/edit_message"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/edit_message"
        android:text="@string/button_send" />

</RelativeLayout>

Here android:layout_toRightOf="@id/edit_message" lets your button to be positioned to right of your edittext

Upvotes: 1

Senchay
Senchay

Reputation: 121

Depending on what you want, a horizontal layout or vertical, you need a fitting layout xml.

You use relativeLayout, where you have to specify the parents to layout like:

android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"

If your beginner better take a look at a linear layout in vertical or horizontal mode.

You dont have to specify this then.

Like this:

 <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="100"
    >
   <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/bResults"
        android:text="Try Command"
        android:layout_weight="20" />

    <ToggleButton
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tbPassword"
        android:layout_weight="80"
        android:checked="true"
        />
 </LinearLayout>

This will put your two buttons nexto each other

Upvotes: 0

Dave Morrissey
Dave Morrissey

Reputation: 4411

Either use LinearLayout so that elements stack horizontally or vertically, or use attributes such as android:layout_toRightOf="@id/edit_message" to control placement within a RelativeLayout.

Find out more about LinearLayout here: http://developer.android.com/guide/topics/ui/layout/linear.html and RelativeLayout here: http://developer.android.com/guide/topics/ui/layout/relative.html

Upvotes: 1

Related Questions