I know this question has been asked many times. However all the answers I have tried to find have failed me. I want the textview to appear on top of the constraint layout but every time I try to run the application I just see the web view vidged which is connected to the constraint layout.
The last solution I tried was to reduce elevation of the layout to 1dp and increase elevation of the TextView to 2dp.
<?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:background="#drawable/green_border_background" android:elevation="1dp">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="top"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:elevation="2dp"
android:id="#+id/textView2"
tools:text="0"
android:textSize="30sp"
/>
At the moment I do not care if the textview is centered, vertically below or vertically above the layout. I just want it to be visible. It is under the layout (Z vise) and thereby invisible. Elevation is the problem I am facing.
<?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:textSize="25sp"
android:layout_marginStart="50dp"
android:text="Title"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
This code place the TextView on the top of the ConstraintLayout
Just check the ConstraintLayout.
Read the "Adjust the constraint bias" part, try to set the
app:layout_constraintVertical_bias="0"
Related
i looking to align to the top of screen a simple image with ConstraintLayout. I just tried:
<ImageView
android:id="#+id/imagecookie"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/before_cookie"
app:layout_constraintTop_toBottomOf="parent" />
The pict is positionning in the middle of screen.
Any help?
Thanks
You're setting the top of your ImageView to the bottom of the parent (ConstraintLayout), you need to set it to the top
EDIT Sample with the whole 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="#color/colorPrimary"
tools:context=".MainActivity">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Result
Thank for you time and help but it still not positioned at the top of screen.
i put my picture at the top of the screen (and middle horizontal) with:
<ImageView
android:id="#+id/imagecookie"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/suzuki"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
So I was learning to implement RecyclerViews along with CardViews. I'm finding that these individual CardViews have a lot of space between them. Here's the XML code for the RecyclerView as well as the CardView.
activity_main.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"
android:background="#android:color/transparent">
<TextView
android:id="#+id/bannerId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="10dp"
android:text="#string/favorite_artists_text"
android:textSize="27sp"
android:textAlignment="center"
android:fontFamily="#font/montserrat_alternates_bold"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/RecyclerView"
android:layout_height="match_parent"
android:layout_width="match_parent"
app:layout_constraintTop_toBottomOf="#id/bannerId"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#android:color/transparent"
android:layout_marginTop="65dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
layout_listitems.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/primaryCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardMaxElevation="1dp"
app:cardElevation="1dp">
<RelativeLayout
android:id="#+id/housingRelativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="3dp">
<TextView
android:id="#+id/rank"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/old_standard_tt_bold"
android:text="#string/sample_rank"
android:textAlignment="center"
android:textSize="27sp" />
<View
android:id="#+id/separator_line"
style="#style/separator_line"
android:layout_below="#id/rank"/>
<TextView
android:id="#+id/songName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/separator_line"
android:layout_marginTop="15dp"
android:text="#string/sample_song_name"
android:textSize="17sp"
android:fontFamily="#font/varela_round"/>
<TextView
android:id="#+id/artistName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/songName"
android:text="#string/sample_artist_name"
android:textSize="17sp"
android:fontFamily="#font/varela_round"/>
</RelativeLayout>
</androidx.cardview.widget.CardView>
I checked out a few other answers here in Stack Overflow and one of them said that adding these lines:
app:cardMaxElevation="1dp"
app:cardElevation="1dp"
would fix the issue. But, it did nothing.
because you are using android:layout_margin="10dp" for cardView which mean you will add 10dp space all sides, the first item has now 10dp top & bottom, when adding the second item for recyclerView will add another 10dp on top so, now the second item has 20dp margin space.
How to fix?
you can set margins using top, start and end only.
Just like Moustafa EL-Saghier's solution, by putting this line of code in your XML
android:layout_margin="10dp"
You are basically telling the program to put 10dp worth of space in between all of your cards in the RecyclerView, including the sides.
For a horizontal RecyclerView, you would want to put:
android:layout_marginStart ="10dp"
android:layout_marginEnd = "10dp"
This will put space in between the cards on the left and right hand sides.
For a vertical Recyclerview, you would want to put:
android:layout_marginTop ="10dp"
android:layout_marginBottom = "10dp"
This will put space in between the cards on the top and bottom sides.
Again, this is just like Moustafa EL-Saghier's answer, just in a way that addresses your Cardview needs in simple code bits. Hope this helps!
I'm having a weird bug. I really don't know why.
So, on the editor, my constraints work just as I want. But on the phone, they don't.
Pictures (I don't have enough reputation to show images..):
android studio
phone problem
Code:
<?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">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
tools:context=".fragments.home.HomeFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="some text"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</layout>
Thank you in advance!
Have you tried setting the ConstraintLayout height to "match_parent"?
It seems like you restrict it to the combined height of the TextViews.
Also, you shouldn't set BottomToTop and TopToBottom in such a way, one should depend on the parent. You can easily do it by selecting both views in the editor, right clicking the choosing Chain Vertically.
Never mind, just found the problem.
Both width and height need to be match_parent on the NavHostFragment in activity_main.xml.
<!-- navigation fragment -->
<androidx.fragment.app.FragmentContainerView
android:id="#+id/navHostFragment"
android:name="androidx.navigation.fragment.NavHostFragment"
app:defaultNavHost="true"
app:navGraph="#navigation/navigation"
android:layout_height="match_parent"
android:layout_width="match_parent" />
For the sake of simplicity, let's say I've got two text views A and B. A is a set size with a set margin between it and the parent. B is a variable size.
The goal is to position B centered below A if it fits but not have B go off the screen.
Here's the xml I've currently got for the two elements:
<?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">
<TextView
android:id="#+id/element_A"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="12dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:text="elem_A"/>
<TextView
android:id="#+id/element_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#id/element_A"
app:layout_constraintEnd_toEndOf="#id/element_A"
app:layout_constraintTop_toBottomOf="#id/element_A"
android:text="sml"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The image below shows three figures: left is what I'm seeing when element B is small enough (great), middle is what I'm seeing when element B is too big (not good), and right is what I want to see when element B is too big.
As it turns out, switching from ConstraintLayout to LinearLayout actually fixes this problem. I'm still curious if this is possible using ConstraintLayout but for now I'll just use LinearLayout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="12dp"
android:layout_marginEnd="12dp"
android:layout_gravity="end"
tools:context=".MainActivity">
<TextView
android:id="#+id/element_A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:gravity="end"
android:layout_weight="1"
android:text="elem_A"/>
<TextView
android:id="#+id/element_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:layout_weight="1"
android:text="much much longer element B"/>
</LinearLayout>
First create LinearLayout and set orientation to horizontal And again you need to create child LinearLayout and wrap both text feilds into it and set it's layout_gravity to right also set orientation to vertical. After that you need to distribute weight of LinearLayout into both of text feilds equally and also set gravity and layout_gravity to center for both text feilds . Tip :- don't use hard-coded values,instead use match_parent / wrap_content for all elements.
I have made changes to your code, cop-paste all code to your xml file...
<?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">
<TextView
android:id="#+id/element_A"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginTop="32dp"
android:text="elem_A"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="#+id/element_B"
app:layout_constraintStart_toStartOf="#+id/element_B"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/element_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:text="sml"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
tools:layout_editor_absoluteY="88dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
I'm using the new Constraint layout to build my layout. I need to have Button that occupies almost the entire screen width and that was easy using constraints.
As you can see in the image I am setting the width to 0dp (Any size), but the text don't stick at the center what's usually the normal for a button text.
I've tried:
- set gravity to center
- set textAlignment to center
Looks like this properties can't work with 0dp width (Any size).
So I've tried to set the width to match_parent using gravity center.
It's a little bit to the right.
Does any one know how to fix that behavior ?
Note that i'm using alpha4
compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha4'
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:id="#+id/content_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="br.com.marmotex.ui.LoginActivityFragment"
tools:showIn="#layout/activity_login">
<Button
android:text="Log in"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/btLogin"
android:layout_marginTop="48dp"
app:layout_constraintTop_toBottomOf="#+id/textView6"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="#+id/content_login"
android:layout_marginRight="16dp"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="#+id/content_login"
android:layout_marginLeft="16dp"
android:textColor="#android:color/white"
android:background="#color/BackgroundColor" />
</android.support.constraint.ConstraintLayout>
EDIT It was a bug in ConstraintLayout alpha4.
UPDATE Google has released alpha5, the above code now Works.
Release note
It's a little bit to the right.
I think margin(s) is causing these. And its not only affecting Buttons, in my experience. Margin is screwing TextInputEditText too.
Below is a working code but please pay attention to android:layout_width="match_parent" on the Button. Any time I clicked in the editor, it will change to android:layout_width="0dp", and ruin the button alignment.
<?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=".MainActivity">
<Button
android:id="#+id/button_survey"
android:layout_width="match_parent"
android:layout_height="52dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="#+id/activity_main"
app:layout_constraintLeft_toLeftOf="#+id/activity_main"
app:layout_constraintRight_toRightOf="#+id/activity_main"
app:layout_constraintTop_toTopOf="#+id/activity_main"
tools:text="#string/main_activity_btn_survey"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp" />
</android.support.constraint.ConstraintLayout>
Inspired by Hobo joe's solution, below is the way i prefer to did it. His solution is working but still need to use padding to create spacing. If margin was used instead, the alignment of button's text will go slightly to the right. So I used padding on LinearLayout(or ConstraintLayout) instead of margin on button.
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="#+id/activity_main"
app:layout_constraintTop_toTopOf="#+id/activity_main"
app:layout_constraintRight_toRightOf="#+id/activity_main"
app:layout_constraintBottom_toBottomOf="#+id/activity_main"
android:padding="16dp">
<Button
android:text="Button"
android:layout_width="match_parent"
android:layout_height="52dp"
android:id="#+id/button_survey"
android:layout_weight="1"
tools:text="#string/main_activity_btn_survey"
/>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Have you tried ?
android:textAlignment="center"
This works for me.
This is a bug. However, you can work around it by placing the button inside a LinearLayout (Or other standard ViewGroup). Set the parent view and the button width to match_parent, and move whatever constraints you had on the button to the parent layout.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="#+id/parent_left"
app:layout_constraintTop_toTopOf="#+id/parent_top"
app:layout_constraintRight_toRightOf="#+id/parent_right">
<Button
android:id="#+id/test"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Centered Text"/>
</LinearLayout>
Well I think its because of these constraints
app:layout_constraintRight_toRightOf
app:layout_constraintLeft_toLeftOf
replace your current button with this one :
<Button
android:text="Log in"
android:layout_width="match_parent"
android:layout_height="48dp"
android:id="#+id/btLogin"
android:textColor="#android:color/white"
android:background="#color/BackgroundColor"
android:gravity="center"
android:textAlignment="center"
android:layout_marginTop="100dp"
tools:layout_editor_absoluteX="-1dp"
app:layout_constraintTop_toBottomOf="#+id/textView6" />
Hope this will help.
It seems that the issue is with android:layout_width="match_parent" when using inside ConstraintLayout.
Just set android:layout_width="0dp" and add constraints app:layout_constraintStart_toStartOf="parent" & app:layout_constraintEnd_toEndOf="parent", it'd just work fine.
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Continue"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />