CODEWITHSUNDEEP
androiduser-interfacelandscape
modabeckham
modabeckham

Reputation: 247

switching between landscape and portrait mode makes some UI problems

I have used 3 text views as footers in my application screen. When I used it as portrait then it fits the screen perfectly as shown below,

portrait Image

enter image description here

But when I turn it to landscape then it makes a huge gap between 2 text views (I and B).

landscape Image

enter image description here

What is the reason for that and how can I overcome it? Any help will be highly appreciated.

.xml code used for this

<com.gamma.p.menu.QuickReturnListView
    android:id="@android:id/list"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<TextView
    android:id="@+id/footerB"
    android:layout_width="106.5dip"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:background="@drawable/textview_background"
    android:gravity="center"
    android:paddingBottom="8dip"
    android:paddingLeft="16dip"
    android:paddingRight="16dip"
    android:paddingTop="8dip"
    android:text="@string/footer3"
    android:textColor="@drawable/textview_font"
    android:textSize="12sp" />

<TextView
    android:id="@+id/footerI"
    android:layout_width="107dip"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_toRightOf="@+id/footerTop"
    android:background="@drawable/textview_background"
    android:gravity="center"
    android:paddingBottom="8dip"
    android:paddingLeft="16dip"
    android:paddingRight="16dip"
    android:paddingTop="8dip"
    android:text="@string/footer2"
    android:textColor="@drawable/textview_font"
    android:textSize="12sp" />

<TextView
    android:id="@+id/footerT"
    android:layout_width="106dip"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:background="@drawable/textview_background"
    android:gravity="center"
    android:paddingBottom="8dip"
    android:paddingLeft="16dip"
    android:paddingRight="16dip"
    android:paddingTop="8dip"
    android:text="@string/footer1"
    android:textColor="@drawable/textview_font"
    android:textSize="12sp" />

UPDATED I have changed my xml as shown below,

<LinearLayout 
        android:id="@+id/shareLILayout"
        android:layout_alignParentBottom="true"
        android:weightSum="3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:orientation="horizontal" >

    <lk.gamma.p.menu.QuickReturnListView
        android:id="@android:id/list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/footerB"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
         android:layout_weight="1"
        android:layout_alignParentRight="true"
        android:background="@drawable/textview_background"
        android:gravity="center"
        android:paddingBottom="8dip"
        android:paddingLeft="16dip"
        android:paddingRight="16dip"
        android:paddingTop="8dip"
        android:text="@string/footer3"
        android:textColor="@drawable/textview_font"
        android:textSize="12sp" />
    <!-- android:background="#D8000000" -->

    <TextView
        android:id="@+id/footerI"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_toRightOf="@+id/footerTop"
        android:background="@drawable/textview_background"
        android:gravity="center"
        android:paddingBottom="8dip"
        android:paddingLeft="16dip"
         android:layout_weight="1"
        android:paddingRight="16dip"
        android:paddingTop="8dip"
        android:text="@string/footer2"
        android:textColor="@drawable/textview_font"
        android:textSize="12sp" />

    <TextView
        android:id="@+id/footerT"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:background="@drawable/textview_background"
        android:gravity="center"
        android:paddingBottom="8dip"
         android:layout_weight="1"
        android:paddingLeft="16dip"
        android:paddingRight="16dip"
        android:paddingTop="8dip"
        android:text="@string/footer1"
        android:textColor="@drawable/textview_font"
        android:textSize="12sp" />
 </LinearLayout>

Now it looks like this,

enter image description here

Upvotes: 1

Views: 353

Answers (5)

John David
John David

Reputation: 334

Change the android:layout_width="match_parent" into android:layout_width="0dp" inside <lk.gamma.pizzakraft.menu.QuickReturnListView. Then it will work for you.

Complete code

