CODEWITHSUNDEEP
androidxml
user8389198
user8389198

Reputation:

How can i create a TextView right beside an ImageView in xml

How can i create a TextView that is right beside an image view in xml, i keep trying and end up getting a messed up layout.

The text is meant to describe what the image is about to it has to be right be side and aligned, any pointers or help would be appreciated

What I am trying to achieve

My xml is this

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_menu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.drecot.chopperattack.HelpActivity"
    android:background="@drawable/splash">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/helpscreen"
            android:layout_marginTop="130dp"
            android:layout_toEndOf="@+id/imageButton"
            android:layout_toRightOf="@+id/imageButton"
            android:src="@drawable/fuelbig" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/imageView2"
            android:layout_marginLeft="80dp"
            android:layout_marginStart="80dp"
            android:layout_toEndOf="@+id/imageView2"
            android:layout_toRightOf="@+id/imageView2"
            android:text="you can turn away now if you wish"
            android:textColor="#eee"
            android:textSize="18sp" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/helpscreen"
            android:layout_marginTop="180dp"
            android:layout_toEndOf="@+id/imageButton"
            android:layout_toRightOf="@+id/imageButton"
            android:src="@drawable/fuelsmall" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/imageView3"
            android:layout_marginLeft="80dp"
            android:layout_marginStart="80dp"
            android:layout_toEndOf="@+id/imageView3"
            android:layout_toRightOf="@+id/imageView3"
            android:text="you can turn away now if you wish"
            android:textColor="#eee"
            android:textSize="18sp" />

</RelativeLayout>

Upvotes: 1

Views: 272

Answers (4)

Kapil G
Kapil G

Reputation: 4141

You just have to use android:layout_toRightOf for your textview. So your code for one imageview with oneTextview will be 

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    android:layout_marginTop="130dp"
    android:src="@drawable/fuelbig" />

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    android:layout_marginLeft="10dp"
    android:layout_toRightOf="@+id/imageView2"
    android:text="you can turn away now if you wish"
    android:textColor="#eee"
    android:textSize="18sp" />

I removed android:layout_below="@+id/helpscreen" from your 1st imageview here because i dont think even that is necessary as it is your first view and not below anything

Upvotes: 0

Stuti Kasliwal
Stuti Kasliwal

Reputation: 807

simply add weight to your layout which automatically divides your layout according to proportion which you give, and remove all other paddings, margin_left, margin_right etc. other stuff

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

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight=".2"
                android:src="@drawable/guitar"
                />

            <TextView
                android:id="@+id/textView"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight=".8"
                android:text="you can turn away now if you wish"
                android:textColor="#eee"
                android:textSize="18sp" />
        </LinearLayout>

Here is the complete code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_menu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:src="@drawable/guitar"
            android:layout_weight=".2"/>

        <TextView
            android:id="@+id/textView"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".8"
            android:text="you can turn away now if you wish"
            android:textColor="#eee"
            android:textSize="18sp" />
    </LinearLayout>

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

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:src="@drawable/guitar"
            android:layout_weight=".2"/>

        <TextView
            android:id="@+id/textView1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight=".8"
            android:text="you can turn away now if you wish"
            android:textColor="#eee"
            android:textSize="18sp" />
    </LinearLayout>

</LinearLayout>

Upvotes: 0

AskNilesh
AskNilesh

Reputation: 69671

try this you can use android:drawableLeft="@mipmap/ic_launcher" like this

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content" 
    android:text="test"
    android:gravity="center"
    android:drawableLeft="@mipmap/ic_launcher"/>

or use relative layout like this

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

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_placeholder" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/imageView2"
        android:layout_toRightOf="@+id/imageView2"
        android:gravity="center"
        android:text="test" />
</RelativeLayout>

Upvotes: 1

Deepak Rana
Deepak Rana

Reputation: 549

See the follow code may be it help you out:

<?xml version="1.0" encoding="utf-8"?>

    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/activity_menu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context="com.drecot.chopperattack.HelpActivity"
        >



      <LinearLayout
          android:layout_width="match_parent"
          android:orientation="vertical"
          android:layout_height="match_parent">
          <LinearLayout
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:orientation="horizontal"
              >
              <ImageView
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:background="@mipmap/ic_launcher"
                  />
              <TextView
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content" 
                  android:layout_gravity="center_vertical"
                  android:layout_marginLeft="10dp"
                  android:text="this is for testing"
                  />

          </LinearLayout>
          <LinearLayout
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:orientation="horizontal"
              >
              <ImageView
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:background="@mipmap/ic_launcher"
                  />
              <TextView
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:layout_gravity="center_vertical"
                  android:layout_marginLeft="10dp"
                  android:text="this is for testing"
                  />

          </LinearLayout>

      </LinearLayout>

    </RelativeLayout>

Upvotes: 0

Related Questions