I'm new on Android Studio and I just want to create a button who open an URL. For that, I have just created a basic activity from the software. When I try to drag and drop on the design nothing is happening.
Here it is the screenshoot
<?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">
<Button
android:id="#+id/button2"
style="#android:style/Widget.DeviceDefault.Button"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="24dp"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:textAppearance="#style/TextAppearance.AppCompat.Button"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Test" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
There is a
app:layout_constraintStart_toStartOf="parent"
missing on your button. You defined it with 0dp width, so it will scale first if you define left and right constraints.
0dp width or height inside a ConstraintLayout means, that the View will take as much space as possible with the defined Constraint attributes. You missed one for the width scaling, so it will stay 0dp.
If problem persist just follow these steps:
File> Invalid cache/Restart > Invalidate and Restart
It will then surely work
Update :
I get this problems too but it works by Choosing another theme
Problem solved by #I_A_Mok with this problem: Why doesn't the layout design preview get displayed on my Android Studio?
"Change Theme in Editor from App Theme to anything with .NoActionBar (e.g. AppCompat.NoActionBar)."
and this is working! thanks a lot! :D
Related
The preview looks fine, but the app runs differently. In the layout inspector, there is simply nothing where this weird white space is. It seems to be a problem with ConstraintLayout + ViewPager. I had the same issue in three places, all with same ViewPager, 0dp vertical size setup. I have solved by converting ConstraintLayouts into LinearLayouts. But the question is why do I need to regress to a LinearLayout? I originally wrote the UI with ConstraintLayout, and ViewPager, it was fine. Somewhere along the way, without touching the code, things turned weird and this blank space showed up. As if something in Android UI rendering changed under the hood. Anyone have any idea what it is, or how to solve while keeping a ConstraintLayout?
Here is the layout inspector image of the app running on a device. I have clearly marked the problematic white space with my mouse calligraphy skills.
Here is the layout preview for the following xml code, note UI elements fill the screen, no white space after the bottom toolbar in this view, unlike live app. Don't mind the colour difference, the app changes colours at run time.
fragment_layout.xml (Between green and marked blank space in live app image, the rest of UI is from activity, but I know that's not the problem, so won't add the xml for that)
<?xml version="1.0" encoding="utf-8"?>
<layout
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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.order.OrderBuildFragment"
>
<com.google.android.material.tabs.TabLayout
android:id="#+id/order_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:layout_constraintBottom_toTopOf="#+id/order_viewpager"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<androidx.viewpager.widget.ViewPager
android:id="#+id/order_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#android:color/white"
app:layout_constraintTop_toBottomOf="#id/order_tabs"
app:layout_constraintBottom_toTopOf="#id/build_order_bottom_toolbar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
</androidx.viewpager.widget.ViewPager>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/build_order_bottom_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/order_viewpager"
app:layout_constraintBottom_toBottomOf="parent"
android:background="?attr/colorPrimary"
>
<TextView
android:id="#+id/order_service_point_spinner_label"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/service_point"
android:textColor="#color/white"
app:layout_constraintEnd_toStartOf="#id/order_toolbar_service_point_spinner"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/build_order_guideline_service_point_and_action_buttons"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="8dp"
/>
<androidx.appcompat.widget.AppCompatSpinner
android:id="#+id/order_toolbar_service_point_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/build_order_guideline_service_point_and_action_buttons"
app:layout_constraintStart_toEndOf="#id/order_service_point_spinner_label"
android:layout_marginEnd="8dp"/>
<androidx.constraintlayout.widget.Guideline
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/build_order_guideline_service_point_and_action_buttons"
app:layout_constraintGuide_percent="0.5"
/>
<TextView
android:id="#+id/order_textView_price"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="#{#string/currency_symbol + viewModel.price}"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/order_toolbar_button_more"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/build_order_guideline_service_point_and_action_buttons"
tools:text="$999.99"
/>
<Button
android:id="#+id/order_toolbar_button_more"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="moreButtonAction"
android:text="#string/more"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/order_toolbar_button_send"
app:layout_constraintStart_toEndOf="#id/order_textView_price"
app:layout_constraintTop_toBottomOf="#id/build_order_guideline_service_point_and_action_buttons"/>
<Button
android:id="#+id/order_toolbar_button_send"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="sendButtonAction"
android:text="#{viewModel.sendButtonText}"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/order_toolbar_button_more"
app:layout_constraintTop_toBottomOf="#+id/build_order_guideline_service_point_and_action_buttons"
tools:text="#string/send"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.core.widget.ContentLoadingProgressBar
android:id="#+id/build_order_progress_bar"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="#{safeUnbox(viewModel.loading)}"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
My Linear layout solution simply included replacing ConstraintLayout with a LinearLayout, removing all constraints from child elements and adding orientation: "vertical" (of course) plus putting layout_weight: 1 in the ViewPager element. If that helps anyone.
My guess is that you are using androidx.constraintlayout:constraintlayout:2.0.0-beta2.
This specific version is known to cause issues like this.
Update to the latest version ('androidx.constraintlayout:constraintlayout:2.0.0-beta6' at the time of writing).
I am trying to include text in my layout but it doesn't show up in Design or Blueprint. In Blueprint, it just shows up as a dot (encircled in red in the picture). I tried opening the default text in the "hello world" app which works on my phone, but the same problem occurs in the layout in Android Studio.
I am following the guide at this link : https://developer.android.com/training/basics/firstapp/building-ui.
I've included a screenshot for reference. If this helps, please note that the emulator is not running in Android Studio and the layout / design screen does not display fully in the window when I select Pixel XL 5.5 screen (it's too large and I can't scroll down to see it).
I also do not get the square box in the Blueprint as shown in figure 3 of the webpage (link above). Screenshot of Android Studio
EDIT : Following is the code for my activity_main.xml file -
<?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="36dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="32dp"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:text="TextView"
app:layout_constraintDimensionRatio="h,1:3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Your code has a couple of issues. You're using ConstraintLayouts, but you're constraints are a little mixed up. In the first TextView, you have your topToTopOf constraint set to parent, which is fine, but your bottom constraint is also set to topOf parent. Change your bottom constraint to bottomToBottomOf parent. Like this:
<TextView
android:id="#+id/textView"
android:layout_width="36dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
In your second TextView, you're using dimensionRatio wrong. It states in the ConstraintLayout docs that you can only use this attribute with H or W if both of your width and height are set to MATCH_CONSTRAINT (aka 0dp). So for example, you've set the dimensionRatio to h,1:3, but this only works if your width is set to 0dp (aka MATCH_CONSTRAINT). You should either make the width 0dp, set the height explicitly, or change your dimensionRatio to 1:3 rather than h,1:3
everyone
I am a beginner. I tried to use ConstraintLayout with Android studio 3.1.1 and genymotion. when I run the project on genymotion emulator, It is different from what I have coded. Images FYI.
Each component needs to be constrained to be able to display correctly. I think you should do it. Because some TextView components seem to have no constraints
For Constrain Layout, You can to pull all point from the box of your TextView (for example)to top, bottom, left and right to remain it in the position. It could takes sometimes if have lots of button or textView or what so ever.
ConstrainLayout
sampleCode
<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">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.32" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="16dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
You have to pull the line from the dot of the box to everyside so it could stay at the position.
Since you are a beginner, I think You can consider LinearLayout.
As LinearLayout, it is align those textView and button or anything inside in arrangement. As long as You it in vertical or horizontal.
Example
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
....
//Edit your layout
</LinearLayout>
Another good layout for beginner is RelativeLayout
RelativeLayout you can drag and drop the textView or button or what so ever to the layout.
Example
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
....
//Edit your layout
</RelativeLayout>
U have to keep edit and arrange until the design is what you like.
However, I believe there is a lot of tutorial You can learn from Youtube. Check it Out.
I am creating my first app with android studio and this is my first problem:
I want to try the ConstraintLayout. I have built the layout with a ConstraintLayout with the Design Editor (clicking it together). When i try the layout in Android Emulator, all Buttons have moved in the left upper corner :(
Except the "Hello World" Label which was generated automatically when i created my first project.
The difference between the Label and the Button is, that some code lines beginning with app:layout_constraint.... are missing. You can see it in Code.
What am I doing wrong, or is it a bug?
I would be glad for an answer! :)
<?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="com.example.u0017007.coffeecounter.MainActivity">
<TextView
android:layout_width="136dp"
android:layout_height="30dp"
android:text="Hello World!"
android:textSize="24sp"
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.234" />
<Button
android:id="#+id/buttonAddCoffee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:freezesText="false"
android:text="#string/add_coffee"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="231dp" />
<Button
android:id="#+id/buttonRemoveCoffee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/remove_coffee"
tools:layout_editor_absoluteX="236dp"
tools:layout_editor_absoluteY="231dp" />
</android.support.constraint.ConstraintLayout>
tools:layout_editor_absoluteX and tools:layout_editor_absoluteY are only used for preview, like all tools:XXXX.
You need to add constraints to your view. You can add in the XML or you can do it with the visual editor.
There is a very good website that explain all about ConstraintsLayout.
By the way, Android Studio warm you with a error This view is not constrained, it only has designtime positions, so it will jump to (0,0) unless you add constraints if you don't set constraints.
It seems from the above code that, you didn't added any constraints to buttons thats why they moved to left upper corner.
<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">
<TextView
android:layout_width="136dp"
android:layout_height="30dp"
android:text="Hello World!"
android:textSize="24sp"
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.234" />
<Button
android:id="#+id/buttonAddCoffee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:freezesText="false"
android:text="ADD coffee"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="276dp"
app:layout_constraintRight_toLeftOf="#+id/buttonRemoveCoffee"
android:layout_marginRight="82dp"
android:layout_marginLeft="24dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintHorizontal_bias="1.0" />
<Button
android:id="#+id/buttonRemoveCoffee"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="remove coffee"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="276dp"
android:layout_marginRight="24dp"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>
Please refer to bellow link -
https://www.youtube.com/watch?v=z53Ed0ddxgM
tools:layout_editor_absoluteX="236dp"
tools:layout_editor_absoluteY="231dp"
These are used by studio to render in Graphic editor only. During run time,
as constraints are not set, the views take default position(0,0).
Try setting some constraints on buttons and procedd
I am new to Android Studio, when I created my app all my elements overlapped on each other. I am not sure how to edit this code. Please give me a detailed description.
Layout editor and emulator result
Code for the layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="schemas.android.com/apk/res/android";
xmlns:app="schemas.android.com/apk/res-auto";
xmlns:tools="schemas.android.com/tools";
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.first.anew.MainActivity">
<TextView
android:layout_width="216dp"
android:layout_height="60dp"
android:text="Hello World!"
tools:layout_editor_absoluteY="16dp"
tools:layout_editor_absoluteX="61dp" />
<Button
android:id="#+id/button"
android:layout_width="100dp"
android:layout_height="45dp"
android:text="Login"
tools:layout_editor_absoluteY="343dp"
tools:layout_editor_absoluteX="177dp" />
<TextView
android:id="#+id/textView"
android:layout_width="215dp"
android:layout_height="65dp"
android:text="username"
tools:layout_editor_absoluteY="117dp"
tools:layout_editor_absoluteX="61dp" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
app:layout_constraintGuide_begin="20dp"
android:orientation="horizontal" />
<EditText
android:id="#+id/editText"
android:layout_width="217dp"
android:layout_height="57dp"
android:ems="10"
android:inputType="textPassword"
tools:layout_editor_absoluteY="218dp"
tools:layout_editor_absoluteX="61dp" />
</android.support.constraint.ConstraintLayout>
Your emulator screen and the layout editor are different because of tools namespace. In a few words, it is a tool that helps you to better visualise the written code. This tool also generates constraints like tools:layout_editor_absoluteY="343dp", which inform the layout editor on how it should draw the views. The problem is that this constraints will not be present in your app code, resulting in that weird behaviour when all views are overlapped (since the above mentioned constraints are not used in the app code we can deduct that there are no constraint at all).
Since you are a beginner I would recommend to start with a LinearLayout or RelativeLayout because I think that ConstraintLayout is harder to understand, use and debug.
put the whole code. if you are using Relativelayout, this will happen. change it to Linearlayout at the top i mean the bottom most element, and put orientation as vertical
see this - for me my soltion works...
add this in xml to the button etc
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.57"
then play with it in the design.
Good luck! :)
you can click the infer Constraints buttonclick on this
and run your programme again..it will solve your problem