Android : Strange White Block at Top of Fragment's Layout - android

I'm now practicing creating a fragment with RecycleView
Everything looks fine besides one thing: there is a strange block on the top of the screen
My fragment.xml is as follows:
<?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:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#CDF6CF"
tools:context=".ui.start_trip.fragment_start_trip">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/create_a_trip_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_start_trip"
app:layout_constraintVertical_bias="1.0">
</androidx.recyclerview.widget.RecyclerView>
<Button
android:id="#+id/create_a_trip_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Button"
app:backgroundTint="#ED7F7F"
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.884" />
<TextView
android:id="#+id/top_start_trip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="#string/top_start_trip"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>
Is there any solution to help me get rid of this block?
Thanks, #anonymous!


set your recyclerView to
android:layout_above="#id/create_a_trip_button"
And i think using a Relative layout to enclose everything will be better

Related

Why title, description goes off the screen and date not showing properly in constrainlayout

I am developing news app and I have implemented constraint layout with card view but title description not showing and title and description goes of the screen in real device but in layout inspector in android studio it is showing fine
below my view
<?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">
<data>
<variable
name="article"
type="com.example.newsworldwide.model.Article" />
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:id="#+id/cardView2"
android:layout_width="0dp"
android:layout_height="150dp"
android:layout_marginHorizontal="16dp"
android:layout_marginVertical="8dp"
app:cardCornerRadius="12dp"
app:cardElevation="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/articleImage"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginStart="4dp"
android:elevation="16dp"
android:src="#drawable/img"
app:civ_border_width="2dp"
app:imageUrl="#{article.urlToImage}"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/articleTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="10dp"
android:layout_marginTop="24dp"
android:ellipsize="end"
android:maxLines="2"
android:text="Mini olive pies by Vaggelio"
android:textColor="#000"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.65"
app:layout_constraintStart_toEndOf="#+id/articleImage"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/articleDescription"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:ellipsize="end"
android:maxLines="6"
android:text="This is the most information savory snack that I have ever seen!!!"
android:textColor="#000"
android:textSize="12sp"
android:textStyle="italic"
app:layout_constraintStart_toStartOf="#+id/articleTitle"
app:layout_constraintTop_toBottomOf="#+id/articleTitle" />
<TextView
android:id="#+id/articleDate"
android:layout_width="wrap_content"
android:layout_height="16dp"
android:layout_marginEnd="48dp"
android:layout_marginBottom="8dp"
android:text="01.02.2022"
android:textColor="#FF9935"
android:textSize="12sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
below my recyclerview 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"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="491dp"
android:layout_height="826dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:listitem="#layout/news_item" />
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginBottom="260dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
following screenshot from layout inspector in android studio
following screenshot of the app from real device
I want to know where exactly I am making mistake what I have to do in order to show title description and date so that it can fit screen perfectly

I've made some tweaks to your xml files
RecyclerView layout should look like this:
<?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">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.506"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:listitem="#layout/news_item" />
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginBottom="260dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Your mistake was right here:
android:layout_width="491dp"
android:layout_height="826dp"
putting exact values for layout_width and layout_height is almost never a good idea when trying to build a responsive UI. Instead try using match_parent (matches the screen width) or wrap_content (takes as much space as it needs) in your layout_width/height.
Also I found one more thing wrong with news_item.xml
articleDescription TextView should have this parameter:
app:layout_constraintEnd_toEndOf="#+id/articleTitle"
this parameter will make sure, that your textView end where the parent view ends, means not going out of screen.

I think the tour item not the problem. Check the size of the RecyclerView.

Set proper constraint in Constraint Layout in Android Kotlin

I am creating a chat application. I used stackFromEnd = false and reverseLayout = true to show items from the bottom of screen. In which I used reyclerview and it's working fine, and I am adding the code below with a screenshot. How it looks likes
<?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"
android:background="#cccccc">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/conversationRecyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
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" />
</androidx.constraintlayout.widget.ConstraintLayout>
The above code is working fine when there is a single item in recyclerView it opens a screen like this
Image 1
But when there are more items the screen look like this
Image 2
Note: This above image is my expected output. Also soft keyboard shift the layout.
Now the main story starts, I want to add editText at bottom of the screen.
<?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="#cccccc">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/conversationRecyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintBottom_toTopOf="#+id/inputContainer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/inputContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#ffffff"
android:paddingStart="10dp"
android:paddingTop="14dp"
android:visibility="gone"
android:paddingEnd="10dp"
android:paddingBottom="14dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/conversationRecyclerView"
app:layout_constraintVertical_bias="1.0">
<EditText
android:id="#+id/edittext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textMultiLine|text|textNoSuggestions"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Problem 1
Image 1 is not getting the correct constraint and it looks like this
and image 2 is working fine and the soft keyboard shifts the layout.
problem 2
I tried some code to solve problem 1 and the soft keyboard is not shifting the 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="#cccccc">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/conversationRecyclerView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/inputContainer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/inputContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#ffffff"
android:paddingStart="10dp"
android:paddingTop="14dp"
android:paddingEnd="10dp"
android:paddingBottom="14dp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintVertical_bias="1.0">
<EditText
android:id="#+id/sendMessageEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
UPDATE
After #Cheticamp suggestion, I added this but not working. It has still a problem 1 issue. It's not resolving.
<?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="#cccccc">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/conversationRecyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/inputContainer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/inputContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#ffffff"
android:paddingStart="10dp"
android:paddingTop="14dp"
android:paddingEnd="10dp"
android:paddingBottom="14dp"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
>
<EditText
android:id="#+id/sendMessageEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
UPDATE 1
After #Tenfour04 suggestions, I added some code please have a look. Am I am doing correctly?
<?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="#cccccc">
<FrameLayout
android:id="#+id/conversationRecyclerViewViewWrapper"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/inputContainer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/conversationRecyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
</FrameLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/inputContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#ffffff"
android:paddingStart="10dp"
android:paddingTop="14dp"
android:paddingEnd="10dp"
android:paddingBottom="14dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/conversationRecyclerView">
<EditText
android:id="#+id/sendMessageEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:inputType="textMultiLine|text|textNoSuggestions"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