<LinearLayout
        android:id="@+id/shareLILayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal" >

        <com.gamma.p.menu.QuickReturnListView
            android:id="@android:id/list"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />

        <LinearLayout
            android:id="@+id/shareLILayout1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:orientation="horizontal"
            android:weightSum="3" >

            <TextView
                android:id="@+id/footerB"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:layout_weight="1"
                android:background="@drawable/textview_background"
                android:gravity="center"
                android:paddingBottom="8dip"
                android:paddingLeft="16dip"
                android:paddingRight="16dip"
                android:paddingTop="8dip"
                android:text="@string/footer3"
                android:textColor="@drawable/textview_font"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/footerI"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_toRightOf="@+id/footerTop"
                android:layout_weight="1"
                android:background="@drawable/textview_background"
                android:gravity="center"
                android:paddingBottom="8dip"
                android:paddingLeft="16dip"
                android:paddingRight="16dip"
                android:paddingTop="8dip"
                android:text="@string/footer2"
                android:textColor="@drawable/textview_font"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/footerT"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentLeft="true"
                android:layout_weight="1"
                android:background="@drawable/textview_background"
                android:gravity="center"
                android:paddingBottom="8dip"
                android:paddingLeft="16dip"
                android:paddingRight="16dip"
                android:paddingTop="8dip"
                android:text="@string/footer1"
                android:textColor="@drawable/textview_font"
                android:textSize="12sp" />
        </LinearLayout>
    </LinearLayout>

Upvotes: 1

surhidamatya
surhidamatya

Reputation: 2609

Please do as follow if you are using Linearlayout. Let me know if it helps you

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

<TextView
android:id="@+id/footerB"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight= "1"
android:background="@drawable/textview_background"
android:gravity="center"
android:paddingBottom="8dip"
android:paddingLeft="16dip"
android:paddingRight="16dip"
android:paddingTop="8dip"
android:text="@string/footer3"
android:textColor="@drawable/textview_font"
android:textSize="12sp" />

<TextView
android:id="@+id/footerI"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight= "1"
android:background="@drawable/textview_background"
android:gravity="center"
android:paddingBottom="8dip"
android:paddingLeft="16dip"
android:paddingRight="16dip"
android:paddingTop="8dip"
android:text="@string/footer2"
android:textColor="@drawable/textview_font"
android:textSize="12sp" />

<TextView
android:id="@+id/footerT"
android:layout_width="0dp"
android:layout_weight= "1"
android:layout_height="wrap_content"
android:background="@drawable/textview_background"
android:gravity="center"
android:paddingBottom="8dip"
android:paddingLeft="16dip"
android:paddingRight="16dip"
android:paddingTop="8dip"
android:text="@string/footer1"
android:textColor="@drawable/textview_font"
android:textSize="12sp" />
</LinearLayout>

If you need to use Relativelayout please use "wrap_content" intead of giving custom width

Upvotes: 0

giorashc
giorashc

Reputation: 13713

You are using fixed width values instead of letting the views to spread uniformly accross the desired screen space.

Instead of using widths use the same weight attribute for your footer views :

android:id="@+id/footerT"
android:layout_width="0"
android:layout_height="wrap_content"
android:layout_weight="1"

and do the same with the other footer views

UPDATE:

You need to wrap your views in a LinearLayout rather than RelativeLayout (as the latter does not respect the weight attribute)

Upvotes: 1

Anuj
Anuj

Reputation: 367

Use Linear Layout with orientation as horizontal and then apply weights to each TextViews

<LinerLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
orientation="horizontal">

<TextView
android:id="@+id/footerB"
android:layout_width="0dp"
android:layout_weight="1"
... 
/>

</LinearLayout>

Upvotes: 1

bwegs
bwegs

Reputation: 3767

Your problem is that you are setting a specific width of your text boxes. When the orientation changes this does not allow it to adapt to the new screen size. Instead try setting the layout_width of each of your text boxes to 0dp and like @anuj said make use of the layout_weight attribute by setting it to 1.

Like so:

<TextView
android:id="@+id/footerB"
android:layout_width="0dp"
android:layout_weight="1"
... 
/>

Upvotes: 0

Related Questions