Skip to content
Advertisement

ConstraintLayout braking after displaying Android Studio

I am currently working on an android app, and I’m having an issue with displaying XML layout In Android Studio, everything looks fine, but in the VM it doesn’t look too good.

This is how it looks in Android Studio:

Screenshot here

And here is how it looks like when it’s displayed in VM:

Screenshot here

I should probably mention that it is supposed to be a pop up window

Here is XML code:

<androidx.constraintlayout.widget.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="350dp"
        android:layout_height="265dp"
        android:background="@drawable/rounded_corners_grey"
        android:padding="20dp"
        >

    <android.widget.Button
            android:text="Cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/Cancel"
            android:background="@android:color/transparent"
            android:textColor="@color/white"
            android:outlineProvider="none"
            app:layout_constraintTop_toBottomOf="@+id/TimerValluesBackground"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginTop="48dp"
            android:layout_marginStart="56dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintVertical_bias="0.0" />

    <android.widget.Button
            android:text="Set"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/SaveTimer"
            android:background="@drawable/rounded_corners_dark"
            android:textColor="@color/white"
            app:layout_constraintBottom_toBottomOf="@+id/Cancel"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="56dp"
            app:layout_constraintTop_toTopOf="@+id/Cancel"
            app:layout_constraintVertical_bias="0.0" />

    <View
            android:layout_width="300dp"
            android:layout_height="100dp"
            android:id="@+id/TimerValluesBackground"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginTop="24dp"
            android:clickable="false"
            android:background="@drawable/rounded_corners_dark"
            tools:ignore="MissingConstraints"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.32" />

    <TextView
            android:text="0 h"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/hourValue"
            android:textSize="22dp"
            android:textColor="#fff"
            app:layout_constraintTop_toTopOf="@+id/TimerValluesBackground"
            app:layout_constraintStart_toStartOf="@+id/TimerValluesBackground"
            app:layout_constraintBottom_toBottomOf="@+id/TimerValluesBackground"
            android:layout_marginStart="32dp"
            app:layout_constraintVertical_bias="0.514" />

    <TextView
            android:text="0 min"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/minuteValue"
            android:textSize="22dp"
            android:textColor="#fff"
            app:layout_constraintTop_toTopOf="@+id/TimerValluesBackground"
            app:layout_constraintStart_toEndOf="@+id/hourValue"
            app:layout_constraintEnd_toStartOf="@+id/secondValue"
            app:layout_constraintBottom_toBottomOf="@+id/TimerValluesBackground" />

    <TextView
            android:text="0 sec"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/secondValue"
            android:textSize="22dp"
            android:textColor="#fff"
            tools:layout_editor_absoluteX="231dp"
            app:layout_constraintTop_toTopOf="@+id/TimerValluesBackground"
            app:layout_constraintBottom_toBottomOf="@+id/TimerValluesBackground"
            tools:ignore="MissingConstraints"
            app:layout_constraintVertical_bias="0.514" />


</androidx.constraintlayout.widget.ConstraintLayout>

Here is code from the Main Activity:

import androidx.annotation.RequiresApi;
import androidx.appcompat.app.AppCompatActivity;

import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.graphics.drawable.TransitionDrawable;
import android.os.AsyncTask;
import android.os.Build;
import android.os.Bundle;
import android.util.Log;
import android.view.Gravity;
import android.view.KeyEvent;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.PopupWindow;
import android.widget.Toast;

import java.io.DataOutputStream;
import java.io.IOException;
import java.io.ObjectOutputStream;
import java.net.InetSocketAddress;
import java.net.Socket;
import java.net.SocketAddress;

public class MainActivity extends AppCompatActivity {
    private String ipAddress = "192.168.1.59";
    private int port = 2000;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Setting background color
        View view = this.getWindow().getDecorView();
        view.setBackgroundColor(Color.rgb(30,30,30));

