Why are the XML Elements not visible on my emulator in android studio?

Question

My problem is that the controls (checkboxes, buttons etc) which I have placed are not visible on my emulator. Below is my XML file:

 <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<Button
    android:id="@+id/btn1"
    android:layout_width="match_parent"
    android:layout_height="52dp"
    android:text="@string/btn1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="parent"
    tools:ignore="MissingConstraints"
    tools:layout_editor_absoluteY="0dp" />

<Button
    android:id="@+id/btn2"
    android:layout_width="match_parent"
    android:layout_height="77dp"
    android:text="@string/btn2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    tools:ignore="MissingConstraints"
    tools:layout_editor_absoluteY="68dp" />

<fragment
    android:id="@+id/fragment"
    android:name="com.example.mypc.fragmentactivity.Fragment1"
    android:layout_width="222dp"
    android:layout_height="285dp"
    android:layout_marginBottom="40dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    tools:ignore="MissingConstraints" />

Here is my XML (design view):

Here is my emulator window:

Is there is something wrong in my XML file?

Please provide me solution for this. How should I handle this?

Answer 1

Simply use LinearLayout instead of ConstraintLayout. Also provide orientation vertical to that LinearLayout. It will helps you

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 tools:context=".MainActivity">

 <Button
    android:id="@+id/btn1"
    android:layout_width="match_parent"
    android:layout_height="52dp"
    android:text="@string/btn1" />

<Button
    android:id="@+id/btn2"
    android:layout_width="match_parent"
    android:layout_height="77dp"
    android:text="@string/btn2" />

<fragment
    android:id="@+id/fragment"
    android:name="com.example.mypc.fragmentactivity.Fragment1"
    android:layout_width="222dp"
    android:layout_height="285dp"
    android:layout_marginBottom="40dp" />
</LinearLayout>

Answer 2

You are using ConstraintLayout without relative positioning.

According to developer site:

Relative positioning is one of the basic building blocks of creating layouts in ConstraintLayout. Those constraints allow you to position a given widget relative to other. You can constrain a widget on the horizontal and vertical axis:

Horizontal Axis: left, right, start and end sides

Vertical Axis: top, bottom sides, and text baseline

Here is the solution which may help you:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btn1"
        android:layout_width="match_parent"
        android:layout_height="52dp"
        android:text="@string/btn1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="@id/btn2"/>

    <Button
        android:id="@+id/btn2"
        android:layout_width="match_parent"
        android:layout_height="77dp"
        android:text="@string/btn2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/btn1"
        android:layout_marginTop="10dp"/>


</android.support.constraint.ConstraintLayout>

I have used relative positioning to solve the problem. If you are using constraint layout then without relative positioning your views will get overlap with each other.

Answer 3

In your code your elements are overflowing each other at one position that is why they are not visible.

My suggestion is do not constraint Layout at initial stage of learning android. Use Linear Layout in place of constraint Layout.

Since in constraint Layout Layout Editor uses constraints to determine the position of a UI element within the layout. You have to give many constraint XML attributes like.

app:layout_editor_absoluteX="73dp"
        app:layout_editor_absoluteY="176dp"
        app:layout_constraintLeft_creator="1"
        app:layout_constraintTop_creator="1"
        app:layout_constraintRight_creator="1"

to specify the position of elements in layout.

Use Linear Layout in place of Constraint Layout and give

 orientation:"vetical"

to view all your elements.

Answer 4

The layout_editor attributes are only used for the editor preview and have no effect on the final layouts. You should position your elements using the ConstraintLayout specific attributes.

It's used to just for preview purpose.

tools:layout_editor_absoluteY="68dp"

Answer 5

Because you didn't align properly the second button. it seems like second button overlap first one.

try this one

<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activites.HomeActivity"
    android:layout_margin="6dp">

    <Button
        android:id="@+id/btnOne"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Button One"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btnTwo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Button Two"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btnOne" />

    <fragment
        android:id="@+id/fragment"
        android:layout_width="222dp"
        android:layout_height="285dp"
        android:layout_marginBottom="40dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btnTwo"
        tools:ignore="MissingConstraints" />

</android.support.constraint.ConstraintLayout>

output would be like this