Add textview to layout?

Question

I cant put a textview above my buttons without having my buttons move...How can I fix this?

Been stuck on this for 4 hours...Which is sad because I'm trying to add a textview on my layout...

I have a layout with 4 buttons in the center. I simply want to add a textview above the four buttons, like illustrated here (TextView should be in the place of the red) :

The drag and drop in the XML layout view will not work when I place the textview above the buttons. It just dis centers the buttons. I also tried doing what this answer suggested, but then the anchor view itself would not be positioned in the center!

Here is my XML:

<?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.me.circleswithmap.MainActivity"
    android:id="@+id/layout"
    android:gravity="center">

    <ImageButton
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:id="@+id/Blue"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:background="@drawable/bluesquare" />

    <ImageButton
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:id="@+id/Green"
        android:layout_below="@+id/Blue"
        android:layout_alignLeft="@+id/Blue"
        android:layout_alignStart="@+id/Blue"
        android:background="@drawable/greensquare" />

    <ImageButton
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:id="@+id/Red"
        android:layout_alignTop="@+id/Blue"
        android:layout_toRightOf="@+id/Blue"
        android:layout_toEndOf="@+id/Blue"
        android:background="@drawable/redsquare" />

    <ImageButton
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:id="@+id/Purple"
        android:layout_alignBottom="@+id/Green"
        android:layout_alignLeft="@+id/Red"
        android:layout_alignStart="@+id/Red"
        android:background="@drawable/purplesquare" />



    NEED SOME TEXTVIEW ALSO! WHENEVER I ADD ONE, IT DISCENTERS THE REST OF THE BUTTONS!


</RelativeLayout>

What should I do to tackle this problem? Why is it so difficult? Should I not use Relative Layout? How can I stop this from being relative to each other?

Thanks so much,

NullPointerException

You could put a FrameLayout as the outermost layout element, and put the RelativeLayout and your TextView inside that element. — 1615903, Dec 14 '15 at 10:47
@1615903 How do I move my current code into a new layout then? Feel free to post an answer. Thanks for your reply :-) — , Dec 14 '15 at 10:51

Héctor · Answer 1 · 2015-12-14T12:23:41.630

<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"
                tools:context="com.example.ruchir.circleswithmap.MainActivity"
                android:id="@+id/layout">

    <LinearLayout android:layout_width="wrap_content"
                  android:id="@+id/text_container"
                  android:layout_centerInParent="true"
                  android:layout_alignParentTop="true"
                  android:layout_height="wrap_content">
        <TextView android:layout_width="match_parent"
                  android:text="pruebaskjahlkdjahslk"
                  android:layout_height="match_parent"/>
    </LinearLayout>

    <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_centerInParent="true"
            android:layout_height="wrap_content">

        <ImageButton
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:id="@+id/Blue"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"/>

        <ImageButton
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:id="@+id/Green"
                android:layout_below="@+id/Blue"
                android:layout_alignLeft="@+id/Blue"
                android:layout_alignStart="@+id/Blue"/>

        <ImageButton
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:id="@+id/Red"
                android:layout_alignTop="@+id/Blue"
                android:layout_toRightOf="@+id/Blue"
                android:layout_toEndOf="@+id/Blue"/>

        <ImageButton
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:id="@+id/Purple"
                android:layout_alignBottom="@+id/Green"
                android:layout_alignLeft="@+id/Red"
                android:layout_alignStart="@+id/Red"/>

    </RelativeLayout>
</RelativeLayout>

Landscape orientation

<?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"
                tools:context="com.example.me.circleswithmap.MainActivity"
                android:id="@+id/layout">

    <LinearLayout android:layout_width="wrap_content"
                  android:id="@+id/text_container"
                  android:layout_height="wrap_content"
                  android:layout_centerHorizontal="true">
        <TextView
                android:layout_width="match_parent"
                android:text="20:00"
                android:layout_height="match_parent"
                android:textAppearance="?android:attr/textAppearanceLarge"
                />
    </LinearLayout>

    <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/relativeLayout"
            android:layout_below="@id/text_container"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true"
            >

        <ImageButton
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:id="@+id/Blue"
                android:layout_alignParentTop="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"/>

        <ImageButton
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:id="@+id/Green"
                android:layout_below="@+id/Blue"
                android:layout_alignLeft="@+id/Blue"
                android:layout_alignStart="@+id/Blue"/>

        <ImageButton
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:id="@+id/Red"
                android:layout_alignTop="@+id/Blue"
                android:layout_toRightOf="@+id/Blue"
                android:layout_toEndOf="@+id/Blue"/>

        <ImageButton
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:id="@+id/Purple"
                android:layout_alignBottom="@+id/Green"
                android:layout_alignLeft="@+id/Red"
                android:layout_alignStart="@+id/Red"/>

    </RelativeLayout>

</RelativeLayout>

