Now I've already browsed some similar threads, and they helped a bit but I still can't figure this out. I just started Android developing a couple hours ago and I'm following along in this video series, but in the videos the preview matches the emulator exactly. Mine does not. I've attached my xml (however I've been doing this by dragging and dropping on the design tab as that's how the video has been doing it and I know next to nothing about xml coding). The imgur link here has my graphical issue depicted: https://imgur.com/a/WZ6QP0o I would appreciate some advice
<?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">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="27dp"
android:layout_marginStart="8dp"
android:layout_marginTop="28dp"
android:layout_marginEnd="8dp"
android:text="Click the button of the larger number. Not hard guy"
app:layout_constraintEnd_toEndOf="#+id/textView2"
app:layout_constraintHorizontal_bias="0.359"
app:layout_constraintStart_toStartOf="#+id/guideline2"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:layout_marginStart="24dp"
android:text="Bigger Number Game!"
app:layout_constraintLeft_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="13dp"
tools:textSize="30dp" />
<Button
android:id="#+id/left_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="212dp"
android:onClick="leftButtonClick"
android:text="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/right_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="211dp"
android:layout_marginEnd="25dp"
android:onClick="rightButtonClick"
android:text="0"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/pointsView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="17dp"
android:text="Points: 0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="20dp" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="20dp" />
</android.support.constraint.ConstraintLayout>
The tools namespace, which you use in your title TextView, is only used by the design editor. Those attributes are removed at compile-time and so aren't used in the actual app.
You should use android:textSize="30sp" for the text size.
You should set a top constraint for the TextView (app:layout_constraintTop_toTopOf="parent") and then set a top margin (android:layout_marginTop="13dp")
Related
I have an editetext and I used drawable start, but the icon is not in the right place during execution
Inside view of Android Studio
Run the program
First I put a scrollview, then a LinearLayout, inside it is a ConstraintLayout, then editText.
<?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=".Activity.Activityy.MainActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:text="Hi Rechard"
android:textColor="#FF6D00"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="27dp"
android:layout_marginTop="8dp"
android:text="#string/order_eat"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#+id/textView"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="82dp"
android:layout_height="78dp"
android:layout_marginEnd="32dp"
android:src="#drawable/_f5736be590fe78e73bc4e4d7c012dda"
app:layout_constraintBottom_toBottomOf="#+id/textView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView" />
<EditText
android:id="#+id/editTextTextPersonName"
android:layout_width="315dp"
android:layout_height="68dp"
android:layout_marginStart="8dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="8dp"
android:background="#drawable/search_background"
android:drawableStart="#drawable/icons8_search_32"
android:drawablePadding="10dp"
android:ems="10"
android:hint="Find Your Food"
android:inputType="textPersonName"
android:textStyle="italic"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
Inside the execution, the texts have also moved to the right, while they are on the left side of the design.
in android start means left and end means right
you must use android:drawableEnd="ICON" instead of android:drawableStart="ICON" to set icon right side.
My phone's language is right, but my design is left, so when I run, it is automatically directed to the right
After a lot of research, I was able to solve my problem
Just go to the manifest file
And make the following line
android:supportsRtl="true"
To
android:supportsRtl="false"
I have a simple app written in Java that I am trying to make work on Android devices. The code runs without issue, but the layout of the widgets is inconsistent.
I want all of them to be centered on the screen, and this works when I run the program in an emulator from Android Studio- I have tried this with an emulated Nexus 6P and a Pixel 3A.
However, when I run the program on a physical device, a Galaxy S9, some of the widgets are no longer centered.
I have tried centering the gravity for the RelativeLayout, and using android:layout_centerHorizontal="true" for each of the widgets. I also tried setting the size of the widgets to match_parent and then centering the gravity horizontally inside them. So far this has all given the same result.
I include the XML code below, along with two screenshots for comparison, one from the emulated Nexus 6P and one from the Galaxy S9. You should see that the button and the number field are centered, but all of the text is slightly off-centre.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginStart="0dp"
android:layout_marginLeft="0dp"
android:layout_marginTop="25dp"
android:editable="false"
android:gravity="center_horizontal"
android:text="Arby's Hi-Lo Guessing Game"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:visibility="visible" />
<TextView
android:id="#+id/txtPrompt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerHorizontal="true"
android:layout_marginStart="-2dp"
android:layout_marginLeft="0dp"
android:layout_marginTop="75dp"
android:gravity="center|center_horizontal"
android:text="Enter a number between 1 and 100:"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:layout_alignParentLeft="true" />
<EditText
android:id="#+id/txtGuess"
android:layout_width="75dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="105dp"
android:layout_marginEnd="166dp"
android:layout_marginRight="166dp"
android:ems="10"
android:gravity="center_horizontal"
android:inputType="number" />
<Button
android:id="#+id/btnGuess"
android:layout_width="126dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:layout_marginTop="175dp"
android:text="Guess!" />
<TextView
android:id="#+id/lblOutput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="250dp"
android:gravity="center_horizontal"
android:text="Enter a number, then click Guess!"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textSize="18sp" />
</RelativeLayout>
Emulator Alignment
Physical Device Alignment
Your views have absolute margins set in dp. These will not look the same on different sized screens. Remove all marginStart, marginEnd, marginRight and marginLeft attributes. Then RelativeLayout should center the views properly.
try this, i did it fast but i hope it wiill work ;)
<?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">
<TextView
android:id="#+id/txtTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:textAlignment="center"
android:layout_marginTop="25dp"
android:editable="false"
android:text="Arby's Hi-Lo Guessing Game"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:visibility="visible"
/>
<TextView
android:id="#+id/txtPrompt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/txtTitle"
android:textAlignment="center"
android:layout_marginTop="25dp"
android:text="Enter a number between 1 and 100:"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
/>
<EditText
android:id="#+id/txtGuess"
android:layout_width="75dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/txtPrompt"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:inputType="number" />
<Button
android:id="#+id/btnGuess"
app:layout_constraintTop_toBottomOf="#+id/txtGuess"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="30dp"
android:layout_width="126dp"
android:layout_height="wrap_content"
android:text="Guess!" />
<TextView
android:id="#+id/lblOutput"
app:layout_constraintTop_toBottomOf="#+id/btnGuess"
android:textAlignment="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:text="Enter a number, then click Guess!"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textSize="18sp" />
</android.support.constraint.ConstraintLayout>
I've tried virtually every solution out there for soft keyboard covering part of the view when pops up, on further investigation I found that it's not the keyboard but the suggestions strip that's covering the layout.
But disabling the suggestion strip from the settings of the keyboard seems the only solution.
I've tried some hacks which add padding at runtime when the keyboard pops up but none seems to work.
This screenshot will explain it better
The below code snippet is from my BottomSheetDialog:
<?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"
android:id="#+id/design_bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/feedback_text"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:background="#drawable/recognition_text_box_border_drawable"
android:gravity="start"
android:hint="#string/manager_recognition_edit_text_hint"
android:importantForAutofill="no"
android:inputType="textMultiLine|textCapSentences"
android:maxLength="200"
android:maxLines="24"
android:overScrollMode="always"
android:padding="8dp"
android:scrollbarStyle="insideInset"
android:scrollbars="vertical"
android:textColor="#android:color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/award_badge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="#id/feedback_text"
app:layout_constraintEnd_toEndOf="#id/feedback_text"
app:srcCompat="#drawable/trophy_golden" />
<include
android:id="#+id/award_badge_item"
layout="#layout/award_badge_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="#id/feedback_text"
app:layout_constraintStart_toStartOf="#id/feedback_text" />
<LinearLayout
android:id="#+id/buttons_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:orientation="horizontal"
android:weightSum="3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/feedback_text">
<Button
android:id="#+id/cancel_recognition"
style="#style/Widget.AppCompat.Button"
android:layout_width="0dp"
android:layout_height="#dimen/medium_button_height"
android:layout_margin="4dp"
android:layout_weight="1"
android:text="#android:string/cancel" />
<Button
android:id="#+id/send_recognition"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="#dimen/medium_button_height"
android:layout_margin="4dp"
android:layout_weight="2"
android:text="#string/send_recognition" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
add this line in your manifest activity tag where you are opening keyboard
android:windowSoftInputMode="stateHidden|adjustResize"
I've a splash screen like this:
but if I open my application it will show like this:
This is my XML 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"
android:background="#android:color/holo_red_light"
tools:context=".SplashScreen">
<ImageView
android:id="#+id/splash_icon"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="160dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#mipmap/ic_concas_icon" />
<TextView
android:id="#+id/splash_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
android:text="GO Tools"
android:textColor="#android:color/white"
android:textSize="48sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/splash_icon"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/splash_icon"
app:layout_constraintTop_toBottomOf="#+id/splash_icon" />
<ProgressBar
android:id="#+id/splash_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="136dp"
app:layout_constraintEnd_toEndOf="#+id/splash_icon"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintStart_toStartOf="#+id/splash_icon"
app:layout_constraintTop_toBottomOf="#+id/splash_icon" />
<TextView
android:id="#+id/splash_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="204dp"
android:text="STATUS"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/splash_icon"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="#+id/splash_icon"
app:layout_constraintTop_toBottomOf="#+id/splash_icon" />
I need that elements are placed correctly like Android Studio preview but if I launch my application still not work. Someone know how to do that? Thank you so much!
EDIT: Image will not load but it's correctly setted.
Looks like your layout is ok but if you want your image to be a bit more to the top of the screen you need to change it, now you are telling your image to be centered to the midle of your screen so all of your other views will be placed lower than your image.
A good solution would be adding guideline and constrain your image to the guideline and not the top of your screen(that way you image will be placed a bit higher and it will change your layout look)For example:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/splash_icon"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginTop="8dp"
android:background="#color/buttonColor"
app:layout_constraintBottom_toTopOf="#+id/guideline3"
app:layout_constraintHorizontal_bias="0.488"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline3" />
<TextView
android:id="#+id/splash_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
android:layout_marginBottom="8dp"
android:background="#color/buttonColor"
android:text="GO Tools"
android:textColor="#android:color/white"
android:textSize="48sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/splash_progress"
app:layout_constraintEnd_toEndOf="#+id/splash_icon"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/splash_icon"
app:layout_constraintTop_toBottomOf="#+id/splash_icon" />
<ProgressBar
android:id="#+id/splash_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="136dp"
android:layout_marginBottom="8dp"
android:background="#color/buttonColor"
app:layout_constraintBottom_toTopOf="#+id/splash_status"
app:layout_constraintEnd_toEndOf="#+id/splash_icon"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintStart_toStartOf="#+id/splash_icon"
app:layout_constraintTop_toBottomOf="#+id/splash_icon" />
<TextView
android:id="#+id/splash_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="204dp"
android:layout_marginBottom="8dp"
android:background="#color/buttonColor"
android:text="STATUS"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/splash_icon"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="#+id/splash_icon"
app:layout_constraintTop_toBottomOf="#+id/splash_icon" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.3"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Edit: this may work on your phone but I just noticed that you are using a fixed size for your views - try to avoid this because different phone have different phone sizes
Your layout is depending too much on the size of the screen by constraining your views to one another and relying on various margins and vertical biases to make it work in the designer. As a result, when you move to another screen size, the layout doesn't work the way you intend.
Take a look at ConstraintLayout chains for a way to group your widgets so they center across all screen sizes. I think that a CHAIN_PACKED chain is what you need.
I've created a simple activity design using ConstraintLayout.
Whenever I try to center a textView, it does it correctly in the blueprints but never does it in the actual app. Not sure if i am doing something wrong or I'm losing my mind.
Here is the image
Here is the 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:background="#color/background_green"
tools:context="nz.co.listcosolutions.StartActivity">
<ImageView
android:id="#+id/imageView4"
android:layout_width="160dp"
android:layout_height="163dp"
android:layout_marginEnd="95dp"
android:layout_marginStart="95dp"
android:layout_marginTop="32dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/baby_plant" />
<Button
android:id="#+id/btnNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginStart="32dp"
android:layout_marginTop="64dp"
android:text="#string/next"
android:textColor="#color/background_green"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="20dp"
android:text="Welcome to My App"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView4" />
</android.support.constraint.ConstraintLayout>
Im also using the latest version of ConstraintLayout
compile 'com.android.support.constraint:constraint-layout:1.0.2'
You need to add:
android:gravity="center"
to the TextView.
This is the only certain way to center the text inside a TextView object or one of its subclasses.
The android:textAlignment is not working in all the cases and as reported by this answer that it has problems in lower API levels.