I am developing an android application to display current news or events. But, starting the interface with the toolbar and the login page, I have a problem with ConstraintLayout. I do not know why but the textview and imageview are red while in RelativeLayout and LinearLayout it works.
<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.exemple.rivoramampiandra.appsname.MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Connexion"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.079" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent" />
<EditText
android:id="#+id/editText"
android:layout_width="367dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
tools:layout_editor_absoluteX="9dp"
tools:layout_editor_absoluteY="85dp" />
Seeing your code would help a lot in solving the problem, some guesses though might be:
Constraints were not added to the TextView and ImageView as each view place in the UI must be constrained to its parent or child in some way
https://developer.android.com/training/constraint-layout/index.html#add-a-constraint
If you converted the ConstraintLayout to a RelativeView or a LinearLayout. It is possible the attributes are left in the XML of the constrained attributes within the children views inside your layout. thosapp:layout_constraintBaseline_toBaselineOf="#+id/text_title"
https://medium.com/exploring-android/exploring-the-new-android-constraintlayout-eed37fe8d8f1
Hope any of this solved your problem!
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).
My layout includes:
<?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">
<Button
android:id="#+id/btnFindPOIs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:text="Find POIs"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btnGetLocation" />
<TextView
android:id="#+id/txtPoiDetails"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/btnFindPOIs" />
</androidx.constraintlayout.widget.ConstraintLayout>
When the content of TextView extends beyond one line it correctly flows to a second line but the text extends right to the edge of the screen ignoring the 16dp left and right margins.
Layout Margin affects the View object, in this case a TextView. Not the actual text inside the object. So it will still go right up against the object's edge.
I would recommend using padding, it will directly affect the text. You may also want to consider adding gravity to the object?
I would also recommend using layout weights on these views or you are going to have resizing issues!
android:paddingStart="16dp"
Cheers!
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.
This is my layout I am using for a activity.
<?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.phocast.AboutMeActivity">
<android.support.v7.widget.CardView
android:id="#+id/cv_abtme"
android:layout_width="369dp"
android:layout_height="260dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="101dp"
android:background="#color/colorPrimaryLight"
app:cardBackgroundColor="#color/bgcol_abtme"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.883">
<ImageView
android:id="#+id/imageView2"
android:layout_width="120sp"
android:layout_height="120sp"
app:srcCompat="#drawable/ic_face_black_24dp" />
<ImageView
android:id="#+id/iv1_abtme"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tv_abtme"
app:srcCompat="#drawable/about_icon_facebook" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:fontFamily="serif-monospace"
android:lineSpacingExtra="12sp"
android:text="#string/facebook_id"
android:textSize="18sp" />
<TextView
android:id="#+id/tv_abtme"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="cursive"
android:text="#string/user_name"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textSize="36sp" />
</android.support.v7.widget.CardView>
....
</android.support.constraint.ConstraintLayout>
The output looks like:
The problem is I can't move the items inside the cardview either programatically or using drag in design view of android studio.
Like, for say, I want to have
Imageview iv1_abtme(the facebook icon) below the tv_abtme
textview4 horizentally aligned to iv1_abtme
etc.
Can anyone kindly help me on what is going wrong here(why I cant simply drag items)
CardView is based on a FrameLayout and the documentation there clearly says:
Generally, FrameLayout should be used to hold a single child view, because it can be difficult to organize child views in a way that's scalable to different screen sizes without the children overlapping each other. You can, however, add multiple children to a FrameLayout and control their position within the FrameLayout by assigning gravity to each child, using the android:layout_gravity attribute.
So, to solve your problem, your CardView needs to have a single child that is a view group for your views, such as LinearLayout, RelativeLayout, or ConstraintLayout.
I have a constraint layout inside a ScrollView. This ConstraintLayout is supposed to be a parent for other Views that will be added into it, as shown:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/generated_main_constraint"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.constraint.ConstraintLayout>
When I try to add view to this ConstraintLayout, I inflate the view from XML, with the following code:
(ConstraintLayout) getLayoutInflater().inflate(R.layout.box_npcs, MAIN_CONSTRAINT, false);
This layout is defined in XML1 (end of the question).
Then I add TextViews with information to this Layout's LinearLayout, for that I use a programatically created TextView and add it into the layout
linearLayout.addView(new TextView("Foo"));
With that setup, I add this box to the main constraint layout.
The problem is: When I try to add more than 5 views, it takes a long time to proccess the UI, taking up to 5 seconds on the max amount of view to be added (50).
How can I add Complex Views to a ConstraintLayout in a way that it doesn't lag when trying to add the views?
XML1:
<?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/box_npcs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/npcImage"
android:layout_width="88dp"
android:layout_height="88dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="#+id/layoutInformation"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/layoutInformation"
app:srcCompat="#drawable/camera" />
<android.support.constraint.ConstraintLayout
android:id="#+id/layoutInformation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:maxWidth="280dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#+id/npcImage"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/top_priority"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="0dp"
android:layout_marginTop="0dp"
android:ellipsize="start"
android:text="DummyTextIsDummy"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/common_google_signin_btn_text_light_default"
android:textSize="22sp"
android:textStyle="bold"
android:typeface="normal"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="HardcodedText" />
<LinearLayout
android:id="#+id/linearLayout_high_highest_normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintLeft_toLeftOf="#+id/top_priority"
app:layout_constraintTop_toBottomOf="#+id/top_priority" />
</android.support.constraint.ConstraintLayout>
Images for examples:
Each 'box' in this screen is a box in the Main Constraint Layout.
Each TextLine is a different TextView added to the LinearLayout
What is the android version in your test device?
A few days ago, I found a problem.
If I use two or more ConstraintLayouts in Android 5 or 6, it will be slow.
When I used the Android Studio CPU Profiler, I saw the com.android.internal.policy.impl.phonewindow$decorview.onmeasure spent much time.
So I tried to use LinearLayout, and the problem was solved.
I think ConstraintLayout in Support Library is not friendly for Android 5 or 6.