The problem is your RecyclerView's height is wrap_content instead of 0dp (a.k.a. "match_constraints"), so it ignores the constraint that it should be above inputContainer.
So instead of making it wrap_content and using vertical bias to try to keep it at the top of the screen, try wrapping it in a FrameLayout and giving it layout gravity of "top". The FrameLayout should use 0dp for height so it can fill the entire space, but not overlap inputContainer. The RecyclerView can use wrap_content for height, and the layout gravity will bias it to the top of the FrameLayout's space. So replace your RecyclerView element with this:
<FrameLayout
android:id="#+id/recyclerViewWrapper"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/inputContainer"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/conversationRecyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="LinearLayoutManager"
app:reverseLayout="true"/>
</FrameLayout>
The app:layout_constraintVertical_bias is meaningless on inputContainer because it has no top constraint, so you can remove that.

For problem #1, make the height and the width of the RecyclerView 0dp and let the constraints size it to fill the screen. Also, remove the vertical bias - you don't need it.
btw, never use match_parent in a ConstraintLayout. Always use 0dp and the constraints.
That may solve all your issues with this layout.
Update: I should have scrolled down in your layout.
I take it that you want the RecyclerView to fill the screen except for the EditText on the bottom. In general, nesting layout within a ConstraintLayout is not needed and is considered by many poor design.
Make the changes I suggest above, remove the inner ConstraintLayout and place the two views into a vertical chain like this:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#cccccc">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/conversationRecyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:paddingBottom="10dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/sendMessageEditText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/sendMessageEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="This is the EditText"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/conversationRecyclerView" />
</androidx.constraintlayout.widget.ConstraintLayout>

Is it possible to to define all my layout only with constraints?

I am trying to define the height of the constraintLayout1 30% of the available size. And the remaining for the constraintLayout2. But I want to define percentage not pixels.
The Button1 should be 50% with and the button2 the others 50%.
I want to define everything with constraints and not with fix values (as I am doing now marginBottom="500dp).
Is this possible to do in any way? I am using Android 3.6.2.
<?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">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="500dp"
android:background="#E91E63"
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.0">
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#8BC34A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout1"
app:layout_constraintVertical_bias="0.0">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
```[enter image description here][1]
[1]: https://i.stack.imgur.com/NzZwz.png

You can use layout_constraintVertical_weight and layout_constraintHorizontal_weight
<?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">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#E91E63"
app:layout_constraintBottom_toTopOf="#id/constraintLayout2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_weight="0.3">
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#8BC34A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout1"
app:layout_constraintVertical_weight="0.7">
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/button2"
app:layout_constraintHorizontal_weight="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/constraintLayout2" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHorizontal_weight="0.5"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/button1"
app:layout_constraintTop_toTopOf="#id/constraintLayout2" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Yes, an easy way to do this is Guidelines
You would basically say that you create a horizontal/vertical line at 0-100% of the width/height (in your case 30% or 50%) and then connect your buttons with that Guideline
Also it is bad practice to have multiple Constraintlayouts within eachother when not needed, you should only have one
Ask if you have any further questions

I don´t know how to move a gauge in a layout by using the margins

I have gauge in app, and I want to move it to central of page. But if I do anything, no change will occur
<?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/layout_noise"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_sc">
<com.github.anastr.speedviewlib.TubeSpeedometer
android:id="#+id/gauge"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="600dp"
/>
<TextView
android:id="#+id/tv_noise"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="500dp"
android:fontFamily="serif"
android:text="Odmeraj amotsferu"
android:textSize="36sp"
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 can see it in app:
Thanks!

You should use constraints as suggested by #Harin Kaklotar.
Change
<com.github.anastr.speedviewlib.TubeSpeedometer
android:id="#+id/gauge"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="600dp"
/>
to
<com.github.anastr.speedviewlib.TubeSpeedometer
android:id="#+id/gauge"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginLeft="600dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
You've already used these constraints in tv_noise. So I suggest you to first read up on ConstraintLayout and How to Build a Responsive UI with ConstraintLayout.

Try this...
<?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/layout_noise"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_sc">
<com.github.anastr.speedviewlib.TubeSpeedometer
android:id="#+id/gauge"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_noise"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="500dp"
android:fontFamily="serif"
android:text="Odmeraj amotsferu"
android:textSize="36sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

In which situation a view does not overlap another view?

As you may know if one tag come after another tag in xml the last one can overlap the first one.
as you can see in this example:
<?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"
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:text="Button ONE"
android:textSize="70sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Button TWO"
android:textSize="70sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
but this rule wouldn't apply if the first view have elevation (however I just tested it by TabLayout).
here is example of not overlapping first view because of elevation attribute:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:layout_width="0dp"
android:layout_height="100dp"
android:background="#09A536"
android:elevation="1dp"
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.499" />
<ImageView
android:id="#+id/imageView"
android:layout_width="453dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#D0021B"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
However I don't now what is the reason behind this.

You can find the answer in Material Design docs:
Elevation is the relative distance between two surfaces along the z-axis.
So when you are thinking about that you should imagine a 3D space like that:
When you are applying elevation you are basically pushing one View up over another, or elevating it.

Categories

Resources