I cant seem to figure out why is everything not constrained inside the holder because in other insatances even though it is almost an identical code it displays everything perfectly inside the material card holder with the name age hobby picture displayed according to how I coded it but for this it just displayed a white screen and in the design I could see that nothing is constrained to the material card holder and I cant seem to figure out why is that happening.
Here is the code:
<com.google.android.material.card.MaterialCardView 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="wrap_content"
android:layout_margin="8dp"
app:cardCornerRadius="4dp"
app:cardElevation="4dp"
tools:visibility="invisible">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/item_image"
"layout stuffs"
android:scaleType="centerCrop"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent" />
<TextView
android:id="#+id/dog_name"
"layout stuffs"
android:textAppearance="#style/TextAppearance.MaterialComponents.Headline6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/item_image" />
<TextView
android:id="#+id/dog_age"
"layout stuffs"
android:textAppearance="#style/TextAppearance.MaterialComponents.Body1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dog_name" />
<TextView
android:id="#+id/dog_hobbies"
"layout stuffs"
android:textAppearance="#style/TextAppearance.MaterialComponents.Body1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dog_age" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>```
Here is the design view:
[design view of the code](https://i.stack.imgur.com/0nu0j.png)
I was expecting all of the item to be constrained inside the view so that it can be displayed. Everything should be constrained under the Material card holder and displayed accordingly. I cannot seem to find the issue, would be glad to have someone to guide me on the issue I am facing
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).
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 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!
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.
I make UI of many buttons to input text by constraint layout.
For example, the following image.
But,I feel strange that android studio become very slow as I put more UIs and adaptive hook allows I set, sometimes disappear(ex.some buttons' allow disapper head row above image).It should use very large memory and I guess free memory to calculate position and re-render UI.
Can I avoid this situation? or Alternative way to make same UI using another layout. I'm very nervous for this problem because I can't understand the best way to make grid flexible-scaling UI.Any tips will help me.
I could solve the problem using grid layout enclosing the buttons nested constraint view and it seem best way that relative positioning UI.
<?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">
<EditText
android:layout_width="456dp"
android:layout_height="64dp"
android:inputType="textPersonName"
android:text="Name"
android:ems="10"
android:id="#+id/editText"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent" />
<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:columnCount="8"
android:rowCount="5"
android:useDefaultMargins="true"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="32dp"
android:foregroundGravity="center_horizontal"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/editText"
app:layout_constraintVertical_bias="0.81">
<Button
android:text="button"
android:layout_width="88dp"
android:background="#drawable/oval_btn"
android:id="#+id/str_wa"
android:layout_height="88dp"
tools:layout_editor_absoluteY="520dp"
tools:layout_editor_absoluteX="529dp" /> ・・・・・・
And you can place what you like.