Phone unable to display android application as show in Android Studio when debug

Question

After debugging my program and run it on my phone, my phone fail to display exactly what I have design on Android Studio. When using Relative Layout, it display find, now when I switch to Constraint Layout. The problem occur.

Fig 1 is a snapshot of the intended design of my application taken from Android Studio and Fig 2 is the outcome of the application taken from my phone itself

Intended Design (Fig 1) Outcome image (Fig 2)

XML code

<?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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.jasonkym.safstrengthcounter.MainActivity"
android:background="@android:color/background_dark">

<TextView
    android:text="No. of blank files:"
    android:layout_width="84dp"
    android:layout_height="41dp"
    android:id="@+id/tvtNoOfBlankFiles"
    android:textStyle="normal|bold"
    android:textColor="@android:color/holo_orange_light"
    tools:layout_editor_absoluteY="160dp"
    tools:layout_editor_absoluteX="25dp" />

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:inputType="number"
    android:ems="10"
    android:id="@+id/etxNoOfBlankFiles"
    android:textColor="@android:color/holo_green_dark"
    android:text="0"
    android:textStyle="normal|bold|italic"
    tools:layout_editor_absoluteY="158dp"
    tools:layout_editor_absoluteX="117dp" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/tvtResults"
    android:textSize="24sp"
    android:textStyle="normal|bold"
    android:textColor="@android:color/holo_blue_bright"
    tools:layout_editor_absoluteX="121dp"
    tools:layout_editor_absoluteY="415dp" />

<TextView
    android:text="No. of people per column:"
    android:layout_width="88dp"
    android:layout_height="43dp"
    android:id="@+id/tvtNoOfPeoplePerRow"
    android:textStyle="normal|bold"
    android:textColor="@android:color/holo_orange_light"
    tools:layout_editor_absoluteX="25dp"
    tools:layout_editor_absoluteY="234dp" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="SAF Strength Counter"
    android:id="@+id/tvtStrengthCounterLabel"
    android:textStyle="normal|bold"
    android:textSize="30sp"
    android:textColor="@android:color/holo_red_dark"
    tools:layout_editor_absoluteX="35dp"
    tools:layout_editor_absoluteY="32dp" />

<TextView
    android:text="Made by PTE Koh Yi Min Jason"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/tvtMadebyKohYiMinJason"
    tools:layout_editor_absoluteY="478dp"
    tools:layout_editor_absoluteX="84dp" />

<TextView
    android:text="No. of people behind:"
    android:layout_width="87dp"
    android:layout_height="44dp"
    android:id="@+id/tvtNoOfPeopleBehind"
    android:textStyle="normal|bold"
    android:textColor="@android:color/holo_orange_light"
    tools:layout_editor_absoluteX="23dp"
    tools:layout_editor_absoluteY="314dp" />

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:inputType="number"
    android:ems="10"
    android:id="@+id/etxNoOfPeopleBehind"
    android:textStyle="normal|bold|italic"
    android:text="0"
    android:textColor="@android:color/holo_green_dark"
    tools:layout_editor_absoluteY="315dp"
    tools:layout_editor_absoluteX="118dp" />

<TextView
    android:text="No. of column:"
    android:layout_width="82dp"
    android:layout_height="43dp"
    android:id="@+id/tvtNumberOfRows"
    android:textStyle="normal|bold"
    android:textColor="@android:color/holo_orange_light"
    tools:layout_editor_absoluteX="27dp"
    tools:layout_editor_absoluteY="91dp" />

<Button
    android:text="Calculate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/btnCalculate"
    tools:layout_editor_absoluteY="407dp"
    tools:layout_editor_absoluteX="236dp" />

<TextView
    android:text="Result:"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/tvtResultsLabel"
    android:textSize="24sp"
    android:textStyle="normal|bold"
    android:textColor="@android:color/holo_orange_light"
    tools:layout_editor_absoluteY="415dp"
    tools:layout_editor_absoluteX="26dp" />

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:inputType="number"
    android:ems="10"
    android:id="@+id/etxNoOfRows"
    android:textColor="@android:color/holo_green_dark"
    android:text="0"
    android:textStyle="normal|bold|italic"
    tools:layout_editor_absoluteY="91dp"
    tools:layout_editor_absoluteX="115dp" />

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:inputType="number"
    android:ems="10"
    android:id="@+id/etxNoOfPeoplePerRow"
    android:textColor="@android:color/holo_green_dark"
    android:text="0"
    android:textStyle="normal|bold|italic"
    tools:layout_editor_absoluteY="234dp"
    tools:layout_editor_absoluteX="121dp" />


 </android.support.constraint.ConstraintLayout>

