Having a textview below another textview that is centered?

Question

I currently have a textview that is centered, and would like to add another textview below the centered textview, but it just places it at the same place as the previous textview, is there a way to fix this?

Code:

<FrameLayout
        android:layout_width="350dp"
        android:layout_height="500dp"
        android:background="@color/white">

        <TextView
            android:id="@+id/info_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="@string/test"
            android:textSize="18sp"
            android:textStyle="normal"
        />
        <TextView
            android:id="@+id/info_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="@string/test"
            android:textSize="18sp"
            android:textStyle="normal"
            />

    </FrameLayout>

Answer 1

Your are setting gravity in 2nd textview as center remove it or use your desire gravity there

Answer 2

Use Linear layout with android: orientation then you got your center layout

<LinearLayout
        android:layout_width="350dp"
        android:layout_height="500dp"
        android:orientation="vertical"
        android:background="@color/white">

        <TextView
            android:id="@+id/info_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="@string/test"
            android:textSize="18sp"
            android:textStyle="normal"
        />
        <TextView
            android:id="@+id/info_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="@string/test"
            android:textSize="18sp"
            android:textStyle="normal"
            />

    </FrameLayout>

Answer 3

Instead of using FrameLayout use LinearLayout

<LinearLayout
    android:gravity="center"
    android:layout_width="350dp"
    android:layout_height="500dp"
    android:background="@color/white"
    android:orientation="vertical">

    <TextView
        android:id="@+id/info_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/test"
        android:textSize="18sp"
        android:textStyle="normal"
        />

    <TextView
        android:id="@+id/info_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/test"
        android:textSize="18sp"
        android:textStyle="normal"
        />

</LinearLayout>

Output:

Answer 4

I hope this will work for you.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white">

    <TextView
        android:id="@+id/info_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:text="@string/test"
        android:textSize="18sp"
        android:textStyle="normal" />

    <TextView
        android:id="@+id/info_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:layout_marginBottom="10dp"
        android:gravity="center"
        android:text="@string/test"
        android:textSize="18sp"
        android:textStyle="normal" />

</FrameLayout>

Always use match_parent and wrap_content instead of dimensions in dp.

Answer 5

I see in your file that you have android:layout_gravity="center" and android:gravity="center" for both textviews. This will make them sit on top of each other. You could try putting some padding on the bottom of the info_name and on the top of the info_text like so:

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

    <TextView
        android:id="@+id/info_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="60dp"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="@string/test"
        android:textSize="18sp"
        android:textStyle="normal" />

    <TextView
        android:id="@+id/info_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="60dp"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="@string/test"
        android:textSize="18sp"
        android:textStyle="normal" />
</FrameLayout>

While this will add some space it is basically just stretching the textview itself and the textviews will still be overlapping. You could use the linear layout as suggested above but I prefer to use the constraint layout as it makes placing items and providing spacing so much easier. You can right click on the FrameLayout in the component Tree and convert it to ConstraintLayout. Then you can place the info_name and have its constraint handles set to 50 in the constraint widget, Android Studio ConstraintLayout Widget and then hook the other textview to it and set it where you like placing second textview.

Here is the xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/frameLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/info_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/test"
        android:textSize="18sp"
        android:textStyle="normal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/info_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/test"
        android:textSize="18sp"
        android:textStyle="normal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/info_name"
        app:layout_constraintVertical_bias="0.100000024" />
</androidx.constraintlayout.widget.ConstraintLayout>

You can find out more information in the documentation here.

Answer 6

Place two text view inside relative layout

 <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="350dp"
        android:layout_height="500dp"
        android:background="@android:color/darker_gray">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center">

            <TextView
                android:id="@+id/info_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="Name"
                android:textSize="18sp"
                android:textStyle="normal" />

            <TextView
                android:layout_below="@+id/info_name"
                android:id="@+id/info_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="Test"
                android:textSize="18sp"
                android:textStyle="normal" />
        </RelativeLayout>
    </FrameLayout>