Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Aligning controls next to each other in relative layout

I have 2 image buttons and 2 textviews I want to position them in this order

textview1 - imagebutton1 - textview2 - imagebutton2

Can anyone here help me with this?

here is what I tried but it is not working properly

<TextView
       android:id="@+id/like_count"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="10dp"
        android:layout_below="@id/comments_list"
        android:textColor="@android:color/white"
        android:textSize="14sp" 
        android:text="10" />

      <ImageButton
        android:id="@+id/like_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_below="@id/comments_list"
        android:layout_toRightOf="@id/like_count"
        android:background="@android:color/transparent"
        android:src="@drawable/xml_like_button_selctor" />

      <TextView
       android:id="@+id/comment_count"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="10dp"
        android:layout_toRightOf="@id/like_button"
        android:textColor="@android:color/white"
        android:textSize="14sp"
        android:text="10"/> 

     <ImageButton
        android:id="@+id/comment_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_toRightOf="@id/comment_count"
        android:background="@android:color/transparent"
        android:src="@drawable/xml_comment_button_selector" />
like image 644
Badrul Avatar asked May 21 '14 10:05

Badrul


People also ask

How do you align an element in the center of a relative layout?

As you said yourself, put both elements inside a RelativeLayout. Then, set the "center_horizontal" property of both elements to true, and then set the "below" property of the green element to the id of the black element. The thing is that center_horizontal centers the elements relative to their parent.

Which layout allows us to display items on the screen relative to each other?

RelativeLayout : is a ViewGroup that displays child views in relative positions.

What are the features of relative layout?

RelativeLayout lets child views specify their position relative to the parent view or to each other (specified by ID). So you can align two elements by right border, or make one below another, centered in the screen, centered left, and so on.

What is relative layout with example?

Android RelativeLayout enables you to specify how child views are positioned relative to each other. The position of each view can be specified as relative to sibling elements or relative to the parent.


2 Answers

Please use the following Relative layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#EAEAEA" >

    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="text1"
        android:id="@+id/text1"
        />

    <ImageButton 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imgButton1"
        android:layout_toRightOf="@+id/text1"/>

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

    <ImageButton 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/text2"
        android:id="@+id/imgButton2"/>


</RelativeLayout>
like image 115
Prateek Avatar answered Nov 15 '22 21:11

Prateek


Try this..

You can use LinearLayout android:orientation="horizontal" and all child views android:layout_width="0dp" and android:layout_weight="1"

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

    <TextView
        android:id="@+id/like_count"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_weight="1"
        android:text="10"
        android:textColor="@android:color/white"
        android:textSize="14sp" />

    <ImageButton
        android:id="@+id/like_button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_weight="1"
        android:background="@android:color/transparent"
        android:src="@drawable/xml_like_button_selctor" />

    <TextView
        android:id="@+id/comment_count"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_marginTop="5dp"
        android:text="10"
        android:textColor="@android:color/white"
        android:textSize="14sp" />

    <ImageButton
        android:id="@+id/comment_icon"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_weight="1"
        android:background="@android:color/transparent"
        android:src="@drawable/xml_comment_button_selector" />

</LinearLayout>
like image 43
Hariharan Avatar answered Nov 15 '22 23:11

Hariharan