Search code examples
androidalignmentandroid-linearlayouttextviewandroid-imagebutton

How to get TextView (titles) in a LinearLayout to match corresponding ImageButton objects?


I've had quite a hard time getting my layout to work, but am now close except for getting the titles to 2 ImageButton objects to match the images on screen. I need titles to the ImageButtons to be just to the right of the images.

It's much easier to visualize so below are two pics. The first is how things look now and the second is how I want them to look. I've colored the backgrounds of the major pieces pieces so you its easier to connect the xml widgets to what is seen on the device. Once I get things right I'll just remove the background attribute.

What things look like now:

enter image description here

What I need things to look like. Notice alignment of text to the right of the two button images:

enter image description here

The xml Layout:

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".35"
        android:background="@color/LightGreen"
        >

        <Space
            android:layout_width="match_parent"
            android:layout_weight=".2"
            android:layout_height="0dp"/>

        <ImageView
            android:id="@+id/imgViewLogo"
            android:src="@drawable/logo"
            android:layout_margin="10dp"
            android:layout_width="90dp"
            android:layout_height="0dp"
            android:gravity="center"
            android:layout_gravity="center_horizontal"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            android:layout_weight=".55"
             />

        <Space
            android:layout_width="match_parent"
            android:layout_height="10dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Temporary Title for Logo"
            android:id="@+id/tvAILLogo"
            android:layout_margin="2dp"
            android:textSize="@dimen/font_size22"
            android:textStyle="bold"
            android:gravity="center"
            android:layout_gravity="center_horizontal"
            android:layout_weight=".25"
            />

    </LinearLayout>

    <Space
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".1"
        />

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".4"
         >

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:background="@color/LightCoral"
            >

            <ImageButton
                android:id="@+id/imgBtn1"
                android:src="@drawable/imgbtn1"
                android:layout_width="90dp"
                android:layout_height="95dp"
                android:background="@null"
                android:layout_gravity="right"
                android:adjustViewBounds="true"
                android:scaleType="fitCenter"
                />

            <Space
                android:layout_width="match_parent"
                android:layout_height="15dp"
                />

            <ImageButton
                android:id="@+id/imgBtn2"
                android:src="@drawable/imgbtn2"
                android:layout_width="90dp"
                android:layout_height="95dp"
                android:background="@null"
                android:layout_gravity="right"
                android:adjustViewBounds="true"
                android:scaleType="fitCenter"
                />

        </LinearLayout>

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".5"
            android:background="@color/LightYellow"
            >

            <TextView
                android:id="@+id/tvGradeAssessment"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="Title1"
                android:textColor="@color/white"
                android:textSize="@dimen/font_size24"
                android:paddingLeft="10dp"
                android:layout_gravity="left"
                android:background="@color/red"
                />

            <Space
                android:layout_width="match_parent"
                android:layout_height="15dp"
                />

            <TextView
                android:id="@+id/tvPrivateData"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="Title2"
                android:textColor="@color/white"
                android:textSize="@dimen/font_size24"
                android:paddingLeft="10dp"
                android:background="@color/green"
                android:layout_gravity="left"
                />

        </LinearLayout>

    </LinearLayout>

    <!-- filler -->
    <Space
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight=".05"
        />

    <TextView
        android:id="@+id/tvVersionNumber"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:text="[Version number]"
        android:layout_gravity="bottom"
        android:paddingLeft="15dp"
        android:layout_weight=".1"
        android:textSize="20sp"
        android:background="@color/LightGrey"
        />


</LinearLayout>

Solution

  • set the height of the text views to android:layout_height="95dp" in order to match the height of the ImageView's and set android:gravity="center_vertical"

    IMHO you should try doing that with another type of Layout - you have too many nested LinearLayouts