Position children views relative to their parent view

Question

I need to implement a view that looks like this

The hard part is that the sizes and the font sizes of the textviews need to be adaptable to the width and height of the parent view. Here is what I have tried and the result is

The xml file:

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

<BuySellView
    android:id="@+id/tradeNow_layoutSell"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:background="@color/gray_light_light">

    <LinearLayout
        android:id="@+id/smallPart1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="top|right"
        android:orientation="horizontal">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center_vertical">

            <ImageView
                android:id="@+id/greenArrowSellImg"
                android:layout_width="10dp"
                android:layout_height="10dp"
                android:src="@drawable/green_arrow"
                android:visibility="invisible"
                tools:visibility="visible" />

            <ImageView
                android:id="@+id/redArrowSellImg"
                android:layout_width="10dp"
                android:layout_height="10dp"
                android:src="@drawable/red_arrow"
                android:visibility="invisible"
                tools:visibility="visible" />
        </RelativeLayout>

        <TextView
            android:id="@+id/smallPart1Txt"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="top|right"
            android:layout_gravity="center_vertical"
            android:maxLines="1"
            android:text="@string/misc_blank"
            android:textColor="@android:color/black"
            tools:text="10,015." />
    </LinearLayout>


    <TextView
        android:id="@+id/largePart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:maxLines="1"
        android:text="@string/misc_blank"
        android:textColor="@android:color/black"
        tools:text="46"
        android:gravity="center"
        tools:textColor="@color/red_sell" />


    <TextView
        android:id="@+id/smallPart2"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:maxLines="1"
        android:text="@string/misc_blank"
        android:textColor="@android:color/black"
        android:gravity="left|center_vertical"
        tools:text="8"
        tools:textColor="@color/red_sell" />


    <TextView
        android:id="@+id/trdLbl"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:background="@drawable/rounded_corner_sell"
        android:text="@string/CommonCapitalSell"
        android:textColor="@color/white" />


</BuySellView>

</LinearLayout>

The custom view:

public class BuySellView extends ViewGroup {

private final Rect mTmpChildRect = new Rect();

public BuySellView(Context context) {
    super(context);
}

public BuySellView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public BuySellView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    int width = getMeasuredWidth();
    int height = getMeasuredHeight();

    int t = 10;
    int b = 10 + height / 3 * 2;

    LinearLayout smallPart1 = (LinearLayout) findViewById(R.id.smallPart1);
    smallPart1.layout(0, height / 3, width / 2, b);
    smallPart1.setGravity(Gravity.RIGHT);
    TextView smallPart1Txt = (TextView) smallPart1.findViewById(R.id.smallPart1Txt);
    smallPart1Txt.setTextSize(height / 4 / 2);

    TextView largePart = (TextView) findViewById(R.id.largePart);
    largePart.setTextSize(height / 3);
    largePart.layout(width / 2, 10, b - t + width / 2, b);

    TextView smallPart2 = (TextView) findViewById(R.id.smallPart2);
    smallPart2.layout(b - t + width / 2, t, width, height / 2);
    smallPart2.setTextSize(height / 4 / 2);

    TextView tradeLbl = (TextView) findViewById(R.id.trdLbl);
    tradeLbl.layout(width / 2 - width / 3 / 2, height / 4 * 3 + 10, width / 2 + width / 3 / 2, height / 4 * 4 + 10);
    tradeLbl.setGravity(Gravity.CENTER);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    LinearLayout smallPart1 = (LinearLayout) findViewById(R.id.smallPart1);
    TextView largePart = (TextView) findViewById(R.id.largePart);
    TextView smallPart2 = (TextView) findViewById(R.id.smallPart2);
    TextView tradeLbl = (TextView) findViewById(R.id.trdLbl);

    smallPart1.measure(Math.max(smallPart1.getMeasuredWidth(), widthMeasureSpec / 8 * 3), heightMeasureSpec / 4);
    largePart.measure(heightMeasureSpec / 4 * 2, heightMeasureSpec / 4 * 2);
    smallPart2.measure(Math.max(smallPart2.getMeasuredWidth(), widthMeasureSpec / 8), smallPart2.getMeasuredHeight());
    tradeLbl.measure(widthMeasureSpec / 3, heightMeasureSpec / 4);

    setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);
}

@Override
public boolean shouldDelayChildPressedState() {
    return false;
}


}

Answer 1

try this XML:

   <RelativeLayout
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0.87"
            android:textSize="25sp"
            android:layout_alignBottom="@+id/large"
            android:paddingBottom="8dp"
            android:fontFamily="sans-serif-light"
            />
        <TextView
            android:id="@+id/large"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/small"
            android:text="46"
            android:textSize="58sp"
            android:textColor="#00DC00"
            android:fontFamily="sans-serif-light"

            />
        <TextView
            android:id="@+id/up"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="9"
            android:textSize="24sp"
            android:layout_alignTop="@+id/large"
            android:layout_toRightOf="@+id/large"
            android:textColor="#00DC00"
            android:fontFamily="sans-serif-light"

            />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:background="#FF4848"
            android:layout_below="@+id/large"
            android:layout_alignRight="@+id/large"
            android:text="Sell USD"
            android:padding="5dp"
            android:textColor="#fff"
            android:textSize="12sp"
            />
    </RelativeLayout>

You can change the textSize based on number of character or width of text via java code.