How to orderly center some views and align them accordingly

Question

i want to orderly align and place my views on the layout. As shown blow in the code, the first textview is for the title and it should be placed at the top and centered in the middle of the layout. the secondtextview is for showing some text and it should be placed below the middle of the layout. last, the button layout, and it should be placed at the bottom of the layout and centered in the middle of it. Applying the code below does not do that job and it makes all the views are blended

XML:

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.meetingpointlocator_03" >  

<RelativeLayout 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/introScreenTitleID"
    android:text="@string/introScreenTitle"
    android:textColor="@color/introScreenTitleColor"
    android:layout_gravity="center_vertical|center_horizontal"
    android:gravity="top|center"
    android:textSize="@dimen/introScreentitle">
</TextView>

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/introScreenContentID"
    android:textColor="@color/introScreenContentscolor"
    android:text="Some Text"
    android:layout_gravity="center_vertical|center_horizontal"
    android:textSize="@dimen/introScreenContentFontSize">
</TextView>

<Button 
    android:id="@+id/introButtonID"
    android:text="@string/introButtonText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true" 
    android:layout_gravity="center"/>
</RelativeLayout>

Answer 1

Lets try this code :

<?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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.meetingpointlocator_03" >

<Button
    android:id="@+id/introButtonID"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_gravity="center"
    android:text="@string/introButtonText" />

<TextView
    android:id="@+id/introScreenTitleID"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="27dp"
    android:gravity="top|center" android:textColor="@color/introScreenTitleColor"
    android:text="@string/introscreentitle" 
    android:textSize="@dimen/introScreentitle"  />

<TextView
    android:id="@+id/introScreenContentID"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/introButtonID"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/introScreenTitleID" android:textColor="@color/introScreenContentscolor" android:textSize="@dimen/introScreenContentFontSize" 
    android:text="Some Text" />

</RelativeLayout>

OUTPUT is

Answer 2

You need to define Relations between Views in your Relative Layout, here is the correct code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.meetingpointlocator_03" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <TextView
            android:id="@+id/introScreenTitleID"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical|center_horizontal"
            android:gravity="top|center"
            android:text="@string/introScreenTitle"
            android:textColor="@color/introScreenTitleColor"
            android:textSize="@dimen/introScreentitle" >
        </TextView>

        <TextView
            android:id="@+id/introScreenContentID"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical|center_horizontal"
            android:text="Some Text"
            android:textColor="@color/introScreenContentscolor"
            android:textSize="@dimen/introScreenContentFontSize" 
            android:layout_centerHorizontal="true"
            android:gravity="center"
            android:layout_below="@+id/introScreenTitleID">
        </TextView>

        <Button
            android:id="@+id/introButtonID"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_centerHorizontal="true"
            android:text="@string/introButtonText"
            android:layout_below="@+id/introScreenContentID" />
    </RelativeLayout>
</LinearLayout 

Further Study :
1. http://developer.android.com/reference/android/widget/RelativeLayout.html
2. http://knowledge.lapasa.net/?p=334

I hope this helps.

Answer 3

With the relative layout you can set a reference to other items within the layout. So for example if you want the button below the text view you need to reference the id similar to the reference below.

android:layout_alignBottom="@+id/btnSatOff"

you can also use margin spacing to get the spacing that you are looking for in between items.

Of course you can probably use a simple linearlayout similar to what you started with and use the layout_gravity settings to align the items the way you want.

top textview would be layout_gravity="center"

middle textview would be layout_gravity="center_horizontal"

button would be layout_gravity="center|bottom"

Answer 4

// try this way,hope this will help you...

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.meetingpointlocator_03" >


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/introScreenTitleID"
        android:text="@string/introScreenTitle"
        android:textColor="@color/introScreenTitleColor"
        android:textSize="@dimen/introScreentitle"
        android:layout_marginTop="5dp">
    </TextView>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="5dp"
        android:layout_weight="1">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/introScreenContentID"
            android:textColor="@color/introScreenContentscolor"
            android:text="Some Text"
            android:textSize="@dimen/introScreenContentFontSize">

    </LinearLayout>

    <Button
        android:id="@+id/introButtonID"
        android:text="@string/introButtonText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"/>
</LinearLayout>