Text pushes centered elements

Question

I'm new to mobile apps and I'm having a hard time with the layouts. I have my elements centered, but when I put more text it pushes everything to the left. How can I make it so the text goes to the right without pushing everything else?

Layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center">
    <TextView
        android:text="@string/status_text"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="wrap_content"
        android:id="@+id/status_view"
        android:layout_marginTop="59.0dp"
        android:layout_height="70dp"
        android:textSize="30sp" />
    <ImageView
        android:src="@drawable/circle_green"
        android:layout_width="119.5dp"
        android:layout_height="80dp"
        android:id="@+id/status_image"
        android:layout_toRightOf="@id/status_view"
        android:layout_marginTop="37.3dp"
        android:layout_marginLeft="15.6dp" />
    <ImageView xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:id="@+id/smoke_image"
        android:src="@drawable/smoke_green"
        android:layout_below="@id/status_view" />
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_below="@id/smoke_image"
        android:id="@+id/motion_image"
        android:src="@drawable/motion_green" />
    <TextView
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/smoke_view"
        android:id="@+id/motion_view"
        android:layout_toRightOf="@id/motion_image"
        android:layout_marginTop="15dp"
        android:text="Motion detected" />
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_below="@id/motion_image"
        android:id="@+id/door_image"
        android:src="@drawable/door_green" />
    <TextView
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/motion_view"
        android:id="@+id/door_view"
        android:layout_toRightOf="@id/door_image"
        android:layout_marginTop="13dp"
        android:text="Door open" />
    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_below="@id/door_image"
        android:id="@+id/temperature_image"
        android:src="@drawable/temperature_green" />
    <TextView
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/door_view"
        android:id="@+id/temperature_view"
        android:layout_toRightOf="@id/temperature_image"
        android:layout_marginTop="11dp"
        android:text="Temperature:" />
    <TextView xmlns:tools="http://schemas.android.com/tools"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/smoke_view"
        android:layout_toRightOf="@id/smoke_image"
        android:text="Smoke detected"
        android:layout_marginTop="7dp"
        android:layout_alignBottom="@id/smoke_image" />
</RelativeLayout>

instead of adding imageview you should try adding drawableLeft to your textview thus reducing the of views and also solve your problem.This is just a suggestion(android:drawableLeft="@drawable/checkmark").Try using it and see if it helps. — Anirudh Sharma, Jul 30 '15 at 08:56
@AnirudhSharma I'm changing the images when certain conditions happen, I doubt I can do that with this. — Denki, Jul 30 '15 at 09:16
Why not.You can always add a drawable left programatically. http://stackoverflow.com/questions/4502605/how-to-programatically-set-drawableleft-on-android-button — Anirudh Sharma, Jul 30 '15 at 09:35
@AnirudhSharma The problem is I can't scale the drawable and it's ginormous. — Denki, Jul 30 '15 at 10:57
then probably you need to give fixed height and width to your images. — Anirudh Sharma, Jul 30 '15 at 10:59

Amarjit · Answer 1 · 2015-07-30T09:15:17.973

0

add android:gravity="center" to your text views as

<TextView
        android:text="@string/status_text"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_width="wrap_content"
        android:id="@+id/status_view"
        android:layout_marginTop="59.0dp"
        android:layout_height="70dp"
        android:gravity="center"
        android:textSize="30sp" />

EDIT :

Instead of taking image view on left side you can use android:drawableLeft="@drawable/image_name"

edited Jul 30 '15 at 09:15

answered Jul 30 '15 at 08:55

Amarjit

4,327
2
34
51

first of all make text view height to every view as android:layout_height="wrap_content" instead of defining some value – Amarjit Jul 30 '15 at 09:12
try to add android:layout_gravity="center" – Amarjit Aug 07 '15 at 12:27

Text pushes centered elements

1 Answers1