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
Related
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.
Is it possible to flatten this layout (only have one ConstraintLayout outside) and preserve the following:
MaterialCardView keeps it square shape and an overall padding of 10dp
ImageView is centered over some squared View (having the background set to a filled oval achieving its cicle-look)
ImageView has a fixed ratio of width/height relative the squared View
TextView is positoned below the squared View with a vertical distance of 10dp
The squared View is centered horizontally inside (or then maybe over?) the MaterialCardView
How it looks right now and should continue to look:
The current 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="wrap_content">
<com.google.android.material.card.MaterialCardView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="10dp"
app:cardCornerRadius="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:strokeColor="#color/primaryColor"
app:strokeWidth="2dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/imageViewContainer"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/round_bg"
app:layout_constraintBottom_toTopOf="#id/textView"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent=".58"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".58"
app:tint="#color/primaryTextColor"
tools:src="#drawable/ic_qrcode" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:textAlignment="center"
android:textColor="#color/primaryColor"
android:textSize="17sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/imageViewContainer"
tools:text="ItemName" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>
Remove parent ContraintLayout, let the MaterialCardview be the parent.
Then keep only one ConstraintLayout since its required if u want to have multiple views inside MaterialCardView.
The second ConstraitLayout aka imageViewContainer can be transformed into View and still it will be pretending to be a container.
<?xml version="1.0" encoding="utf-8"?>
<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="10dp"
app:cardCornerRadius="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:strokeColor="#color/colorPrimary"
app:strokeWidth="2dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<View
android:id="#+id/imageViewContainer"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/background_rounded"
app:layout_constraintBottom_toTopOf="#id/textView"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent=".58"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".58"
app:tint="#color/gray"
tools:src="#drawable/ic_close" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:textAlignment="center"
android:textColor="#color/colorPrimary"
android:textSize="17sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/imageViewContainer"
tools:text="ItemName" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
I am trying to overlap components inside a constraint layout. I would like to have the bottom of Team One to be on top of the vs container. I was able to align it by using the app:layout_constraintVertical_bias attribute. When the keyboard expands, the component is not responsive. It will push the Team One over the vs past the point of being flush with top of the vs container.
<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/team_divider_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/team_one_name_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="200dp"
android:elevation="2dp"
app:layout_constraintEnd_toStartOf="#id/team_two_name"
app:layout_constraintHorizontal_bias=".3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/select_teams_container">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_gravity="center|end"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.textfield.TextInputEditText
android:layout_gravity="center|start"
android:id="#+id/team_one_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:focusedByDefault="false"
android:cursorVisible="true"
android:minWidth="100dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/color_picker_circle"
android:textCursorDrawable="#null"
android:text="#string/start_game"
android:inputType="textCapCharacters|textNoSuggestions"
android:textAppearance="#style/TextAppearance.MyTheme.Headline1"/>
<com.madrapps.pikolo.HSLColorPicker
android:id="#+id/team_one_color_picker"
android:layout_width="200dp"
android:layout_height="200dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias=".75"
app:layout_constraintStart_toEndOf="#id/team_one_name"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.card.MaterialCardView
android:id="#+id/color_picker_circle"
android:layout_width="50dp"
android:layout_height="50dp"
android:clickable="true"
android:focusable="true"
app:cardElevation="2dp"
app:cardBackgroundColor="#color/color_primary"
app:layout_constraintStart_toEndOf="#id/team_one_name"
app:layout_constraintEnd_toEndOf="#id/team_one_color_picker"
app:layout_constraintBottom_toBottomOf="#id/team_one_name"
app:layout_constraintTop_toTopOf="#id/team_one_name"
app:shapeAppearance="#style/ShapeAppearanceOverlay.MyApp.MaterialCardView.Circle"/>
<ImageButton
android:id="#+id/confirm_team_one_color_btn"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="#drawable/ic_check_circle_black_48dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/team_one_color_picker"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias=".25"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/team_two_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="100dp"
android:background="#null"
android:cursorVisible="true"
android:focusedByDefault="false"
android:gravity="end"
android:inputType="textCapCharacters|textNoSuggestions"
android:textAppearance="#style/TextAppearance.MyTheme.Headline1"
android:textCursorDrawable="#null"
app:layout_constraintBottom_toTopOf="#id/select_teams_container"
app:layout_constraintEnd_toEndOf="#id/select_teams_container"
app:layout_constraintWidth_percent=".25" />
<com.google.android.material.card.MaterialCardView
android:id="#+id/select_teams_container"
android:layout_width="0dp"
android:layout_height="0dp"
app:strokeWidth="2dp"
app:strokeColor="#color/color_primary"
app:shapeAppearance="#style/ShapeAppearance.MaterialComponents.MediumComponent.TeamSelectCard"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintWidth_percent=".6"
app:layout_constraintHeight_percent=".55">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/team_one_container"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/team_two_container"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/team_one_recyclerView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:nestedScrollingEnabled="false"
android:orientation="vertical"
android:overScrollMode="never"
android:weightSum="5"
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"
tools:itemCount="5"
tools:listitem="#layout/playercard_draggable" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:id="#+id/vertical_divider"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="VS"
style="#style/TextAppearance.MyTheme.Headline1"
app:layout_constraintStart_toEndOf="#id/team_one_container"
app:layout_constraintEnd_toStartOf="#id/team_two_container"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/team_two_container"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintStart_toEndOf="#id/team_one_container"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/team_two_recyclerView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="5"
android:overScrollMode="never"
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"
tools:itemCount="5"
tools:listitem="#layout/playercard_draggable" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
When I don't use vertical bias:
When I use vertical bias:
When the keyboard is expanded:
I cant do simple comments on the initial post yet.
But it look as if your team_one_color_picker view has a set height of 200, which is making the parent view not fit in the available screen correctly. Try changing that height param to be something dynamic
Also your team_one_name_container object can be a height of 0dp since it is constrained at the top and bottom.
First, set android:windowSoftInputMode="adjustNotjing" in the manifest file or through the Java code, so that your view does not change when the keyboard is in open or closed state, and then you can use translationY=-10dp or any particular dp depending on your need for Team1 to move it on to the top of vs container.
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>
Here's the code inner file activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="start"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="stop"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ff0000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
Here's the preview:
The Button is not covered.When I try replace the Button with TextView, The TextView is covered.
<?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="0dp"
android:layout_height="wrap_content"
android:text="start"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="stop"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button" />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ff0000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Here's the preview:
No information is found on the Internet. Do I have to replace the Button with a TextView, Is there any other way?
Your Buttons have a higher elevation than the View (and than the TextView). That's why it shows above the View, even when it should be drawn below by layout order.
See Buttons definition in Material Design Guidelines:
Elevation
Flat buttons: 0dp
Raised buttons: 2dp
And also the chapter on Elevation & Shadows.
So, you could set the elevation of the View to something above 2dp:
<View
android:elevation="3dp"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ff0000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
Try this you need to set android:elevation="" to your View like below code
<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="0dp"
android:layout_height="wrap_content"
android:text="start"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:elevation="1dp"
android:text="stop"
android:gravity="center"
android:textColor="#color/colorWhite"
android:textSize="15dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button" />
<View
android:elevation="4dp"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ff0000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</android.support.constraint.ConstraintLayout>
OUTPUT