0

I am trying to create layout like below in android: Layout

But my problem is I am unable to add textbelow the image or on the right hand side of imageview. If I wrap ImageView and textview in a LinearLayout the then the whole view shrinks. Should I be using TableLayout?

My current layout xml is like below:

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:layout_below="@id/my_recycler_view"
    android:layout_margin="30dp">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:orientation="vertical"
        android:layout_weight="1"


        >

        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/vwImageAndClassroom"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            >

            <ImageView
                android:id="@+id/img_room"
                android:layout_width="fill_parent"
                android:layout_height="100dp"
                android:layout_gravity="center_horizontal"
                android:contentDescription="@string/coverimage_contentdescription"
                android:scaleType="fitCenter"
                android:src="@drawable/comm_book_icon"

                />

            <TextView
                android:id="@+id/tv_emp_name"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal|center_vertical"
                android:textSize="12dp"
                android:textStyle="bold"
                android:textAllCaps="true"
                android:layout_below="@id/img_room"
                android:layout_marginBottom="20dp"
                android:gravity="center_horizontal"
                android:text="TEXT 1"

                />
        </RelativeLayout>

    </LinearLayout>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:orientation="vertical"
        android:layout_weight="1"


        >

        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/vwImageAndClassroom2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            >

            <ImageView
                android:id="@+id/img_room2"
                android:layout_width="fill_parent"
                android:layout_height="100dp"
                android:layout_gravity="center_horizontal"
                android:contentDescription="@string/coverimage_contentdescription"
                android:scaleType="fitCenter"
                android:src="@drawable/visitor_book_icon"

                />

            <TextView
                android:id="@+id/tv_emp_name2"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal|center_vertical"
                android:textSize="12dp"
                android:textStyle="bold"
                android:textAllCaps="true"
                android:layout_below="@id/img_room2"
                android:layout_marginBottom="20dp"
                android:gravity="center_horizontal"
                android:text="TEXT 2"

                />
        </RelativeLayout>

    </LinearLayout>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:orientation="vertical"
        android:layout_weight="1"


        >

        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/vwImageAndClassroom3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            >

            <ImageView
                android:id="@+id/img_room3"
                android:layout_width="fill_parent"
                android:layout_height="100dp"
                android:layout_gravity="center_horizontal"
                android:contentDescription="@string/coverimage_contentdescription"
                android:scaleType="fitCenter"
                android:src="@drawable/visitor_book_icon"

                />

            <TextView
                android:id="@+id/tv_emp_name3"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal|center_vertical"
                android:textSize="12dp"
                android:textStyle="bold"
                android:textAllCaps="true"
                android:layout_below="@id/img_room3"
                android:layout_marginBottom="20dp"
                android:gravity="center_horizontal"
                android:text="TEXT 3"

                />
        </RelativeLayout>

    </LinearLayout>

</LinearLayout>
3
  • please show the output screen of this xml design of yours above mentioned picture does not correspond the information very well with provided xml Apr 22, 2018 at 11:38
  • @snowflakes which one? Or all at once? Apr 22, 2018 at 11:39
  • @Rizwanatta Thank you please see my updated xml ..it is almost what I am trying to achieve. The only thing that is not working is ability to add text to the right of the third imageview as per the illustration. Apr 22, 2018 at 12:03

3 Answers 3

1

Hope this will help you and you will find your solutions from this xml code. I just modify some of your code

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/image1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:src="@android:drawable/ic_search_category_default"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This Right side text 1"/>

</LinearLayout>


<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView

        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:src="@android:drawable/ic_search_category_default"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This Right side text 1"/>

</LinearLayout>


<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:src="@android:drawable/ic_search_category_default"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This Right side text 1"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="center">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="This is under layout text"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="This is under layout text"/>

    </LinearLayout>

</LinearLayout>

2
  • thank you please have a look at my updated layout in my question. It is almost what I am trying to achieve except I just want two more textfields align to the right of the imageview (img_room3) Apr 22, 2018 at 11:54
  • Please check the latest update. Hope this will be okay Apr 22, 2018 at 12:17
1

Have placeholder views where text is not required.

enter image description here

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:orientation="horizontal">

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

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/next_green" />

        <View
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" />
    </LinearLayout>

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

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/next_green" />

        <View
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" />
    </LinearLayout>

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

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/next_green" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="text"/>
    </LinearLayout>
</LinearLayout>
1

I did exactly what you want

Open image

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">


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

<ImageView
    android:id="@+id/imageView"
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    app:srcCompat="@android:drawable/btn_dialog" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:srcCompat="@android:drawable/btn_dialog" />

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        app:srcCompat="@android:drawable/btn_dialog" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView5"
            android:layout_width="match_parent"
            android:layout_height="15dp"
            android:text="Some text" />

        <TextView
            android:id="@+id/textView6"
            android:layout_width="match_parent"
            android:layout_height="15dp"
            android:text="Some text" />
    </LinearLayout>

</LinearLayout>
</LinearLayout>

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

    <TextView
        android:id="@+id/textView7"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Some text"
        app:srcCompat="@android:drawable/btn_dialog" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textView8"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Some text"
            app:srcCompat="@android:drawable/btn_dialog" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textView9"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Some text"
            app:srcCompat="@android:drawable/btn_dialog" />


        </LinearLayout>

    </LinearLayout>
    </LinearLayout>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.