CODEWITHSUNDEEP
androidandroid-layout
user672009
user672009

Reputation: 4585

Place imageview next to textview

I'm trying to place an imageview next to a textview. However they keep ending up on different "lines".

    <ImageView
      android:layout_width="10dp"
      android:layout_height="wrap_content"
      android:id="@+id/medication_administration_time_row_fmk_icon" />

    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_toLeftOf="@id/medication_administration_time_row_fmk_icon"
      android:id="@+id/medication_administration_time_row_drug" />

Placing the image as a compound drawable isn't an option as that is used for another image.

Any clues about how I can get the image on the same line as the text?

Upvotes: 3

Views: 10507

Answers (5)

Erasmo Jose da Silva
Erasmo Jose da Silva

Reputation: 1

You can do it like this

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

                <ImageView
                    android:id="@+id/imageViewTipoProduto"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="16dp"
                    android:layout_marginStart="16dp"
                    android:layout_marginTop="8dp"
                    app:srcCompat="@drawable/ic_kit_produtos_white_12dp" />

                <TextView
                    android:id="@+id/textViewTipoProduto"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="22dp"
                    android:layout_marginLeft="8dp"
                    android:layout_marginStart="8dp"
                    android:layout_marginTop="4dp"
                    android:fontFamily="sans-serif-light"
                    android:letterSpacing="0.04"
                    android:text="@string/kit_de_produtos"
                    android:textColor="#ffffff"
                    android:textSize="14sp"
                    android:textStyle="normal" />

            </LinearLayout>

Upvotes: 0

mr Android
mr Android

Reputation: 78

I would like to give you some tips when you are trying to make UI of the app. The first thing you should do is to try to get the UI you want using design tool where you can place UI elements and what is more important you can also see which attributes you can set for specific layout. That will save you some time.

And answer to you question would be linear layout which is the most easier way to do it. Just try to avoid weights(here not necessary) because than it takes more time to create UI.

Here is great tutorial to understand layout bit better.

http://www.androidhive.info/2011/07/android-layouts-linear-layout-relative-layout-and-table-layout/

And of course answer to your question(did it just by using design tool):

<?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:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:gravity="center_vertical|center_horizontal">

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Small Text"
            android:id="@+id/textView2"
            android:gravity="right" />
    </LinearLayout>

</LinearLayout>

Upvotes: 5

IntelliJ Amiya
IntelliJ Amiya

Reputation: 75778

Use android:layout_toRightOf: Positions the left edge of this view to the right of the given anchor view ID. Accommodates left margin of this view and right margin of anchor view.Property of RelativeLayout.So finally,

<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
 >

<ImageView
 android:id="@+id/medication_administration_time_row_drug"
  android:layout_width="10dp"
  android:layout_height="wrap_content"
  android:id="@+id/medication_administration_time_row_fmk_icon" />

<TextView
    android:id="@+id/descriptioncomma" 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text=""
    android:layout_toRightOf="@id/medication_administration_time_row_drug" />

Upvotes: 5

Byte Brad
Byte Brad

Reputation: 2357

Using Compound Drawable

<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_toLeftOf="@id/medication_administration_time_row_fmk_icon"
  android:id="@+id/medication_administration_time_row_drug"
  android:drawableLeft="@drawable/your_image_name />

In this you setting the ImageView to the left of TextView

Else if you want this as separate components means try this (Another way of doing)

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

<ImageView
  android:layout_width="10dp"
  android:layout_height="wrap_content"
  android:id="@+id/medication_administration_time_row_fmk_icon" />

<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_toLeftOf="@id/medication_administration_time_row_fmk_icon"
  android:id="@+id/medication_administration_time_row_drug" />

</LinearLayout>

Change the android:orientation of LinearLayout in case if you want it vertical, accordingly change the android:gravity too

Upvotes: 0

Thomas R.
Thomas R.

Reputation: 8073

There are two ways to achieve this.

  1. Use a LinearLayout as container/parent with either vertical or horizontal orientation, what fits your needs.

  2. You can use an relative layout as container/parent and then use "toRightOf" or "above"/"below" property and use the ids of your child views.

The better approach is the first one, as relative layout measure twice.

Upvotes: 3

Related Questions