Also, how do I get the four buttons centers in the middle of the screen? I tried `android:gravity = "center"` in the relative layout, but it did nothing — , Dec 14 '15 at 11:10
Okay, its working. So, without the background, there is a margin between the buttons...that margin goes away after I add the background. Is there a way to keep that margin? http://snag.gy/ew2nD.jpg — , Dec 14 '15 at 11:26
It is hard to answer that without having the background drawables. Try adding some margin to each ImageButton — Héctor, Dec 14 '15 at 11:34
Okay, so I'm going to mark you best answer and like your post once I get this. How do I actually place the four buttons in the center when I have landscape orientation. Again, the layout is not dragging. — , Dec 14 '15 at 11:45
Have you tried the same layout for landscape orientation? It is working for me. The buttons are centered. — Héctor, Dec 14 '15 at 11:49
Really? I want enough space at the bottom for an ad...But don't have that space. Here is the layout: https://gist.github.com/anonymous/07a73b1931712f47fc55 — , Dec 14 '15 at 11:56
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/97848/discussion-between-nullpointerexception-and-bigdestroyer). — , Dec 14 '15 at 12:11
Now I want to put the textView on the side of the four squares...How do I do that? I tried doing the linear layout method, but then, the four buttons just move again. — , Dec 15 '15 at 09:23
Can you edit your answer to help me? Or give me a suggestion? That would be great. Thanks — , Dec 15 '15 at 09:24
He has no longer solved your question. If you have more doubts write more questions. — Sapikelio, Dec 15 '15 at 09:27
@Sapikelio I did, but it got marked duplicate. I don't know what to do now. `bigdestroyer` is not responding anymore, because only reason he posted the answer was for rep. — , Dec 15 '15 at 10:46
@bigdestroyer http://stackoverflow.com/questions/34286727/add-textview-next-to-buttons-not-a-duplicate — , Dec 15 '15 at 10:47

score 0 · Answer 2 · edited Dec 14 '15 at 12:51

0

A simple and quick solution could be to use two layouts: keep the RelativeLayout and embed it in a vertical LinearLayout. Then you can just add the TextView to the LinearLayout before the RelativeLayout.

Caution: using multiple layers of Layouts can hurt performance, so don't overdo it. Two layouts shouldn't hurt though.

edited Dec 14 '15 at 12:51

Aditya Vyas-Lakhan

13,409
16
61
96

answered Dec 14 '15 at 10:51

delucasvb

5,393
4
25
35

How do I move my current layout into the LinearLayout? – Dec 14 '15 at 10:52
I would just do that manually in the XML file, I don't use the wysiwyg designer much. The easiest way might be to change the types of the tags you have right now from to and then drag and drop a new RelativeLayout in the designer. Don't forget to change your layout properties accordingly (for both layouts)! EDIT: Oh and don't forget to move your buttons to the new RelativeLayout, of course ;) – delucasvb Dec 14 '15 at 10:56

score 0 · Answer 3 · answered Dec 14 '15 at 10:54

You can wrap the buttons inside a layout and then place a textview above it and tell the new layout to be below the text view

<?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:id="@+id/layout"
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.ruchir.circleswithmap.MainActivity">

<TextView
    android:id="@+id/textview111"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/password_text_view"
    android:layout_alignParentTop="true"/>

<RelativeLayout
    android:layout_below="@id/textview111"
    android:layout_width="wrap_content"
    android:layout_height="match_parent">

    <ImageButton
        android:id="@+id/Blue"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:background="@color/primaryColor" />

    <ImageButton
        android:id="@+id/Green"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignLeft="@+id/Blue"
        android:layout_alignStart="@+id/Blue"
        android:layout_below="@+id/Blue"
        android:background="@color/primaryColor" />

    <ImageButton
        android:id="@+id/Red"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignTop="@+id/Blue"
        android:layout_toEndOf="@+id/Blue"
        android:layout_toRightOf="@+id/Blue"
        android:background="@color/primaryColor" />

    <ImageButton
        android:id="@+id/Purple"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignBottom="@+id/Green"
        android:layout_alignLeft="@+id/Red"
        android:layout_alignStart="@+id/Red"
        android:background="@color/primaryColor" />
</RelativeLayout>

</RelativeLayout>

and this should do the trick, hope it helps

score 0 · Answer 4 · answered Dec 16 '15 at 06:21

It will work in all size of devices but you have to take of text size of left TextView dynamically. TextView text size should be small according device density. hope it will help.!

<?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:id="@+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#010101"
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.ruchir.circleswithmap.MainActivity" >

<LinearLayout
    android:id="@+id/text_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/relativeLayout"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="10dp" >

    <TextView
        android:id="@+id/timetext"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="20:00"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="#fbfafa"
        android:textSize="50sp" />
</LinearLayout>

<TextView
    android:id="@+id/txt"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="50:00"
    android:gravity="center_vertical|right"
    android:layout_toLeftOf="@+id/relativeLayout"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:textColor="#fbfafa"
    android:textSize="50sp" />

<RelativeLayout
    android:id="@+id/relativeLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true" >

    <ImageButton
        android:id="@+id/Blue"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/ic_launcher" />

    <ImageButton
        android:id="@+id/Green"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_below="@+id/Blue"
        android:background="@drawable/ic_launcher" />

    <ImageButton
        android:id="@+id/Red"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignTop="@+id/Blue"
        android:layout_toEndOf="@+id/Blue"
        android:layout_toRightOf="@+id/Blue"
        android:background="@drawable/ic_launcher" />

    <ImageButton
        android:id="@+id/Purple"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignBottom="@+id/Green"
        android:layout_alignLeft="@+id/Red"
        android:layout_alignStart="@+id/Red"
        android:background="@drawable/ic_launcher" />
</RelativeLayout>

Add textview to layout?

4 Answers4

Linked

Related