I'm looking for some attributes such as layoutCenteringParent in my textView and cannot find them. I want to find that specific attribute in order to center the text (I'm following an online tutorial). I tried to follow the advice here:
Missing attributes in the layout design - Android Studio
and deleted my Android studio cache but it didn't help.
I'm a beginner so there is a good chance I'm just missing something here. I'm attaching a screenshot:
With ConstraintLayout you should constrain Textview from all four sides to center it.
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ABC"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Your best option is to use ConstraintLayout, like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="#+id/greeting"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Here is an excellent tutorial about ConstraintLayout: https://www.youtube.com/watch?v=4N4bCdyGcUc
To center text's container set all constraints as parent and remove any biases.
To center text inside container use android:gravity = "center"
Related
How can I add a button on top-end of CardView?
I have a solution but I don't like set a fixed height (ie 50dp) of button and than set margin_top (ie 25dp) of card_view.
Do you have other solutions?
<?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:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:id="#+id/card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="#dimen/corner_radius"
app:cardElevation="2dp"
app:cardUseCompatPadding="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/btn">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="#+id/view_cover"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#ddd"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
<com.google.android.material.button.MaterialButton
android:id="#+id/btn"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginEnd="#dimen/dimen_16"
android:elevation="#dimen/dimen_2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
You can do it like following
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".fragments.LibraryFragment">
<androidx.cardview.widget.CardView
android:id="#+id/my_card"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
/>
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
android:src="#android:drawable/ic_delete"
app:layout_constraintWidth_percent="0.08"
app:layout_constraintDimensionRatio="1:1"
app:tint="#color/redColor"
android:elevation="50dp"
app:layout_constraintTop_toTopOf="#id/my_card"
app:layout_constraintBottom_toTopOf="#id/my_card"
app:layout_constraintStart_toStartOf="#id/my_card"
app:layout_constraintEnd_toEndOf="#id/my_card"
app:layout_constraintHorizontal_bias="0.98"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
This will generate output like this
the image size will be based on the width of the screen which will be differ from device to device and it will resize according to it. and also it will be square due to we provided the ratio as 1:1
Looks like constraint layout doesn't allow negative margin(offset), so all you can do is workarounds.
There is another workaround, which i think is better than your example in terms of "intention". It goes like this:
Assuming your button is 50dp width/height.
Place Space element inside the constraint layout. Let's say width/height is 25dp(half of 50dp).
Align the Space element to the corner of the constraint layout. In case you want to put the button top end, then top of Space to top of constraint layout, and end of Space to end of constraint layout.
At this point, you virtually created "anchor" points where you can align other elements to, that is, the bottom and start of Space.
Align the start of the button to the start of Space, and the bottom of the button to the bottom of Space.
The button is now placed as if you would do layout_marginEnd/layout_marginBottom of -25dp.
The reason I think this is better is that the overlapping detail is no longer the constraint layout's concern, instead, it's the button and its neighboring element's.
I have a layout with two views that should behave like this:
On top is an EditText that should grow (and shrink) dynamically.
Right underneath is another view. The EditText grows until the other
View reaches the bottom of the parent layout, then it stops growing
and becomes scrollable instead.
An image that illustrates the desired behaviour can be found here (cannot upload it) :
The problem, it seems, is to limit the EditText to a certain height so it won't push the other View off the bottom of the screen. Or to give the other View an attribute that it always stays on screen, I don't know.
I tried several different approaches to solve it via xml. The one I attach simply works by limiting the number of lines in the EditText - which I would later have to change programmatically depending on device's resolution. So that's not really desirable.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/tripNotes_toolbar_layout"
layout="#layout/toolbar_details" />
<android.support.constraint.ConstraintLayout
android:id="#+id/tripNotes_constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="#style/CardStyle"
android:layout_gravity="top"
android:layout_marginLeft="#dimen/card_outer_margin_left"
android:layout_marginRight="#dimen/card_outer_margin_left">
<EditText
android:id="#+id/tripNotes_editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="#null"
android:hint="Put your notes here"
android:inputType="textMultiLine|textCapWords"
android:lines="12"
android:maxLength="1000"
android:maxLines="12"
android:minLines="1"
android:textColor="#color/grey_12"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/tripNotes_pictureGrid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tripNotes_editText"
app:layout_constraintVertical_bias="0"
app:layout_constraintVertical_weight="1"/>
</android.support.constraint.ConstraintLayout>
</LinearLayout>
The actual result is that other View is pushed off screen if number of lines in EditText is not limited, but I would prefer a solution with alyout attributes.
You can wrap the edit text into a scroll view
Your layout would look like this :
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/tripNotes_toolbar_layout"
layout="#layout/toolbar_details" />
<android.support.constraint.ConstraintLayout
android:id="#+id/tripNotes_constraintLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/CardStyle"
android:layout_gravity="top"
android:layout_marginLeft="#dimen/card_outer_margin_left"
android:layout_marginRight="#dimen/card_outer_margin_left">
<ScrollView
android:id="#+id/tripNotes_editTextContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/tripNotes_pictureGrid">
<EditText
android:id="#+id/tripNotes_editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="#null"
android:hint="Put your notes here"
android:inputType="textMultiLine|textCapWords"
android:textColor="#color/grey_12" />
</ScrollView>
<View
android:id="#+id/tripNotes_pictureGrid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/tripNotes_editTextContainer"
app:layout_constraintTop_toBottomOf="#id/tripNotes_editTextContainer"
app:layout_constraintVertical_bias="0"
app:layout_constraintVertical_weight="1"/>
</android.support.constraint.ConstraintLayout>
</LinearLayout>
Changes made :
Constraint layout height changed from match_parent to wrap_content
Edit text
removed app:layout_constraintTop_toTopOf="parent" (no longer needed since it is wrapped in scrollview)
removed maxLines, lines, minLines and maxLength attributes
Added ScrollView
Bottom View :
changed
app:layout_constraintStart_toStartOf="parent" to app:layout_constraintStart_toEndOf="#id/tripNotes_editTextContainer"
changed
app:layout_constraintTop_toBottomOf="#id/tripNotes_editText" to app:layout_constraintTop_toBottomOf="#id/tripNotes_editTextContainer"
The bottom view will be just under the Edittext and will go down until the bottom of the screen and the EditText will become scrollable
I am in the process of writing my first full Android app, and I want to center a linear layout so that the layout itself is centered, not just the content inside of the layout. I have seen through old posts that android:layout_gravity is used to do this, but as I enter that into my activity's XML, there are no suggestions, and nothing happens when fully entered.
Am I not supposed to use a linear layout to achieve this? Am I supposed to make its size match_parent and just constrain the sizes of all of its children? My idea for the layout was to constrain the size of the linear layout, center it, and have all of its children's horizontal size match_parent.
Here is my activity's XML for reference:
<?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.frc5113.combustiblescouting.MainActivity">
<LinearLayout
android:layout_width="140dp"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Team Number" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Color" />
</LinearLayout>
Your root layout is a ConstraintLayout. I don't think that supports the attribute layout_gravity. You should either use LinearLayout or use constraints relative to your root view as described here.
Try this, it makes your containt horizontal & vertical center simultaneously:
<?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"
tools:context="com.frc5113.combustiblescouting.MainActivity"
android:orientation="vertical"
android:gravity="center">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Team Number" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Color" />
</LinearLayout>
using android:gravity="center" on the LinearLayout will center it's childs not itself.
There would be the android:layout_gravity attribute which is telling the parent how this child wants to be layed out. But this needs to be supported by the Containers' LayoutParams (which is true for e.g. FrameLayout, LinearLayout...)
But Constraintlayout does not support this kind of child gravity.
Here you need to set Constraints on the child (in your case the LinearLayout) in order to place it properly.
Therefore if you want to center the LinearLayout (which would somehow be obsolete as you could center it's childs directly in the ConstraintLayout)
you can achieve this like the following:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="140dp"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<!-- content -->
</LinearLayout>
</android.support.constraint.ConstraintLayout>
I'm new to Android programming, and started using Android Studio to develop a very simple app. However, using the "Design" view in the XML file, the widgets are not being correctly placed.
See the image - there are two widgets - Button and TextView. They are positioned at different places within the "Design" view, but they show in the left top corner in the emulator.
Why is this happening?
Your button view is using tools attribute which is only work in preview not on device make sure you remove them and use appropriate attributes
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="#+id/tv"
android:text="adhfbkj"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<Button
android:text="button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/tv"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</android.support.constraint.ConstraintLayout>
I have e.g. a Textview in a Constraint Layout, which I want to be as small as the text is (wrap content):
Here is my XML:
<?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:text="This is an example Message."
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textview1"
android:background="#android:color/holo_green_light"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"/>
</android.support.constraint.ConstraintLayout>
But I want to define a minimal distance to the right edge of the screen. So if the text gets larger it currently looks like this:
But I want it to look like this:
How do I do that?
Edit:
I still have no clue.
One deleted answer suggested to try setting
android:layout_marginRight
and
android:layout_marginEnd
I tried using padding to, but with no success.
I know this is late, but it might help others looking at this.
Try adding these lines to the TextView
android:maxWidth="200dp"
android:adjustViewBounds="true"