Landscape layout, widgets shift to left top corner


#1

Some basic mistake I have made in activity_quiz.xml for layout-land, I cannot seem to find. All widgets in landscape shift to left top corner, writing over each other. I have included my activity_quiz.xml for layout-land resource below.

<TextView
    android:id="@+id/question_text_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:padding="24dp" 
    />
    
<LinearLayout
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:gravity="center_vertical|center_horizontal"
  android:orientation="horizontal" >
  
  <Button
      android:id="@+id/true_button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/true_button"
      />
  
  <Button
      android:id="@+id/false_button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/false_button"
      />

</LinearLayout>

<LinearLayout
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:gravity="bottom"
  android:orientation="horizontal" >
  
  <ImageButton
      android:id="@+id/prev_button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:gravity="bottom|left"
      android:src="@drawable/arrow_left"
      android:contentDescription="@string/prev_button"
      />
    
  <ImageButton
	  android:id="@+id/next_button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:gravity="bottom|right"
      android:src="@drawable/arrow_right"
      android:contentDescription="@string/next_button"
      />
    
</LinearLayout>

#2

Hint: android:layout_gravity does not mean the same thing as android:gravity.


#3

Thank you, that helped :slight_smile:

If I may ask one more, so now the two arrows, left and right were squished in the left corner. I guessed that they are enclosed in LinearLayout and it is fitting them close. So I just removed the LinearLayout and left the Prev and Next buttons on their own at the top level as TextView and that worked.

Is that the only way, or there is a different recommended method?


#4

There are many ways of getting from A to B when you’re writing layouts. Your method is as good as any other.


#5

I found this chart, it might help:


#6

I could find no other way to get the Prev/Next buttons below the True/False buttons in the landscape mode, other than setting the Prev/Next buttons in tags and setting the layout_gravity in LinearLayout to “bottom|center_horizontal” like this:
(Only thing is they are far below the True/False buttons, but since FrameLayout doesn’t stack like LinearLayout, I could find no other way)

[code]

<TextView 
    android:id="@+id/question_text_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:padding="24dp" />        

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical|center_horizontal"
    android:orientation="horizontal" >
    
    <Button
        android:id="@+id/true_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/true_button" />
    
    <Button
        android:id="@+id/false_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/false_button" />
    
</LinearLayout>
    
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|center_horizontal"
    android:orientation="horizontal" >
    
    <ImageButton
    android:id="@+id/prev_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/arrow_left"
    android:contentDescription="@string/move_back"
     />
    
	<ImageButton
    android:id="@+id/next_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/arrow_right"
    android:contentDescription="@string/move_forward"
    />

</LinearLayout>

[/code]


#7

I have set the previous and next “ImageButton”'s just below the “True” and “False” buttons, in the landscape layout, in the following way:

[code]

<TextView
    android:id="@+id/question_text_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:padding="24dp" />

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|center_horizontal"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/true_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/true_button" />

        <Button
            android:id="@+id/false_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/false_button" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|center_horizontal"
        android:orientation="horizontal" >

        <ImageButton
            android:id="@+id/previous_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/previous_button"
            android:src="@drawable/arrow_left" />

        <ImageButton
            android:id="@+id/next_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="@string/next_button"
            android:src="@drawable/arrow_right" />
    </LinearLayout>
    
</LinearLayout>

[/code]


#8

Thanks GenarCodina…

it took me forever to discover (in other forums) that we really should not use FrameLayout, even though he wanted us to in the book! It is only for displaying one element, not several like we have. So I went back to LinearLayout and fiddled with layout_gravity and centering, and now it all looks great. I noticed in your code, you do not have the cheat button, don’t forget that one! :wink:

Here is my final code for the land/activity_quiz.xml file:

[code]

<TextView 
    android:id="@+id/question_text_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:padding="24dp" />        

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical" >
    
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|center_horizontal"
        android:orientation="horizontal" >
    
        <Button
            android:id="@+id/true_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/true_button" />
        
        <Button
            android:id="@+id/false_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/false_button" />
    
     </LinearLayout>

    <Button 
        android:id="@+id/cheat_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/cheat_button" />
</LinearLayout>
            
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >
    
    <ImageButton
    android:id="@+id/prev_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/arrow_left"
    android:contentDescription="@string/move_back"
     />
    
	<ImageButton
    android:id="@+id/next_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/arrow_right"
    android:contentDescription="@string/move_forward"
    />

</LinearLayout>

[/code]