android layout issue for button and textview

Question

I want to create application UI as per image available below. Can anyone here please guide me how can I achieve this?

Image Source

Here data like 123 MB, 456MB are dynamic and will keep changing from application itself. So Ideally there should be 2 buttons and inside particular button we will need 2 images to show upload/download and 2 textview required to display bandwidth count.

But I could not figure that how this could be arrange together?

Regards, Rajesh

Answer 1

You can use multiple nested LinearLayouts. Something like this:

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

    <TextView android:text="MOBILE" 
        android:layout_height="wrap_content"
        android:layout_width="0"
        android:layout_weight="0.25" />

    <LinearLayout android:orientation="vertical"
        android:layout_height="wrap_content"
        android:layout_width="0"
        android:layout_weight="0.25">

        <TextView android:text="123 MB"
            android:drawableLeft="@drawable/arrow_down" 
            android:layout_height="wrap_content"
            android:layout_width="fill_parent" />

        <TextView android:text="456 MB"
            android:drawableLeft="@drawable/arrow_up" 
            android:layout_height="wrap_content"
            android:layout_width="fill_parent" />

    </LinearLayout>

    <TextView android:text="WIFI" 
        android:layout_height="wrap_content"
        android:layout_width="0"
        android:layout_weight="0.25" />

    <LinearLayout android:orientation="vertical"
        android:layout_height="wrap_content"
        android:layout_width="0"
        android:layout_weight="0.25">

        <TextView android:text="123 MB"
            android:drawableLeft="@drawable/arrow_down" 
            android:layout_height="wrap_content"
            android:layout_width="fill_parent" />

        <TextView android:text="456 MB"
            android:drawableLeft="@drawable/arrow_up" 
            android:layout_height="wrap_content"
            android:layout_width="fill_parent" />

    </LinearLayout>


</LinearLayout>

EDIT: Any of the LinearLayout can be set to clickable and with onClickListener you can register any action to it.