CODEWITHSUNDEEP
androidlayoutvertical-alignmenthtml-table
markbse
markbse

Reputation: 1123

How to rowspans and vertical alignment?

I'm trying to make a row layout with 2 columns like in this image http://oi56.tinypic.com/1z2g9k9.jpg

Summary

The goal is to have 2 columns. The right column has a rowspan of 2 so that the icon inside is middle vertical aligned to the 2 rows of text of the left column.

Try

What I have so far is a Linear Layout containing a Relative Layout (to align two text rows) and an ImageView for the icon:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"> 
    <RelativeLayout
        android:id="@+id/relativeLayoutLeft"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:padding="5dip">
        <TextView
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:layout_width="wrap_content"
            android:id="@+id/BigText" 
            android:layout_marginLeft="2dip">
        </TextView> 
        <TextView
            android:layout_height="wrap_content"
            android:text="TextView"
            android:layout_width="wrap_content"
            android:id="@+id/SmallText" 
            android:layout_below="@+id/BigText"
            android:layout_marginLeft="2dip">
        </TextView>

    </RelativeLayout>
    <ImageView
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:id="@+id/Icon"
        android:src="@drawable/icon"
        android:layout_gravity="right"
        android:scaleType="center">
    </ImageView>  
</LinearLayout>

Problem

The problem is that the RelativeLayout has 100% width and the image is outside of the screen. If it is changed from fill_parent to wrap_content, the image is not aligned to the right edge of the screen (because the left column width is not always 90% or so).

Upvotes: 0

Views: 1047

Answers (1)

JoeLallouz
JoeLallouz

Reputation: 1350

You should be able to place the image view inside the RelativeLayout and use alignParentRight and centerVertical like so. alignParentRight will send the image to the right side of the relative (your row) and centerVertical will center it within the row.

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"> 
    <RelativeLayout
        android:id="@+id/relativeLayoutLeft"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:padding="5dip">
        <TextView
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:layout_width="wrap_content"
            android:id="@+id/BigText" 
            android:layout_marginLeft="2dip">
        </TextView> 
        <TextView
            android:layout_height="wrap_content"
            android:text="TextView"
            android:layout_width="wrap_content"
            android:id="@+id/SmallText" 
            android:layout_below="@+id/BigText"
            android:layout_marginLeft="2dip">
        </TextView>
        <ImageView
            android:layout_width="50dip"
            android:layout_height="50dip"
            android:id="@+id/Icon"
            android:src="@drawable/icon"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:scaleType="center">
        </ImageView>  

    </RelativeLayout>
</LinearLayout>

Upvotes: 1

Related Questions