I'm having an issue where I'm trying to constrain a button to a vertical barrier. When I drag the button's side that I want to constrain to the barrier, it doesn't seem to recognise the barrier. It doesn't snap onto it or apply any constraint after hovering onto it and letting go.
I've tried replicating a simple tutorial from YouTube, where he constrains his button to the barrier with no issue at the time stamped link: https://youtu.be/Ngz5cgLC7m4?t=180.
I'm aware you can add the barrier ID to the Button's XML's left contraint. But it doesn't exactly fix the underlying issue.
I've also checked my version's current changelog on barriers (nothing changed).
edit: here's my 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">
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="TextView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="TextView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<android.support.constraint.Barrier
android:id="#+id/barrier3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="textView5,textView4"
tools:layout_editor_absoluteX="411dp" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
tools:layout_editor_absoluteX="173dp"
tools:layout_editor_absoluteY="64dp" />
</android.support.constraint.ConstraintLayout>
Some minor problems come with the Graphical design editor like you can't be 100% sure that it didn't use absoluteX and absoluteY instead of Constraints. I always prefer the text editor because you know the code as you can see the code and modify it as you want.
So, I checked your code and saw that you're using absoluteX and absoluteY instead of Constraints for the button. You can constrain it to the barrier as
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
//These two constraints will set the position on Horizontal axis
app:layout_constraintStart_toEndOf="#id/barrier3"
app:layout_constraintEnd_toEndOf="parent"
//You should replace it as well with constraints.
tools:layout_editor_absoluteY="64dp" />
Now, as you can see I've replaced absoluteX with Start_toEndOf and End_toEndOf. Now, to set vertical constraints, I don't actually understand why is y's position 64dp, but you can do one thing. Either constrain it with Top and use it as marginTop from Top or You can use Vertical Bias.
You can replace absoluteY with this:
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0.1"
Vertical_bias 0.1 will give you similar result, it will postition your button to 10% of the screen size and it's dynamic which means it will be on same position on any screen size.
Just Change your code with this and I hope you'll have your answer. You can ask anything else if needed.
Related
I have recently started learning Android Development. I am using Android Studio and I created the XML layout file with it. But the layout is looking different on the emulator to the one I created on XML and I have no clue why it is happening.
This is the picture of my Main activity layout:
And this is the picture of my emulator:
The plain text should be below the text view but in the emulator, its position is different(I have marked the error by red).
Here is the code for the Main activity:
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="208dp"
android:text="SUBMIT"
app:layout_constraintBottom_toBottomOf="parent"
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="80dp"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="44dp"
android:text="Enter the value in kg below"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/editTextNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="number"
tools:layout_editor_absoluteX="100dp"
tools:layout_editor_absoluteY="73dp" />
I'm not sure why it is showing that way in the emulator versus the preview, but the reason that the EditText field isn't where you want it to be is because of how you have set the position of the editTextNumber field:
tools:layout_editor_absoluteX="100dp"
tools:layout_editor_absoluteY="73dp"
You are telling Android to position the field 100 pixels in and 73 pixels down from the top of the screen. Most than likely this occurred because you accidentally dragged the field slightly in the editor window, which specifies the exact pixel placement.
Instead, since you are using a ConstraintLayout, you'll want to set the location of the EditText in relation to other fields on your layout. For example, remove the two lines above and replace them with something like this:
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
I would also suggest that you name your fields on the layout with descriptions of what they represent, rather than the defaults of textView and textView2. For example, consider changing textView2 to something like weight_label_textview. It will make it much easier to know which field you are dealing with both in the layout and in your code.
As you are using constraint layout every UI item must constraint vertical and horizontally. Try adding constraints to your EditText.
Hi I need some advice/help
I am designing a app for educational purposes, but battling with different screen sizes.
I am using Android studio to create the screen layouts.
What I did so far works well up and until a point.
I have tried to use constraint layout / Linear layout and relative layout but all have the same issues.
I create my main layout as normal, and then I create new layout resource files with the same activity name but with different densities.
But for some odd reason some of my test phones picks up the certain density layout but is completely out of proportion, even though it looks correct on the layout on the IDE but the minute it is ported to the phone its out.
What would be the best way to create layouts that can cater for all layouts?
here is an example of the layout I have
<?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=".login.LoginActivity"
android:background="#drawable/background"
android:padding="10dp">
<TextView
android:id="#+id/tv_appName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="250dp"
android:layout_marginEnd="8dp"
android:text="#string/app_name"
android:textColor="#color/colorAccent"
style="#style/Base.TextAppearance.AppCompat.Headline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:textAlignment="center"
android:textStyle="bold"
android:textSize="28dp"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="50dp"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_appName"
android:background="#drawable/input_shape"
android:padding="15dp"
android:textColorHint="#color/colorAccent"
android:textColor="#color/colorAccent"
android:id="#+id/edittext1"
android:singleLine="true"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="50dp"
android:ems="10"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/edittext1"
android:background="#drawable/input_shape"
android:padding="15dp"
android:textColorHint="#color/colorAccent"
android:textColor="#color/colorAccent"
android:id="#+id/edittext2"
android:singleLine="true"/>
<Button
android:id="#+id/btn_button1"
android:layout_width="134dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:layout_constraintStart_toStartOf="#+id/edittext2"
app:layout_constraintTop_toBottomOf="#+id/edittext2"
android:background="#drawable/btn_shape"
android:text="Button 1"/>
<Button
android:id="#+id/btn_button2"
android:layout_width="134dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toEndOf="#+id/edittext2"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toEndOf="#+id/btn_button1"
app:layout_constraintTop_toBottomOf="#+id/btn_button1"
android:background="#drawable/btn_shape"
android:text="Button 2"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
I am pretty sure that you are using a fixed size for your views.
Never use a fixed size for a view. If you are using a ConstraintLayout then set the layout_width and layout_height of any view to either 0dp (which will make the view as big as it can be as long as it doesn't go past the constraints) or wrap_content (which will automatically make the view only the size it needs). On other layouts instead of using 0dp for making the view as big as it can be, use match_parent. wrap_content does the same thing in every layout.
I want to add constrainlayout only two the last two floating action button with nested framelayout. any help would be highly appreciated. My main idea is to able to move and position the floating action button from graphical user interface.
I have notice that android gravity help to put button at right and the center from right with
android:layout_gravity="right|center"
how can i add a button at right but between center and end at bottom.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#000000"
tools:context=".MediaPresentationActivity"
android:id="#+id/FrameLayout">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<VideoView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/videoViewPresentation"
android:layout_gravity="center" />
<ImageView
android:id="#+id/imageViewPresentation"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="left|top"
android:background="#ffffff"
android:src="#drawable/serv24logobig" />
</FrameLayout>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>
</LinearLayout>
//*how to add only below two floating action button as constrainlayout //
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="right|center"
android:src="#android:drawable/stat_sys_phone_call"
android:visibility="visible"
app:backgroundTint="#android:color/holo_red_dark"
app:elevation="12dp"
app:rippleColor="?android:attr/colorActivatedHighlight" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="right|center"
android:src="#android:drawable/stat_sys_phone_call"
android:visibility="visible"
app:backgroundTint="?android:attr/colorMultiSelectHighlight"
app:elevation="12dp"
app:rippleColor="?android:attr/colorActivatedHighlight" />
</FrameLayout>
FrameLayouts only allow ONE child (well they allow N children, but they overlap, because it doesn't support children positioning, rather it expects them to take all the available space), so if you want to use a ConstraintLayout to position two items inside a FrameLayout, then you need to ensure that the children of your FrameLayout, is a ViewGroup that allows positioning of its own children.
Let's see what you got.
Your Root is a FrameLayout, perhaps you should consider making it a ConstraintLayout to begin with...
You're asking your Root layout to wrap its contents. Unless this is a custom view, this is somewhat frowning, but not wrong; since I don't know how you're using this, it's hard to tell if this is the correct approach in this case.
I don't know how your UI should look, but from what I see, you have a series of nested LinearLayouts, Vertical, then Horizontal to have an ImageView and a VideoView... not sure how you expect these to be positioned.
Down Below you have an empty LinearLayout... (?)
and then you tossed the two FABs.
This is not going to work. I suggest you revisit your entire Layout (which, btw, is incorrect as pasted, because you're closing the FrameLayout twice...).
If you post an image of what your desired output is, perhaps we can help you better understand where your problem is. As it is, it's not possible to determine.
The answer to your question, as written at this time is:
"How can I add a constraint Layout onlo to the last two FABs?"
You can't (for the purposes I think you want), but if you really want to see why, and what would happen:
Simply add, inside your FrameLayout this:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<!-- YOUR FABS GO HERE -->
</androidx.constraintlayout.widget.ConstraintLayout>
This will obviously NOT LOOK THE WAY YOU WANT, but that's why I asked you in the comment above, "show us what you want, we need a minimal reproducible example of what you need".
There was a reason why I asked that, not to annoy you, but to help you. You chose to ignore it, and that's as far as I can go to help you with the information I have.
On this topic, I've been going round in circles and have totally confused myself.
I want to create a layout which has 3 components, stacked vertically. The first should be at the top of the screen, and take up however much space it needs (this will increase and decrease as things in it are clicked). The third should be at the bottom and is a fixed size (Google Ads). The one in the middle should take up the remaining space.
I currently have (wrapped in a ConstraintLayout):
<android.support.constraint.ConstraintLayout
android:id="#+id/cl_create_chart"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/fragment_charts_list"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
... contents of layout ...
</ConstraintLayout>
<fragment
android:id="#+id/fragment_charts_list"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/cl_create_chart"
app:layout_constraintBottom_toTopOf="#+id/au_adView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:layout="#layout/fragment_charts_list" />
<com.google.android.gms.ads.AdView
android:id="#+id/au_adView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_gravity="bottom"
ads:adSize="SMART_BANNER"
ads:adUnitId="..."
ads:layout_constraintBottom_toBottomOf="parent"
ads:layout_constraintEnd_toEndOf="parent"
ads:layout_constraintStart_toStartOf="parent" />
I'm meant to add in some vertical weighting, right? But nothing I try is making any difference - the first bit is floating down the screen so there's blank space above it. Can someone either give me a quick answer or point me to a tutorial that explains how to achieve this? I've read the Android docs, but can't find anything that includes 'filling the leftover space'.
To fill the screen with your three views as you wish, do the following:
Top view: width="0dp" (fill screen width); height="wrap_content" (Will let it grow/shrink as needed)
Middle view: width="0dp"; height = "0dp" (Fill space within top/bottom constraints.)
Bottom view: width="0dp"; height="wrap_content" (Really a fixed size due to nature of the content)
Here is a demo of these concept. I changed a few things around, made a fragment into a generic View, for instance, but the concepts are the same.
And the XML for this image:
<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.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cl_create_chart"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/fragment_charts_list"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/lorem_ipsum"
android:textSize="20sp" />
</android.support.constraint.ConstraintLayout>
<View
android:id="#+id/fragment_charts_list"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/holo_blue_light"
app:layout_constraintBottom_toTopOf="#+id/au_adView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cl_create_chart" />
<com.google.android.gms.ads.AdView
android:id="#+id/au_adView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
I will also point out that you have "ads" as a namespace prefix when you need an "app" prefix for the constraint layout in the Adview.
I am new to both Stack Overflow and Android Studio and learning to code now.
I did a basic user and password layout in Android Studio like this:
When I ran this on emulator, it displays the widgets like this:
I tried to change the width of the EditText fields, buttons, but nothing I have tried seems to be working.
How do I solve this?
What am I missing or am I doing something wrong ?
Layout 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="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="233dp"
android:scaleType="fitStart"
android:visibility="visible"
app:srcCompat="#drawable/worldcurrency" />
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Enter ammount"
android:textSize="18sp" />
<EditText
android:id="#+id/dollar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="numberDecimal" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="convert"
android:text="Convert" />
<TextView
android:id="#+id/rupees"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Your layout's parent is a ConstraintLayout, but it's lacking every constraint. ConstraintLayout is characterised by the ability to set constraints to every view, forcing its behaviour across screens of different sizes and orientations.
If you really want to use a ConstraintLayout I suggest taking a look at the ConstraintLayout Documentation. Once you've properly set the constraints, you should have an xml like this (note the constraint* attributes in my Views.
So, your layout has no constraints, it's likely it will end at "random" positions. Moreover, you've set the views coordinates with tools, which is valid only for the layout preview, not for runtime. And moreover, the use of absolute coordinates is very not recommended, since it can cause problems across different screen sizes.
If ConstraintLayout is an optional choice for you, you can change the layout parent to a LinearLayout with vertical orientation, I think it's more suitable for the layout you're building (I'm assuming this by your screenshots).Hope I helped, let me know. Good luck and happy coding!