CODEWITHSUNDEEP
androidandroid-layoutandroid-fragments
skapaid
skapaid

Reputation: 169

How to align (an ImageView and a TextView) to the left and (an ImageView and a TextView) to the right

I have a header bar which has two ImageViews

One is aligned to the left and one is aligned to the right, like below

<RelativeLayout
    android:id="@+id/headersection"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:background="#181b1c" >



    <ImageView
        android:id="@+id/img_play"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_margin="5dp"
        android:layout_marginRight="10dp"
        android:contentDescription="@string/img_des"
        android:src="@drawable/play" />



    <ImageView
        android:id="@+id/img_backicon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerHorizontal="true"
        android:layout_margin="5dp"
        android:layout_marginLeft="10dp"
        android:contentDescription="@string/img_des"
        android:src="@drawable/back" />
</RelativeLayout>

I want to put a TextView beside each image so the left ImageView would have a TextView beside it (aligned to the left right beside the left ImageView) and the right ImageView would have a TextView beside it (aligned to the right right beside the right ImageView)...

I have tried about 30 different ways of coding and can't figure it out

Here is an example of what I am trying to do

    <RelativeLayout
        android:id="@+id/headersection"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:background="#181b1c" >

<!-- NEED TO PUT A TEXTVIEW HERE THAT ALIGNS TO THE RIGHT IMAGE BELOW -->

    <TextView
        android:id="@+id/RIGHT_TEXT"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="RIGHT TEXT HERE"
        android:textColor="@color/Category_Title_Color"
        android:textSize="20sp" />

        <ImageView
            android:id="@+id/img_play"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_margin="5dp"
            android:layout_marginRight="10dp"
            android:contentDescription="@string/img_des"
            android:src="@drawable/play" />


<!-- NEED TO PUT A TEXTVIEW HERE THAT ALIGNS TO THE LEFT IMAGE BELOW -->

    <TextView
        android:id="@+id/LEFT_TEXT"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="LEFT TEXT HERE"
        android:textColor="@color/Category_Title_Color"
        android:textSize="20sp" />

        <ImageView
            android:id="@+id/img_backicon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerHorizontal="true"
            android:layout_margin="5dp"
            android:layout_marginLeft="10dp"
            android:contentDescription="@string/img_des"
            android:src="@drawable/back" />
    </RelativeLayout>

When I tried to do that, the text kept overlapping the images or not aligning properly.

Any help would be appreciated

****UPDATE**** the answer from cricket_007 seemed to work fine for me... here is the finished code if anyone needs to see it

<RelativeLayout
    android:id="@+id/headersection"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:background="@color/colorbuttonbar" >


    <TextView
        android:id="@+id/img_play"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:gravity="center_vertical"
        android:layout_margin="5dp"
        android:layout_marginRight="10dp"
        android:text="MUSIC - "
        android:textStyle="bold"
        android:textColor="@color/Notification_Bar_Title_Color"
        android:drawableRight="@drawable/play" />


    <TextView
        android:id="@+id/img_backicon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerHorizontal="true"
        android:gravity="center_vertical"
        android:layout_margin="5dp"
        android:layout_marginLeft="10dp"
        android:text=" - GO BACK"
        android:textStyle="bold"
        android:textColor="@color/Notification_Bar_Title_Color"
        android:drawableLeft="@drawable/back" />






</RelativeLayout>

Upvotes: 0

Views: 718

Answers (2)

OneCricketeer
OneCricketeer

Reputation: 191738

You probably don't need an ImageView at all.

TextView has two properties for left and right images:

android:drawableLeft

android:drawableRight

For example, 

<TextView
        android:id="@+id/img_play"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:layout_marginRight="10dp"
        android:text="MUSIC - "
        android:drawableRight="@drawable/play" /> <!-- See here -->

Upvotes: 5

Richard R
Richard R

Reputation: 967

Have you tried using android:layout_toRightOf and android:layout_toLeftOf as well as android:layout_toStartOf and android:layout_toEndOf:

<RelativeLayout 
    android:id="@+id/headersection"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:background="#181b1c">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:id="@+id/textView" />

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:id="@+id/textView2" />

    <ImageView
        android:id="@+id/img_backicon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/back"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/textView"
        android:layout_toEndOf="@+id/textView" />

    <ImageView
        android:id="@+id/img_play"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/play"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/textView2"
        android:layout_toStartOf="@+id/textView2" />

</RelativeLayout>

Upvotes: 0

Related Questions