UI Layout - Challenge: Add a Previous Button

[KG1414]

Hi everyone,

Does anyone know how to make the UI layout show the previous and next button directly underneath the true and false button?

[BrightenTompkins]

TL;DR: Put them in another LinearLayout widget below the widget with the true and false buttons.

Remember that your widget attributes defined in the activity_quiz.xml file define an orientation for the root element of your app view hierarchy, the outermost LinearLayout widget which is the parent of your set of buttons, and that this orientation is set to vertical. A vertical orientation means that your widgets will fall from top to bottom in a display relative to their place in your XML code.

   <LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:gravity="center"
       android:orientation="vertical">

Note that your true_button and false_button (in your case likely your previous_button and next_button as well) View subclasses are the children of a LinearLayout as

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        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>

So to make your previous_button and next_button subclasses fall below the true- and false-containing LinearLayout, simply group them into another, lower LinearLayout widget such as in

   <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/previous_button" />
        <ImageButton
            android:id="@+id/next_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/arrow_right"
            android:contentDescription="@string/next_button" />
    
    </LinearLayout>

[alexyurichk]

the text on the button should stay in my version of the app

activity_main.xml

    <Button
        android:id="@+id/prev_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/arrow_left"
        android:drawablePadding="4dp"
        android:text="@string/prev_button" />

    <Button
        android:id="@+id/next_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableRight="@drawable/arrow_right"
        android:drawablePadding="4dp"
        android:text="@string/next_button" />

</LinearLayout>

MainActivity.java:
public class MainActivity extends AppCompatActivity {

private Button mTrueButton;
private Button mFalseButton;

private Button mNextButton;
private Button mPrevButton;
private TextView mQuestionTextView;

…

mNextButton = (Button) findViewById(R.id.next_button);
mNextButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mCurrentIndex = (mCurrentIndex + 1) % mQuestionBank.length;
updateQuestion();
}
});

    mPrevButton = (Button) findViewById(R.id.prev_button);
    mPrevButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mCurrentIndex = (mCurrentIndex - 1) % mQuestionBank.length; // there is an error when referring to the back button on the first question. how to cure it?
            updateQuestion();
        }
    });

[Kichu]