CODEWITHSUNDEEP
androidandroid-layout
user1256477
user1256477

Reputation: 11201

align images left and right

I have a listView, the list_item has a ImageButton at left, a TextView centered and a ImageButton at right:

<?xml version="1.0" encoding="utf-8"?>    
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="vertical"
      android:gravity="center">
      <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center">
        <ImageButton android:id="@+id/parkingState" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
           android:layout_marginTop="4dip" 
           android:layout_marginRight="4dip"
           android:layout_marginLeft="4dip"
           android:layout_gravity="center"
           android:background="@null"/>
        <LinearLayout 
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content" 
            android:orientation="vertical"
            android:gravity="center"> 
            <TextView android:id="@+id/LblSubTitle"
                android:gravity="center_horizontal"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:textStyle="normal"
                android:textColor="#444444"
                android:textSize="12sp" /> 
        </LinearLayout>
        <ImageButton android:id="@+id/parking_details" 
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:gravity="center"
              android:layout_marginRight="4dip"
              android:layout_marginLeft="4dip"
              android:layout_marginTop="4dip"
              android:layout_marginBottom="4dip"
              android:background="@null"/>
      </LinearLayout>
</LinearLayout>

The result is:

enter image description here

But I would like the images at left and a right. How can I get this effect?

Upvotes: 0

Views: 186

Answers (7)

Houcine
Houcine

Reputation: 24181

use RelativeLayout instead of LinearLayout , and then you can use the layout tags :

android:layout_alignParentLeft = "true" and android:layout_alignParentRight = "true"

NOTE : to center the TextView use : android:layout_centerHorizontal="true" 

<RelativeLayout bla bla 
 bla bla >
<ImageView bla bla 
   bla bla 
   android:layout_alignParentLeft="true" />

<TextView bla bla 
   bla bla 
   android:layout_centerHorizontal="true" />

<ImageView bla bla 
   bla bla 
   android:layout_alignParentRight="true" />
</RelativeLayout>

Upvotes: 1

Mahdi Giveie
Mahdi Giveie

Reputation: 640

put this into ImageButtun tag :

android:layout_alignParentLeft="true"

android:layout_alignParentRight="true"

Upvotes: 1

Muppidi Nikhil
Muppidi Nikhil

Reputation: 106

Add linear layout as shown below...

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

<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content">
    <ImageButton android:id="@+id/parkingState" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dip" 
        android:layout_marginRight="4dip"
        android:layout_marginLeft="4dip"
        android:layout_gravity="center"
        android:background="@drawable/ic_launcher"/>


    <LinearLayout 
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content" 
        android:orientation="vertical"
        android:gravity="center"
        > 
        <TextView android:id="@+id/LblSubTitle"
            android:gravity="center_horizontal"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textStyle="normal"
            android:text="hhhh"
            android:textColor="#444444"
            android:textSize="12sp" /> 

    </LinearLayout>

    <ImageButton android:id="@+id/parking_details" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginRight="4dip"
        android:layout_marginLeft="4dip"
        android:layout_marginTop="4dip"
        android:layout_marginBottom="4dip"
        android:background="@drawable/ic_launcher"/>
</LinearLayout>

</LinearLayout>

Upvotes: 0

Siddharth Lele
Siddharth Lele

Reputation: 27748

The parent LinerLayout has the android:layout_width="wrap_content". Change it to fill_parent.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical" >
    ....
    ....
    ....

</LinearLayout>

Upvotes: 0

Venkatesh S
Venkatesh S

Reputation: 5492

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

    <ImageButton
        android:id="@+id/parkingState"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_gravity="center"
        android:layout_marginLeft="4dip"
        android:layout_marginRight="4dip"
        android:layout_marginTop="4dip"
        android:background="@null"
        android:contentDescription="@string/app_name"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/LblSubTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/parking_details"
        android:layout_toRightOf="@+id/parkingState"
        android:gravity="center_vertical"
        android:singleLine="false"
        android:text="write something here to display in the text"
        android:textColor="#444444"
        android:textSize="12sp"
        android:textStyle="normal" />

    <ImageButton
        android:id="@+id/parking_details"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="4dip"
        android:layout_marginLeft="4dip"
        android:layout_marginRight="4dip"
        android:layout_marginTop="4dip"
        android:background="@null"
        android:contentDescription="@string/app_name"
        android:gravity="center"
        android:src="@drawable/ic_launcher" />

</RelativeLayout>

Try the above code which you want friend

Upvotes: 1

krishna
krishna

Reputation: 998

Write "fill_parent" in your first linearlayout like this : 

<?xml version="1.0" encoding="utf-8"?>    
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">

Upvotes: 1

Anukool
Anukool

Reputation: 5401

Use RelativeLayout and use- 

 <ImageButton android:id="@+id/parkingState" 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="4dip" 
    android:layout_marginRight="4dip"
    android:layout_marginLeft="4dip"
    android:layout_gravity="center"
    android:background="@null"
    android:layout_alignParentLeft="true"/>

likewise alignParentRight=true for the other imagebutton.

Upvotes: 1

Related Questions