Question

I’m trying to design something like this for tablet devices

-640×480 area (left bound)——-flexible empty width——–control area(right bound)-

The flexible width is depending on the Tablet size bigger or smaller.
The Scrollpanes are for debugging on mobile devices only.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scrollView11"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <HorizontalScrollView
        android:id="@+id/scrollView12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:id="@+id/ll1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#24476D" >

            <view
                android:id="@+id/dmi"
                android:layout_width="640dp"
                android:layout_height="480dp"
                android:layout_gravity="left"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="20dp"
                android:layout_weight="1"
                class="com.example.ecorailnet.DMIView"
                android:background="#8fc7ff" />

            <TextView
                android:id="@+id/empty_list_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="List view is empty"
                android:visibility="gone" />

            <view
                android:id="@+id/cpp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:layout_weight="1"
                class="com.example.ecorailnet.ControlPanel" />
        </LinearLayout>
    </HorizontalScrollView>
</ScrollView>

And finally the situation now and what it should look like.

NOW

AFTER

Thanks in advance

Greetings

Answer 1

If you just want something on the left and something other on the right of the display, use a RelativeLayout:

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

    <view
        android:id="@+id/dmi"
        android:layout_width="640dp"
        android:layout_height="480dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_gravity="left"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="20dp"
        class="com.example.ecorailnet.DMIView"
        android:background="#8fc7ff" />

    <view
        android:id="@+id/cpp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_gravity="right"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="20dp"
        class="com.example.ecorailnet.ControlPanel" />

</RelativeLayout>

The only problem you can get is that the whole thing doesn’t fit on a small screen. In that case the two views will overlap.