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

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?

5 Answers
5

You are using constraint layout but without using 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 another one. 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 my 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 the relative positioning to solve your problem. If you are using constraint layout then without relative positioning your views will get overlap with each other.

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

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>


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.

layout_editor

editor preview

ConstraintLayout

It's used to just for preview purpose.

tools:layout_editor_absoluteY="68dp"


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.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.