score 0 · Answer 1 · edited May 23 '17 at 12:24

0

I think first you have to take the idea of Relative as well as Constraints layout, then start changing your code. The given link below will help you:

Differences between ConstraintLayout and RelativeLayout

edited May 23 '17 at 12:24

Community

1
1

answered Dec 15 '16 at 09:19

Rishabh Mahatha

1,251
9
19

The screen shot taken in Fig 1 was the intended design of the app in ConstraintLayout. shouldn’t my phone display exactly the same for what I had design on the studio regardless whether it is design in Relative or Constraint Layout? Do I have to add in more line of code for Constraint layout to make it display as shown in the studio? I felt that it is the case as it seem that all of my EditText and TextView are at the top left hand corner of the screen and I have to enter a line of code or two to put the Widget and TextView at the location intended. – Koh Yi Min Jason Dec 15 '16 at 09:44

score 0 · Answer 2 · answered Dec 15 '16 at 10:09

I hope this is help for you.`

<Button
    android:id="@+id/btn_search_back"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="@color/color_green"
    android:elevation="@dimen/card_elivation"
    android:text="@string/back"
    android:textColor="@color/color_white"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

<ScrollView
    android:id="@+id/layout_show_response"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/btn_search_back">
    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.CardView
            android:id="@+id/cv_search_for"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/margin_medium"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            card_view:cardBackgroundColor="@color/color_simple_gray">

            <android.support.constraint.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <TextView
                    android:id="@+id/textView"
                    style="@style/dialog_text_view"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:text="@string/you_ask_for"
                    android:textAllCaps="true"
                    android:textColor="@color/color_black"
                    android:textStyle="bold"
                    tools:layout_editor_absoluteY="40dp"
                    tools:layout_editor_absoluteX="15dp" />

                <TextView
                    android:id="@+id/lbl_ask_for"
                    style="@style/dialog_text_view"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:paddingBottom="@dimen/view_padding_extra_small"
                    android:text="Ask For"
                    android:textColor="@color/color_darker_gray"
                    app:layout_constraintTop_toBottomOf="@+id/textView"
                    tools:layout_editor_absoluteX="15dp" />

            </android.support.constraint.ConstraintLayout>
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/margin_medium"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/cv_search_for"
            card_view:cardBackgroundColor="@color/color_simple_gray">

            <android.support.constraint.ConstraintLayout
                android:id="@+id/cl_result"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <TextView
                    android:id="@+id/textView2"
                    style="@style/dialog_text_view"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/result"
                    android:textAllCaps="true"
                    android:textColor="@color/color_black"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/lbl_reply"
                    style="@style/dialog_text_view"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:paddingBottom="@dimen/view_padding_extra_small"
                    android:text="Result"
                    app:layout_constraintTop_toBottomOf="@+id/textView2"
                    android:textColor="@color/color_darker_gray" />

                <LinearLayout
                    android:id="@+id/layout_img"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    app:layout_constraintTop_toBottomOf="@+id/lbl_reply"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintRight_toRightOf="parent"
                    android:visibility="gone"
                    android:orientation="horizontal">

                    <ImageView
                        android:id="@+id/iv_show_img"
                        android:layout_width="@dimen/layout_width_medium"
                        android:layout_height="@dimen/layout_height_medium"
                        android:layout_gravity="center"
                        android:layout_margin="@dimen/view_margin_nano"
                        android:background="@mipmap/iv_pasted_icon" />

                    <ImageView
                        android:id="@+id/iv_show_img_icon"
                        android:layout_width="@dimen/layout_width_medium"
                        android:layout_height="@dimen/layout_height_medium"
                        android:layout_gravity="center"
                        android:layout_margin="@dimen/view_margin_nano"
                        android:background="@mipmap/iv_pasted_img" />
                </LinearLayout>


            </android.support.constraint.ConstraintLayout>
        </android.support.v7.widget.CardView>
    </android.support.constraint.ConstraintLayout>


    </ScrollView>

`

score 0 · Answer 3 · answered Dec 15 '16 at 10:41

I have already solve the problem. You need to add constraint when using ConstraintLayout. It will not display as it shown in the Studio without constraint.

May I asked is there a way which I can design an app just in window visual studio where I am designing a form application just drag and drop and do not have to add any constraint? Is there a layout perhaps that enable me to do that?

Phone unable to display android application as show in Android Studio when debug

3 Answers3