Hard to work with multiple layouts in android xml

Question

Im trying to work with google android game sample, But the game has a single activity and single xml layout.

The XML has many linearlayout, Each represents a screen in the game. For example, If i click the "Play" Button, The activity will disable all layouts for visibility and enable the "Play screen" layout for visibility.

I cant seperate the main activity because its cause me many problems in my project (Sharing viarables with activities). So i think that i need to stay with one activity and one xml.

The main problem is that in android studio i cant see the xml design. The bottom line I want to design my game easily with android studio and continue use my sample project.

Any idea the make my life easier?

Thanks a lot!

The xml file:

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <!-- SIGN-IN SCREEN -->
    <LinearLayout android:id="@+id/screen_sign_in" style="@style/LLScreen">
        <TextView style="@style/GameTitle" />
        <TextView style="@style/GameBlurb" />

        <Button android:id="@+id/button_single_player"
            style="@style/MainScreenButton"
            android:text="@string/single_player" />
        <com.google.android.gms.common.SignInButton android:id="@+id/button_sign_in"
            style="@style/SignInButton" />
    </LinearLayout>

    <!-- MAIN SCREEN -->
    <LinearLayout android:id="@+id/screen_main" style="@style/LLScreen">
        <TextView style="@style/GameTitle" />
        <Button android:id="@+id/button_single_player_2"
            style="@style/MainScreenButton"
            android:text="@string/single_player" />
        <TextView style="@style/MainScreenButtonBlurb"
            android:text="@string/single_player_explanation" />
        <Button android:id="@+id/button_quick_game"
            style="@style/MainScreenButton"
            android:text="@string/quick_game" />
        <TextView style="@style/MainScreenButtonBlurb"
            android:text="@string/quick_game_explanation" />
        <Button android:id="@+id/button_invite_players"
            style="@style/MainScreenButton"
            android:text="@string/invite_players" />
        <TextView style="@style/MainScreenButtonBlurb"
            android:text="@string/invite_players_explanation" />
        <Button android:id="@+id/button_see_invitations"
            style="@style/MainScreenButton"
            android:text="@string/see_invitations" />
        <TextView style="@style/MainScreenButtonBlurb"
            android:text="@string/see_invitations_explanation" />
        <Button android:id="@+id/button_sign_out"
            style="@style/SignOutButton"
            android:text="@string/sign_out" />
    </LinearLayout>

    <!-- INVITATION POPUP -->
    <LinearLayout android:id="@+id/invitation_popup" style="@style/InvPopup">
        <TextView android:id="@+id/incoming_invitation_text" style="@style/InvPopupText" />
        <Button android:id="@+id/button_accept_popup_invitation"
            style="@style/InvPopupButton"
            android:text="@string/accept_popup_invite" />
    </LinearLayout>

    <!-- "PLEASE WAIT" SCREEN -->
    <LinearLayout android:id="@+id/screen_wait" style="@style/LLScreen">
        <TextView style="@style/Blurb" android:text="@string/please_wait" />
    </LinearLayout>

    <!-- GAMEPLAY SCREEN -->
    <LinearLayout android:id="@+id/screen_game" style="@style/LLScreen">
        <TextView android:id="@+id/instructions"
            style="@style/Instructions" android:text="@string/instructions" />
        <TextView android:id="@+id/my_score" style="@style/ScoreDisplay" />
        <Button android:id="@+id/button_click_me"
                style="@style/GameButton"
                android:text="@string/click_me"
                android:layout_marginBottom="20dp" />
        <TextView android:id="@+id/countdown" style="@style/FigureLabel" />

        <LinearLayout style="@style/ScoresBox">
            <TextView android:id="@+id/score0" style="@style/ScoreText" />
            <TextView android:id="@+id/score1" style="@style/ScoreText" />
            <TextView android:id="@+id/score2" style="@style/ScoreText" />
            <TextView android:id="@+id/score3" style="@style/ScoreText" />
        </LinearLayout>
    </LinearLayout>
</FrameLayout>

EDIT- I solved the problem, I just needed to add android:visibility="visible" to the layout. Thanks.

Answer 1

I solved the problem, I just needed to add android:visibility="visible" to the layout. Thanks.

Answer 2

You put your root layout FrameLayout in comment that's why you don't see anything.

Remove <!-- in second line.

Answer 3

To avoid nested Layouts, you should use ConstraintLayout instead. It allows you to align each View with rules based on other Views and even based on the parent layout.

But to use it, you have to add the dependency in your gradle.build file:

dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
}

And the Maven Repository in your global gradle file:

repositories {
    maven {
        url 'https://maven.google.com'
    }
}

Here is a sample:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/imageView6"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_marginLeft="16dp" />

<TextView
    android:text="TextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/textView33"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toRightOf="@+id/imageView6"
    android:layout_marginLeft="16dp" />

<TextView
    android:text="TextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/textView34"
    app:layout_constraintRight_toRightOf="@+id/textView33"
    android:layout_marginTop="8dp"
    app:layout_constraintTop_toBottomOf="@+id/textView33" />

To learn more about it :

https://developer.android.com/training/constraint-layout/index.html

https://codelabs.developers.google.com/codelabs/constraint-layout/index.html