        // hiding bottom navigation bar
        getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION);

        // Initiation request
        new ConnectionWithServer((Activity) MainActivity.this,MainActivity.this,ipAddress,port,"volume").execute();

        // Click event for Volume Up button
        ImageButton VolumeUp = (ImageButton) findViewById(R.id.VolumeUpButton);
        VolumeUp.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                new ConnectionWithServer((Activity) MainActivity.this,MainActivity.this,ipAddress,port,"volume up").execute();
            }
        });

        // Click event for Volume Down button
        ImageButton VolumeDown = (ImageButton) findViewById(R.id.VolumeDownButton);
        VolumeDown.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                new ConnectionWithServer((Activity) MainActivity.this,MainActivity.this,ipAddress,port,"volume down").execute();
            }
        });

        // Click event for Volume Up Lot button (lot means volume does up for about 33 %)
        ImageButton VolumeUpLot = (ImageButton) findViewById(R.id.VolumeUpLotButton);
        VolumeUpLot.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                new ConnectionWithServer((Activity) MainActivity.this,MainActivity.this,ipAddress,port,"volume up lot").execute();
            }
        });

        // Click event for Volume Down Lot button (lot means volume does down for about 33 %)
        ImageButton VolumeDownLot = (ImageButton) findViewById(R.id.VolumeDownLotButton);
        VolumeDownLot.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                new ConnectionWithServer((Activity) MainActivity.this,MainActivity.this,ipAddress,port,"volume down lot").execute();
            }
        });

        // Click event for ScreenShot Button
        ImageView ScreenShotButton = (ImageView) findViewById(R.id.ScreenShotButton);
        ScreenShotButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                new ConnectionWithServer((Activity) MainActivity.this,MainActivity.this,ipAddress,port,"screenshot").execute();
            }
        });

        // Click event for Lock Button
        ImageView LockScreenButton = (ImageView) findViewById(R.id.LockScreenButton);
        LockScreenButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                new ConnectionWithServer((Activity) MainActivity.this,MainActivity.this,ipAddress,port,"lock").execute();
            }
        });

        // Click event for Mute Button
        ImageView MuteButton = (ImageView) findViewById(R.id.MuteButton);
        MuteButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                new ConnectionWithServer((Activity) MainActivity.this,MainActivity.this,ipAddress,port,"mute").execute();
            }
        });

        // Enter press event for ippAddress input
        EditText ipAddressInput = (EditText) findViewById(R.id.ipAddress);
        ipAddressInput.setOnKeyListener(new View.OnKeyListener() {
            @Override
            public boolean onKey(View v, int keyCode, KeyEvent event) {
                if ((event.getAction() == KeyEvent.ACTION_DOWN) &&
                        (keyCode == KeyEvent.KEYCODE_ENTER)) {
                    // Perform action on key press
                    ipAddress = ipAddressInput.getText().toString();
                    Log.i("Ip Address changed", String.valueOf(ipAddress));
                    return true;
                }
                return false;
            }

        });

        // Enter press event for port input
        EditText portInput = (EditText) findViewById(R.id.port);
        portInput.setOnKeyListener(new View.OnKeyListener() {
            @Override
            public boolean onKey(View v, int keyCode, KeyEvent event) {
                if ((event.getAction() == KeyEvent.ACTION_DOWN) &&
                        (keyCode == KeyEvent.KEYCODE_ENTER)) {
                    // Perform action on key press
                    port = Integer.parseInt(portInput.getText().toString());
                    Log.i("Port changed", String.valueOf(port));
                    return true;
                }
                return false;
            }

        });

        // Click event for Shutdown scheduler
        ImageView shutdownScheduler = (ImageView) findViewById(R.id.ShutdownTimer);

        View parent = (View) findViewById(R.id.ParentViewFroPopUp);
        parent.setClickable(false);

        //Overlay animation init
        ///TransitionDrawable transition = (TransitionDrawable) parent.getBackground();

        shutdownScheduler.setOnClickListener(new View.OnClickListener() {
            @RequiresApi(api = Build.VERSION_CODES.M)
            @Override
            public void onClick(View v) {
                // treba dorobit to dialogove okno a tam mat nastavenia a vlastne tlacidlo na zrusenie timeru
                //int time = 2000;
                //new ConnectionWithServer((Activity) MainActivity.this,MainActivity.this,ipAddress,port,"timer " + time).execute();
                LayoutInflater layoutInflater
                        = (LayoutInflater)getBaseContext()
                        .getSystemService(LAYOUT_INFLATER_SERVICE);

                View popupView = layoutInflater.inflate(R.layout.popup,null );
                final PopupWindow popupWindow = new PopupWindow(
                        popupView,
                        LinearLayout.LayoutParams.WRAP_CONTENT,
                        LinearLayout.LayoutParams.WRAP_CONTENT);
                popupWindow.setOverlapAnchor(true);

                Button btnDismiss = (Button)popupView.findViewById(R.id.Cancel);



                btnDismiss.setOnClickListener(new Button.OnClickListener(){

                    @Override
                    public void onClick(View v) {
                        // TODO Auto-generated method stub
                        popupWindow.dismiss();
                        parent.setBackgroundColor(Color.parseColor("#00000000"));
                        //transition.reverseTransition(5000);
                    }});

                //transition.startTransition(5000);
                popupWindow.showAtLocation(parent, Gravity.CENTER,0, 0);
                parent.setBackgroundColor(Color.parseColor("#90000000"));

            }});


        }

    }


Answer

Try adding,

app:layout_constraintEnd_toEndOf="@+id/TimerValluesBackground"

to your last TextView(@+id/secondValue) component.

Advertisement