Buttons not showing in Android emulator on Android studio

Question

I am trying to make a like a user button navigation for my project by having buttons however whenever I run the android emulator my design of the buttons I have added isn't showing at all which is confusing as I don't know why it isn't showing at all, I have had a bit of experience with the android studio but I have never had this issue before where the screen is just blank. Here are the screenshots of my design and then also the design when I run the emulator.

Here is the text of the design

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentBottom="true"
    android:layout_marginStart="101dp"
    android:layout_marginLeft="101dp"
    android:layout_marginTop="213dp"
    android:layout_marginEnd="123dp"
    android:layout_marginRight="123dp"
    android:layout_marginBottom="470dp"
    android:text="@string/identify_the_car_make" />

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentBottom="true"
    android:layout_marginStart="147dp"
    android:layout_marginLeft="147dp"
    android:layout_marginTop="277dp"
    android:layout_marginEnd="176dp"
    android:layout_marginRight="176dp"
    android:layout_marginBottom="406dp"
    android:text="@string/hints" />

<Button
    android:id="@+id/button2"
    android:layout_width="204dp"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentBottom="true"
    android:layout_marginStart="89dp"
    android:layout_marginLeft="89dp"
    android:layout_marginTop="326dp"
    android:layout_marginEnd="118dp"
    android:layout_marginRight="118dp"
    android:layout_marginBottom="357dp"
    android:text="@string/identify_the_car_image" />

<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentBottom="true"
    android:layout_marginStart="121dp"
    android:layout_marginLeft="121dp"
    android:layout_marginTop="376dp"
    android:layout_marginEnd="149dp"
    android:layout_marginRight="149dp"
    android:layout_marginBottom="307dp"
    android:text="@string/advanced_level" />
</RelativeLayout>

Answer 1

This can be happen because of:

1. The button is off screen as @fjmarquez said. Because it staticly margin the value no matter what device your application will be installed. Margin 100dp for tablet will be looks smaller than phone, even phone with 5 inch screen will difference with another inch device.

2. You are forgot to add setContentView() .

I suggest to use ConstraintLayout for complex view, and use LinearLayour if your page quiet simple. For you case, you can use LinearLayour with center gravity instead.

<?xml version="1.0" encoding="utf-8"?>
<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">


    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/button2"
        android:layout_width="204dp"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

Answer 2

The elements are probably off screen, this can be caused by margins.

Try not to use margin start and margin left or margin end and margin right at the same time. Take a look at this to understand.

I recommend using constraint layout.

Answer 3

I suggest using constraint layout because relative layout is deprecated.

read the documentation about it at the following link