Search code examples
androidandroid-layoutandroid-linearlayoutandroid-relativelayout

How to move the three images and text towards right in layout?


I have an icon with images at left followed by text.

And towards right, there should be three images and three text below the three images. I done everything but problem is i couldn't move the three images and text towards right side.

Though I gave in LinearLayout (for reference: android:id="@+id/right_side_layout") android:gravity="right|end" it's not moving towards right side.

Here is layout and screenshot.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:gravity="center"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="12dp"
            android:layout_weight="1"
            android:src="@drawable/ic_mark" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="12dp"
            android:layout_weight="1"
            android:src="@drawable/ic_profile" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:text="@string/route_plan_default_number"
                android:textColor="@color/black"
                android:textSize="@dimen/text_size_very_small" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:text="@string/route_plan_default_name"
                android:textColor="@color/dark_green"
                android:textSize="@dimen/text_size_very_small" />

        </LinearLayout>
  <!--
        This layout should be right side. Though I given  android:gravity="right|end" it's not moving right.
    -->
        <LinearLayout
            android:id="@+id/right_side_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="28dp"
            android:layout_weight="1"
            android:gravity="right|end"
            android:orientation="horizontal">

            <RelativeLayout
                android:id="@+id/relative"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

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

                <TextView
                    android:id="@+id/textLabel"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/sell_in_red"
                    android:layout_centerInParent="true"
                    android:paddingTop="2dp"
                    android:text="In"
                    android:textSize="@dimen/text_size_very_small"
                    android:textStyle="bold" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="9dp"
                android:layout_marginRight="9dp">

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

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/sell_in_yellow"
                    android:layout_centerInParent="true"
                    android:paddingTop="2dp"
                    android:text="Out"
                    android:textSize="@dimen/text_size_very_small"
                    android:textStyle="bold" />
            </RelativeLayout>

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

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

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/growth_icon"
                    android:layout_centerInParent="true"
                    android:gravity="center"
                    android:paddingTop="2dp"
                    android:text="growth"
                    android:textSize="@dimen/text_size_very_small"
                    android:textStyle="bold" />
            </RelativeLayout>
        </LinearLayout>


    </LinearLayout>

</LinearLayout>

You can see the below image where three circular icons are not moving towards right side.

enter image description here


Solution

  • Change width of nested linear layout (2nd from top) to match_parent.

     <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:gravity="center"
            android:orientation="horizontal">