I am new to android studio and I have been creating a few projects, learning different concepts. I am now making my first application and I've noticed that when I launch all my applications on the emulator, the content doesn't completely cover the application. In my XML, the activity is centered in the app, but on the emulator everything's strangely shifted to the left.
I have posted images below to explain what I am talking about. I was wondering if this is normal, or am I doing something wrong. Since I spent a lot of time laying out the XML activity the way I desire, and then it is displayed awful on the emulator.
This is the Login Page, notice how centered and laid out all the views are.
This is the application launched on the emulator. Notice how the content is constrained, and kind of squeezed and pushed to the top left corner.
How do I fix this issue?
Thank you in advance.
<?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"
android:background="#drawable/barbell_background"
android:theme="#style/Base.ThemeOverlay.AppCompat.Dark"
tools:context=".Login">
<ImageView
android:id="#+id/AppLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="118dp"
android:layout_marginTop="40dp"
android:adjustViewBounds="true"
android:foregroundGravity="center_horizontal"
android:maxHeight="150dp"
android:maxWidth="150dp"
android:scaleType="fitCenter"
android:src="#drawable/fitness_logo_white"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/LoginUsernameLayout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="40dp"
android:layout_marginTop="30dp"
android:minHeight="50dp"
android:minWidth="300dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/AppLogo">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="40dp"
android:minWidth="40dp"
android:src="#drawable/user_icon"
android:layout_gravity="center_vertical"/>
<EditText
android:id="#+id/LoginUsernameInput"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="240dp"
android:minHeight="50dp"
android:layout_marginStart="5dp"
android:hint="Username"
android:textSize="20sp"/>
</LinearLayout>
<LinearLayout
android:id="#+id/LoginPasswordLayout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="40dp"
android:layout_marginTop="90dp"
android:minHeight="50dp"
android:minWidth="300dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/AppLogo">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="40dp"
android:minWidth="40dp"
android:src="#drawable/password_icon"
android:layout_gravity="center_vertical"/>
<EditText
android:id="#+id/LoginPasswordInput"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="240dp"
android:minHeight="50dp"
android:layout_marginStart="5dp"
android:hint="Password"
android:textSize="20sp"
android:inputType="textPassword"/>
</LinearLayout>
<Button
android:id="#+id/SignInButton"
android:layout_width="297dp"
android:layout_height="34dp"
android:layout_marginStart="44dp"
android:layout_marginTop="25dp"
android:width="250dp"
android:height="5dp"
android:background="#drawable/login_button_design"
android:gravity="center"
android:text="#string/sign_in"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/LoginPasswordLayout" />
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="72dp"
android:layout_marginTop="20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/SignInButton">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/don_t_have_an_account"
android:textSize="16sp" />
<EditText
android:id="#+id/SignUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:background="#android:color/transparent"
android:text="#string/sign_up" />
</LinearLayout>
<Button
android:id="#+id/DB_Display_Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="92dp"
android:layout_marginTop="32dp"
android:width="200dp"
android:background="#drawable/signup_button_design"
android:gravity="center"
android:text="Display Login Database"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout2" />
</android.support.constraint.ConstraintLayout>
You using hard coded values for margins, it will not work on differente resolutions from the one you created it for. You need to use relative sizes for width/height (wrap_content/match_parent) and use gravity to anchor childs relative to its parent (center, left, right, center_horizontal, center_vertical).
margins are used only to add space between views not for centering.
Once you do all this your same screen will work on different screen sizes.
I think you have set all the necessary constraint for all the view. that is why they are getting shifted to the 0,0(top left) location of the screen.
Could you post the whole 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:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/Base.ThemeOverlay.AppCompat.Dark"
tools:context=".Main2Activity">
<ImageView
android:id="#+id/AppLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="118dp"
android:layout_marginTop="40dp"
android:adjustViewBounds="true"
android:foregroundGravity="center_horizontal"
android:maxHeight="150dp"
android:maxWidth="150dp"
android:scaleType="fitCenter"
android:src="#color/colorPrimary"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="118dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginEnd="8dp" />
<LinearLayout
android:id="#+id/LoginUsernameLayout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="40dp"
android:layout_marginTop="30dp"
android:minHeight="50dp"
android:minWidth="300dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/AppLogo"
android:layout_marginLeft="40dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginEnd="8dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="40dp"
android:minWidth="40dp"
android:src="#drawable/user_icon"
android:layout_gravity="center_vertical"/>
<EditText
android:id="#+id/LoginUsernameInput"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="240dp"
android:minHeight="50dp"
android:layout_marginStart="5dp"
android:hint="Username"
android:textSize="20sp"/>
</LinearLayout>
<LinearLayout
android:id="#+id/LoginPasswordLayout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="40dp"
android:minHeight="50dp"
android:minWidth="300dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginLeft="40dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="17dp"
app:layout_constraintTop_toBottomOf="#+id/LoginUsernameLayout"
android:layout_marginEnd="8dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="40dp"
android:minWidth="40dp"
android:src="#drawable/password_icon"
android:layout_gravity="center_vertical"/>
<EditText
android:id="#+id/LoginPasswordInput"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="240dp"
android:minHeight="50dp"
android:layout_marginStart="5dp"
android:hint="Password"
android:textSize="20sp"
android:inputType="textPassword"/>
</LinearLayout>
<Button
android:id="#+id/SignInButton"
android:layout_width="297dp"
android:layout_height="48dp"
android:layout_marginStart="44dp"
android:layout_marginTop="26dp"
android:width="250dp"
android:height="5dp"
android:background="#drawable/login_button_design"
android:gravity="center"
android:text="#string/sign_in"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/LoginPasswordLayout"
android:layout_marginLeft="44dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginEnd="8dp"
app:layout_constraintHorizontal_bias="0.4" />
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="0dp"
android:layout_height="59dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintHorizontal_bias="0.0"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/SignInButton"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintVertical_bias="0.154">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/don_t_have_an_account"
android:textSize="16sp" />
<EditText
android:id="#+id/SignUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:background="#android:color/transparent"
android:text="#string/sign_up" />
</LinearLayout>
<Button
android:id="#+id/DB_Display_Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="92dp"
android:layout_marginTop="32dp"
android:width="200dp"
android:background="#drawable/signup_button_design"
android:gravity="center"
android:text="Display Login Database"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout2"
android:layout_marginLeft="92dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintHorizontal_bias="0.13"
app:layout_constraintVertical_bias="0.029"
android:layout_marginEnd="8dp" />
</android.support.constraint.ConstraintLayout>
Related
I have a problem with the design layout in Android Studio, when designing the layout there, the layout looks acceptable and everything okay, but as soon as I run it forms a very nasty white area between the Status Bar and the Toolbar (although I do not use the Toolbar), and the theme which is applied (Theme.MaterialComponents.Light.NoActionBar), does not imply the presence of ActionBar. In any case, I must admit that my skills and experience in Android development is not enough to solve this problem, I would be glad for any help, thanks in advance.
I attach the code of the layout:
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:layout_height="match_parent"
tools:context=".activities.WelcomeActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/btnLogin"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/background_intro" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/white_line" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/btnLogin"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3"
app:layout_constraintVertical_bias="0.285"
app:srcCompat="#drawable/women" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="36dp"
android:fontFamily="#font/ptsansbold"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:text="Welcome text"
android:textAlignment="center"
android:textColor="#FFFFFF"
android:textSize="41sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="26dp"
android:fontFamily="#font/ptsansregular"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Lorem Ipsum Text"
android:textAlignment="center"
android:textColor="#FFFFFF"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/btnLogin"
style="#android:style/Widget.Button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:background="#drawable/background_btn"
android:text="Auth"
android:textAlignment="center"
android:textColor="#39632F"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/btnRegister"
style="#android:style/Widget.Button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="32dp"
android:background="#drawable/background_btn"
android:text="Register"
android:textAlignment="center"
android:textColor="#39632F"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btnLogin" />
</androidx.constraintlayout.widget.ConstraintLayout>
I tried to use android:fitsSystemWindows="true" but it had no effect, unfortunately I could not find any other cases with this problem, I also tried to activate Fullscreen mode.
But this also had no effect, which is needed.
I am an android studio beginner, and here is an app I made.
How it looks in the IDE:
How it looks on my Tablet (9 inch screen):
And how it looks on my Mom's phone (6 inch screen):
As you can see, the objects are getting squished to the bottom of the screen in the case of Mom's phone, whose screen is significantly smaller than my Tablet. I used Constraint Layout to make this app. I don't understand why this happens.
I'd be pleased to give any more information if required.
Edit: Here's my XML:
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<EditText
android:id="#+id/textview_number_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:ems="10"
android:hint="Enter first fraction"
android:inputType="number|text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<EditText
android:id="#+id/textview_number_2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:ems="10"
android:hint="Enter second fraction"
android:inputType="number|text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textview_number_1" />
<Button
android:id="#+id/button_add"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="24dp"
android:text="Add"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textview_number_2" />
<TextView
android:id="#+id/textView_result"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:text="0"
android:textColor="#323232"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<Switch
android:id="#+id/switch_simplify"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Simplify result "
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button_divide" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="32dp"
android:gravity="center"
android:text="Fractions Calculator"
android:textColor="#673AB7"
android:textSize="30sp"
android:textStyle="bold|italic"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button_subtract"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:text="Subtract"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button_add" />
<Button
android:id="#+id/button_multiply"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:text="Multiply"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button_subtract" />
<Button
android:id="#+id/button_divide"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginEnd="24dp"
android:text="Divide"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button_multiply" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="24dp"
android:text="Result:"
android:textColor="#000000"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/switch_simplify" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="16dp"
android:gravity="center"
android:text="This calculator only calculates fractions, and does not calculate whole numbers. Please enter the numbers only in the form a/b"
android:textColor="#323232"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView_result" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginBottom="8dp"
android:text="DK Apps"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Build v1.0.0"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Your mom's phone has a small screen so you should wrap your content in a ScrollView in order for all of it do be displayed.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
...
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
I have created an app which has a help screen which is initiated by a 3 dots help menu button on the action bar.The help screen has the following layout xml code:
<?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="280dp"
android:layout_height="380dp"
android:layout_gravity="center"
android:background="#drawable/aboutus_new"
android:orientation="vertical"
android:padding="0dp">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#color/mehendi"
android:minHeight="40dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:title="Info">
<TextView
android:id="#+id/closeButtn"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="end"
android:layout_marginRight="4dp"
android:background="#drawable/circlebackground"
android:gravity="center"
android:text="X"
android:textColor="#color/colorWhite"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
<android.support.constraint.ConstraintLayout
android:id="#+id/linearLayoutnew"
android:layout_width="350dp"
android:layout_height="232dp"
android:layout_gravity="center_horizontal">
<ImageView
android:id="#+id/imageViewnew"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:foregroundGravity="center_horizontal"
android:src="#drawable/eat_icon"
app:layout_constraintEnd_toStartOf="#+id/guideline25"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textViewnew"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/aboutus"
android:textColor="#color/colorWhite"
android:textSize="13sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/imageView6"
app:layout_constraintStart_toStartOf="#+id/imageView6"
app:layout_constraintTop_toBottomOf="#+id/imageView6" />
<RelativeLayout
android:layout_width="280dp"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="4dp"
android:foregroundGravity="center_horizontal"
android:gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/guideline24"
app:layout_constraintTop_toBottomOf="#id/textView">
<TextView
android:id="#+id/textView2"
android:layout_width="269dp"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginStart="4dp"
android:layout_marginTop="2dp"
android:layout_marginEnd="4dp"
android:layout_marginBottom="2dp"
android:fontFamily="sans-serif"
android:text="#string/introduc"
android:textAlignment="textStart"
android:textAllCaps="false"
android:textColor="#color/colorWhite"
android:textSize="13sp"
android:textStyle="bold|italic"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</RelativeLayout>
<android.support.constraint.Guideline
android:id="#+id/guideline24"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.0" />
<android.support.constraint.Guideline
android:id="#+id/guideline25"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="1" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="48dp"
android:orientation="horizontal"
android:padding="1dp">
<ImageView
android:id="#+id/imageViewfre"
android:layout_width="55dp"
android:layout_height="55dp"
android:layout_marginStart="12dp"
android:background="#drawable/mason"
android:baselineAlignBottom="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.6" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="55dp"
android:layout_height="55dp"
android:background="#drawable/app"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.6" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="55dp"
android:layout_height="55dp"
android:layout_marginEnd="12dp"
android:background="#drawable/creations"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/imageView4"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="55dp"
android:layout_height="55dp"
android:background="#drawable/swrd"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/imageView2"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</LinearLayout>
The above layout has also an alternative layout for the landscape mode in 'aboutus-land' folder.The above layout gets loaded on pressing 3 dotted button and while it is still active, if I changes the device's rotation this still reloads instead of its landscape alternative. But when I closes it manually by pressing close button and after closing ,if I changes device's rotation and then opens it again using 3 dotted menu button.The altenative landscape layout gets loaded. Why it's happening? anyone with any suggestion please help me out.
If you want your Activity to handle configuration changes, you should declare it in your AndroidManifest.xml like this:
<activity android:name=".MyActivity"
android:configChanges="orientation|screenSize">
Please refer here for more info: https://developer.android.com/guide/topics/resources/runtime-changes#HandlingTheChange
The position of widgets in my emulator is changing even though I change the margins it's still in different positions.
How can I fix it? My XML code doesn't seem to match with the UI, the other layouts seem to be okay and this is the only layout I have a problem with.
Thanks for your help :)
Here is my xml code:
<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"
android:background="#drawable/bg"
tools:context=".LoadingScreen"
tools:layout_editor_absoluteY="25dp">
<TextView
android:id="#+id/scissors"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="172dp"
android:layout_marginEnd="30dp"
android:fontFamily="#font/bungee_inline"
android:text="#string/scissors"
android:textColor="#color/colorPrimary"
android:textSize="60sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="#+id/rock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="17dp"
android:layout_marginEnd="19dp"
android:fontFamily="#font/bungee_inline"
android:text="#string/rock"
android:textColor="#color/colorPrimaryDark"
android:textSize="60sp"
app:layout_constraintBottom_toTopOf="#+id/paper"
app:layout_constraintEnd_toEndOf="#+id/paper" />
<TextView
android:id="#+id/paper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="49dp"
android:fontFamily="#font/bungee_inline"
android:text="#string/paper"
android:textColor="#android:color/holo_red_light"
android:textSize="60sp"
[![enter image description here][1]][1]app:layout_constraintBottom_toTopOf="#+id/scissors"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="59dp"
android:text="#string/press_start"
android:textColor="#color/colorPrimary"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
and here is my layout and emulator images:
there is only little problem in your layout, which is you have used margin properties in inconsistent way. For Ex, layout_marginRight="19dp" will need some more space than some other device according to their device configurations and size.
so, you should have to use your layout like below,
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#001235">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="ROCK"
android:textColor="#android:color/white"
android:textSize="40sp"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="PAPER"
android:textColor="#android:color/white"
android:textSize="40sp"
app:layout_constraintBottom_toTopOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="SCISSOR"
android:textColor="#android:color/white"
android:textSize="40sp"
app:layout_constraintBottom_toTopOf="#+id/textView4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:text="<<Press to Start>>"
android:textColor="#android:color/white"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
</android.support.constraint.ConstraintLayout>
this will work nearly equal in almost all devices. always try to provide the attributes value dynamic instead of static as much as it is possible
Your constraints are bad, here You have some example for Your view how to set them:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:id="#+id/rock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="rock"
app:layout_constraintBottom_toTopOf="#+id/paper"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
/>
<TextView
android:id="#+id/paper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="paper"
android:textColor="#android:color/holo_red_light"
app:layout_constraintBottom_toTopOf="#+id/scissors"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/rock"
app:layout_constraintVertical_chainStyle="packed"
/>
<TextView
android:id="#+id/scissors"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="scisors"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/paper"
app:layout_constraintVertical_chainStyle="packed"
/>
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="60dp"
android:text="press_start"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
</android.support.constraint.ConstraintLayout>
Then add some margins to fit your layout
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>
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
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>
`
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?