Search code examples
androidgrid-layoutandroid-gridlayoutqgridlayout

Aligning textviews with imageview in a gridlayout


I'm trying to align 5 textviews with an imageview. I've created a gridlayout with 2 columns and 5 rows. In column 0 are 5 textviews divided in 5 rows. In column 1 is an imageview that spans over the 5 rows. But I can't get my desired layout. See below the desired layout:

enter image description here

My code:

<GridLayout
        android:id="@+id/gridlayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnCount="2"
        android:layout_below="@+id/titel_over_ons">

        <TextView
            android:id="@+id/intro"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_row="0"
            android:layout_column="0"
            android:text="" />

        <ImageView
            android:id="@+id/foto_over_ons"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:layout_row="0"
            android:layout_gravity="end"
            android:contentDescription="@string/dm_design_webdesign_moobiele_applicaties_en_grafische_vormgeving" />

        <TextView
            android:id="@+id/titel_dr"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:layout_row="1"
            android:layout_column="0"
            android:layout_gravity="start"
            android:text="" />

        <TextView
            android:id="@+id/tekst_dr"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_row="2"
            android:layout_column="0"
            android:layout_marginTop="10dp" />


        <TextView
            android:id="@+id/titel_service"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:layout_row="3"
            android:layout_column="0"
            android:layout_marginTop="15dp"
            android:text="" />

        <TextView
            android:id="@+id/tekst_service"
            android:layout_width="0dp"
            android:layout_gravity="start"
            android:layout_height="wrap_content"
            android:layout_row="4"
            android:layout_column="0"
            android:layout_marginTop="10dp" />


    </GridLayout>

Can someone help me with this issue? Thank you.


Solution

  • This code will show the TextViews divided equally :

    (Remove the backgrounds, they are just for view proposes)

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="horizontal" android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:orientation="vertical"
            >
            <TextView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:layout_margin="5dp"
                android:background="#222" />
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:layout_margin="5dp"
                android:background="#675" />
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:layout_margin="5dp"
                android:background="#989" />
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:layout_margin="5dp"
                android:background="#e34" />
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:layout_margin="5dp"
                android:background="#e76" />
    
    
    
    
        </LinearLayout>
    
        <ImageView
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:layout_marginStart="10dp"
            android:background="#eae"
            />
    
    
    
    </LinearLayout>]
    

    Imagem de como ficaria