如何使LinearLayout嵌套的RelativeLayout内ImageView与TextView共同居中？

Hey there! I get your frustration—layouts can be tricky when you want multiple elements to behave as a single centered unit. Let's break down two straightforward solutions to fix this:

Solution 1: Wrap Both Views in a Container (Simplest Approach) #

The easiest way is to group your ImageView and TextView inside another layout (like a LinearLayout), then center that container within the parent RelativeLayout. This treats both views as a single entity, so they'll stay together and be centered as a group.

Here's the code example:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <!-- Container layout to hold both ImageView and TextView -->
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical" <!-- Use "horizontal" if you want side-by-side -->
            android:layout_centerInParent="true" <!-- Centers the container -->
            android:gravity="center" <!-- Optional: Centers content inside the container -->
            android:padding="8dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/your_image_resource"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Your Display Text"
                android:layout_marginTop="4dp"/> <!-- Adds space between image and text -->

        </LinearLayout>

    </RelativeLayout>
</LinearLayout>

Solution 2: Align Views Directly in RelativeLayout (No Extra Container) #

If you don't want to add an extra layout, you can align both views to the center of the RelativeLayout and position them relative to each other to avoid overlap:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <ImageView
            android:id="@+id/centered_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/your_image_resource"
            android:layout_centerHorizontal="true"
            android:layout_above="@id/centered_text"/> <!-- Positions image above text -->

        <TextView
            android:id="@+id/centered_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Your Display Text"
            android:layout_centerInParent="true"/> <!-- Centers text, image aligns above it -->

    </RelativeLayout>
</LinearLayout>

Key Notes: #

• For vertical alignment (image above text), use android:orientation="vertical" in the container. For side-by-side, switch to horizontal.
• Adding android:gravity="center" to the container ensures the inner views are centered within it (useful if their sizes differ).
• Use layout_margin to add spacing between the image and text for better readability.

内容的提问来源于stack exchange，提问作者Flomp