So I am new to Kotlin, so I realize this may be a bit basic, however, I've done a lot of searching and tried a few different things and not yet having any luck.
So I've got a simple layout I'm aiming for, with the main area a "chess-like" board of cells. I've managed to get everything together and all runs fine, however, when I try to implement resizing things (to accomodate different sized devices/resolutions/etc), I can't seem to figure out exactly how to handle that.
This is a simplified version of what I'm trying to do:
As seen in the image, I have some "items" on the right side of the screen that will take up some space, however, the primary driving item will be the main playing board (for now, that grid of 4x4 buttons).
Explaining it in plain English, I'd like it to:
position the 2 status bars (green/blue ones) on top/bottom edges as shown.
Grid (a FrameLayout holding a TableLayout), is constrained to the top/bottom of these status bars, so the Height should be "set" to that difference. I need to determine the size of each cell ( ie height used by the FrameLayout divided by # of "rows" ).
To make/keep the grid cells "square", I need to resize the widths to match that of their height. I'm trying to set the Framelayout width to that. (in my final version the grid is not actually square, eg 4x6 - but keep in mind, the grid is a fixed size - it's not dynamic, it's just the size of the cells I need to adjust for changes in resolution)
the status bar widths should match the FrameLayout width, once done. They have been constrained to the end of the FrameLayout.
the big textView in Bottom right will use up whatever width is left. It has also been constrained to the end of the FrameLayout.
I've tried to constrain the right side of the FrameLayout (to parent/screen -200), I've also tried setting it to fix width (then adjust).
I've tried some other things like Linear layouts, and had no success with any option.
Here's the activity_main.xml for this sample:
<?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="#515151"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#4CAF50"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/frLay01"
app:layout_constraintStart_toStartOf="parent">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="6dp"
android:layout_weight="1"
app:cardCornerRadius="8dp">
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp"
android:text="TextView" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="6dp"
android:layout_weight="2"
app:cardCornerRadius="8dp">
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp"
android:text="TextView" />
</androidx.cardview.widget.CardView>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#2196F3"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="#+id/frLay01"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="6dp"
android:layout_weight="1"
app:cardCornerRadius="8dp">
<TextView
android:id="#+id/textView12"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp"
android:text="TextView" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="6dp"
android:layout_weight="2"
app:cardCornerRadius="8dp">
<TextView
android:id="#+id/textView13"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp"
android:text="TextView" />
</androidx.cardview.widget.CardView>
</LinearLayout>
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_margin="6dp"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/frLay01">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp"
android:text="TextView" />
</androidx.cardview.widget.CardView>
<FrameLayout
android:id="#+id/frLay01"
android:layout_width="500dp"
android:layout_height="0dp"
android:layout_marginTop="6dp"
android:layout_marginEnd="200dp"
android:layout_marginBottom="6dp"
app:layout_constraintBottom_toTopOf="#+id/linearLayout2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout">
<TableLayout
android:id="#+id/tblLay01"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:id="#+id/imageButton00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/checkbox_off_background" />
<ImageButton
android:id="#+id/imageButton01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/checkbox_off_background" />
<ImageButton
android:id="#+id/imageButton02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/checkbox_off_background" />
<ImageButton
android:id="#+id/imageButton03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/checkbox_off_background" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:id="#+id/imageButton10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/checkbox_off_background" />
<ImageButton
android:id="#+id/imageButton11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/checkbox_off_background" />
<ImageButton
android:id="#+id/imageButton12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/checkbox_off_background" />
<ImageButton
android:id="#+id/imageButton13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/checkbox_off_background" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:id="#+id/imageButton20"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/checkbox_off_background" />
<ImageButton
android:id="#+id/imageButton21"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/checkbox_off_background" />
<ImageButton
android:id="#+id/imageButton22"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/checkbox_off_background" />
<ImageButton
android:id="#+id/imageButton23"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/checkbox_off_background" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:id="#+id/imageButton30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/checkbox_off_background" />
<ImageButton
android:id="#+id/imageButton31"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/checkbox_off_background" />
<ImageButton
android:id="#+id/imageButton32"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/checkbox_off_background" />
<ImageButton
android:id="#+id/imageButton33"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/checkbox_off_background" />
</TableRow>
</TableLayout>
</FrameLayout>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:layout_marginEnd="40dp"
android:text="Button"
android:textColor="#FFFFFF"
app:backgroundTint="#0920A3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
and the MainActivity.kt I'm trying is:
package com.example.test1
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.view.ViewTreeObserver
import android.widget.FrameLayout
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
fun try1 () {
var frLay = findViewById ( R.id.frLay01 ) as FrameLayout
var cellSize = frLay.height / 8
// frLay.getLayoutParams().width = cellSize * 8
Log.i("Test: try1", "cellSize = " + cellSize)
}
fun try2 () {
var frLay = findViewById ( R.id.frLay01 ) as FrameLayout
var cellSize = frLay.getLayoutParams().height / 8
// frLay.getLayoutParams().width = cellSize * 8
Log.i("Test: try2", "cellSize = " + cellSize)
}
fun try3() {
var frLay = findViewById ( R.id.frLay01 ) as FrameLayout
var cellSize : Int = 0
val viewTreeObserver: ViewTreeObserver = frLay.getViewTreeObserver()
if (viewTreeObserver.isAlive) {
viewTreeObserver.addOnGlobalLayoutListener(object :
ViewTreeObserver.OnGlobalLayoutListener {
override fun onGlobalLayout() {
frLay.getViewTreeObserver().removeOnGlobalLayoutListener(this)
cellSize = frLay.getHeight() / 8
}
})
}
// frLay.getLayoutParams().width = cellSize * 8
Log.i("Test: try3", "cellSize = " + cellSize)
}
try1()
try2()
try3()
}
}
Every time I run, I can't seem to get a Height for the FrameLayout .. it always comes back as 0. (which makes sense, since it's set to constrained) (I also tried measuredHeight .. also shows 0)
How should I be adjusting the size of this grid ?
or is there some sneaky way to setup the constraints to do it properly with everything set to "match parent" ??
[edit]
this is basically what I'm aiming for .. this is the closest I've gotten:
Board flush with left side, squares of the board are "square", board flush with top/bottom status bars.
width resizes to keep cells square, and status bars match.
Textview on right uses up whatever area is left.
I managed the above using a Recylerview, setting
app:layout_constraintDimensionRatio="W,3:4"
unfortunately, I had to manually hardcode the cell size in Adaptor class
(I was following this tutorial at the time and modifying to my ends:
https://www.youtube.com/watch?v=C2DBDZKkLss
[/edit]
I think actually you should do the game board grid in a separate layout file and then put in the main layout using <include>. This is way easier for manipulating it independently.
I used the below ConstraintLayouts to create this. I don't know what your grid elements are so I just used generic colored Views as placeholders. You can force the included layout into a square using app:layout_constraintDimensionRatio.
Main layout:
<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/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#707070">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/statusBarsDivider"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent=".45" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/statusBarsEnd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="20dp"
app:layout_constraintGuide_percent=".67" />
<View
android:id="#+id/topStatusBarBackground"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="-8dp"
android:background="#0080ff"
app:layout_constraintBottom_toBottomOf="#+id/topTextViewLeft"
app:layout_constraintEnd_toStartOf="#+id/statusBarsEnd"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/topTextViewLeft"
style="#style/text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/statusBarsDivider"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/topTextViewRight"
style="#style/text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/statusBarsEnd"
app:layout_constraintStart_toEndOf="#id/statusBarsDivider"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/bottomStatusBarBackground"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="-8dp"
android:background="#00C864"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/statusBarsEnd"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/bottomTextViewLeft" />
<TextView
android:id="#+id/bottomTextViewLeft"
style="#style/text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/statusBarsDivider"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/bottomTextViewRight"
style="#style/text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/statusBarsEnd"
app:layout_constraintStart_toEndOf="#id/statusBarsDivider" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/horizontalCenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="20dp"
app:layout_constraintGuide_percent=".5" />
<TextView
android:id="#+id/textView3"
style="#style/text_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="8dp"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/statusBarsEnd"
app:layout_constraintTop_toTopOf="#+id/horizontalCenter" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="24dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<include
layout="#layout/game_board"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="8dp"
app:layout_constraintBottom_toTopOf="#+id/bottomStatusBarBackground"
app:layout_constraintDimensionRatio="w,1:1"
app:layout_constraintEnd_toStartOf="#+id/statusBarsEnd"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/topStatusBarBackground" />
</androidx.constraintlayout.widget.ConstraintLayout>
The game_board layout:
(There's probably a much better way to do this. I created four horizontal and four vertical view chains and all of the views have 0dp height and width so the ConstraintLayout makes them all take up evenly divided space.)
<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">
<View
android:id="#+id/cellA1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#3F51B5"
app:layout_constraintBottom_toTopOf="#+id/cellB1"
app:layout_constraintEnd_toStartOf="#+id/cellA2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/cellA2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#9C27B0"
app:layout_constraintBottom_toTopOf="#+id/cellB2"
app:layout_constraintEnd_toStartOf="#+id/cellA3"
app:layout_constraintStart_toEndOf="#+id/cellA1"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/cellA3"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#F44336"
app:layout_constraintBottom_toTopOf="#+id/cellB3"
app:layout_constraintEnd_toStartOf="#+id/cellA4"
app:layout_constraintStart_toEndOf="#+id/cellA2"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/cellA4"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#FFEB3B"
app:layout_constraintBottom_toTopOf="#+id/cellB4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/cellA3"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/cellB1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#8BC34A"
app:layout_constraintBottom_toTopOf="#+id/cellC1"
app:layout_constraintEnd_toStartOf="#+id/cellB2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cellA1" />
<View
android:id="#+id/cellB2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#2196F3"
app:layout_constraintBottom_toTopOf="#+id/cellC2"
app:layout_constraintEnd_toStartOf="#+id/cellB3"
app:layout_constraintStart_toEndOf="#+id/cellB1"
app:layout_constraintTop_toBottomOf="#+id/cellA2" />
<View
android:id="#+id/cellB3"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#009688"
app:layout_constraintBottom_toTopOf="#+id/cellC3"
app:layout_constraintEnd_toStartOf="#+id/cellB4"
app:layout_constraintStart_toEndOf="#+id/cellB2"
app:layout_constraintTop_toBottomOf="#+id/cellA3" />
<View
android:id="#+id/cellB4"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#CDDC39"
app:layout_constraintBottom_toTopOf="#+id/cellC4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/cellB3"
app:layout_constraintTop_toBottomOf="#+id/cellA4" />
<View
android:id="#+id/cellC1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#E91E63"
app:layout_constraintBottom_toTopOf="#+id/cellD1"
app:layout_constraintEnd_toStartOf="#+id/cellC2"
app:layout_constraintTop_toBottomOf="#+id/cellB1"
app:layout_constraintStart_toStartOf="parent" />
<View
android:id="#+id/cellC2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#3F51B5"
app:layout_constraintBottom_toTopOf="#+id/cellD2"
app:layout_constraintEnd_toStartOf="#+id/cellC3"
app:layout_constraintTop_toBottomOf="#+id/cellB2"
app:layout_constraintStart_toEndOf="#+id/cellC1" />
<View
android:id="#+id/cellC3"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#CDDC39"
app:layout_constraintBottom_toTopOf="#+id/cellD3"
app:layout_constraintEnd_toStartOf="#+id/cellC4"
app:layout_constraintStart_toEndOf="#+id/cellC2"
app:layout_constraintTop_toBottomOf="#+id/cellB3" />
<View
android:id="#+id/cellC4"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#2196F3"
app:layout_constraintBottom_toTopOf="#+id/cellD4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/cellC3"
app:layout_constraintTop_toBottomOf="#+id/cellB4" />
<View
android:id="#+id/cellD1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#00BCD4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/cellD2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cellC1" />
<View
android:id="#+id/cellD2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#673AB7"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/cellD3"
app:layout_constraintStart_toEndOf="#+id/cellD1"
app:layout_constraintTop_toBottomOf="#+id/cellC2" />
<View
android:id="#+id/cellD3"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#FF9800"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/cellD4"
app:layout_constraintStart_toEndOf="#+id/cellD2"
app:layout_constraintTop_toBottomOf="#+id/cellC3" />
<View
android:id="#+id/cellD4"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#E91E63"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/cellD3"
app:layout_constraintTop_toBottomOf="#+id/cellC4" />
</androidx.constraintlayout.widget.ConstraintLayout>
ah Ok .. I finally had a Eureka moment .. and thanks to this question
ConstraintLayout aspect ratio
helped me understand what I was doing wrong with the layout_constraintDimensionRatio
used this code:
<?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="#515151"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#4CAF50"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/frLay01"
app:layout_constraintStart_toStartOf="parent">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="6dp"
android:layout_weight="1"
app:cardCornerRadius="8dp">
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp"
android:text="TextView" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="6dp"
android:layout_weight="2"
app:cardCornerRadius="8dp">
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp"
android:text="TextView" />
</androidx.cardview.widget.CardView>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#2196F3"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="#+id/frLay01"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="6dp"
android:layout_weight="1"
app:cardCornerRadius="8dp">
<TextView
android:id="#+id/textView12"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp"
android:text="TextView" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="6dp"
android:layout_weight="2"
app:cardCornerRadius="8dp">
<TextView
android:id="#+id/textView13"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp"
android:text="TextView" />
</androidx.cardview.widget.CardView>
</LinearLayout>
<androidx.cardview.widget.CardView
android:id="#+id/cardView"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_margin="6dp"
app:cardCornerRadius="8dp"
app:cardElevation="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/frLay01">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp"
android:text="TextView" />
</androidx.cardview.widget.CardView>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:layout_marginEnd="40dp"
android:text="Button"
android:textColor="#FFFFFF"
app:backgroundTint="#0920A3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<FrameLayout
android:id="#+id/frLay01"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="4dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:background="#8A1F1F"
app:layout_constraintBottom_toTopOf="#+id/linearLayout2"
app:layout_constraintDimensionRatio="W,4:3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout">
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="4dp"
android:background="#3F51B5">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageButton
android:id="#+id/imageButton00"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="#android:drawable/checkbox_off_background" />
<ImageButton
android:id="#+id/imageButton01"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="#android:drawable/checkbox_off_background" />
<ImageButton
android:id="#+id/imageButton02"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="#android:drawable/checkbox_off_background" />
<ImageButton
android:id="#+id/imageButton03"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="#android:drawable/checkbox_off_background" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageButton
android:id="#+id/imageButton10"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="#android:drawable/checkbox_off_background" />
<ImageButton
android:id="#+id/imageButton11"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="#android:drawable/checkbox_off_background" />
<ImageButton
android:id="#+id/imageButton12"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="#android:drawable/checkbox_off_background" />
<ImageButton
android:id="#+id/imageButton13"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="#android:drawable/checkbox_off_background" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageButton
android:id="#+id/imageButton20"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="#android:drawable/checkbox_off_background" />
<ImageButton
android:id="#+id/imageButton21"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="#android:drawable/checkbox_off_background" />
<ImageButton
android:id="#+id/imageButton22"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="#android:drawable/checkbox_off_background" />
<ImageButton
android:id="#+id/imageButton23"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
app:srcCompat="#android:drawable/checkbox_off_background" />
</TableRow>
</TableLayout>
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Nothing in MainActivity
Key points:
the parent FrameLayout (named: frLay01 ) set constraints:
Left: parent
Top: bottom of top status bar
Bottom: top of bottom status bar
layout_constraintDimensionRatio="W,4:3"
and both:
android:layout_width="0dp"
android:layout_height="0dp"
My first mistake was setting layout_width to "wrap content" .. I didn't realize that the DimensionRatio is considered a constraint, so for it to take effect, we need to set the width to "match constraint" (ie 0dp)
only other trick (which I had already figured out previously)
is to set every child object inside, (and continuing in) to match parent.
and then finally, for the tableRows, set the layout_weight = 1
and of course, the image Buttons, layout_weight = 1 as well.
Once that's done .. viola:
and likewise, if I just add a 5th col of buttons, and change ratio to 5:3 ..
this is good for me .. as I indicated, my board is static size, so just after the auto resizing to the different screen sizes.
I tried two ways to scroll a viewpager header above a recyclerView. The id of the layout is android:id="#+id/rel_promotions_parent" with the viewPager to be scrolled.
Using CoordinatorLayout where the viewpager root layout having app:layout_scrollFlags="scroll|exitUntilCollapsed" and recyclerView with app:layout_behavior="#string/appbar_scrolling_view_behavior"
<androidx.coordinatorlayout.widget.CoordinatorLayout
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="#color/white_one"
android:fitsSystemWindows="true"
>
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
>
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<RelativeLayout
android:id="#+id/rel_promotions_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
>
<com.loopingviewpager.LoopingViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
app:autoScroll="true"
app:isInfinite="true"
app:scrollInterval="2000"
/>
<com.loopingviewpager.indicator.CustomShapePagerIndicator
android:id="#+id/indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/viewpager"
android:layout_centerHorizontal="true"
android:layout_marginBottom="#dimen/_5sdp"
android:visibility="visible"
app:indicator_spacing="4dp"
/>
</RelativeLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="5dp"
android:clipToPadding="false"
android:paddingStart="5dp"
android:paddingEnd="5dp"
android:paddingBottom="10dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Using motionLayout as an example in the link https://medium.com/#alex.gabor applying the constrainSet to the layout android:id="#+id/rel_promotions_parent"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white_one"
>
<androidx.constraintlayout.motion.widget.MotionLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="#xml/scrollable_header_above_recycler_view_scene"
>
<RelativeLayout
android:id="#+id/rel_promotions_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
>
<com.loopingviewpager.LoopingViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
app:autoScroll="true"
app:isInfinite="true"
app:scrollInterval="2000"
/>
<com.loopingviewpager.indicator.CustomShapePagerIndicator
android:id="#+id/indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/viewpager"
android:layout_centerHorizontal="true"
android:layout_marginBottom="#dimen/_5sdp"
android:visibility="visible"
app:indicator_spacing="4dp"
/>
</RelativeLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="5dp"
android:clipToPadding="false"
android:paddingStart="5dp"
android:paddingEnd="5dp"
android:paddingBottom="10dp"
app:layout_constraintTop_toBottomOf="#id/rel_promotions_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
</androidx.constraintlayout.motion.widget.MotionLayout>
</RelativeLayout>
In both the cases only the recyclerView is scrolling, and the viewPager is laying still. If we try to touch and drag the viewpager it will scroll, but not with the help of the recyclerView.
Does anyone knows how to scroll a viewpager header above a recyclerView..?
NestedScrollView was not able to catch the scroll change when recyclerView is placed inside. So while pagination is implemented a lot of memory space is allocated and scrolling is pretty lag. The solution I did is to incorporate the header inside the recyclerView as the first element and then removed the nestedsrollview. Also I implemented the diffUtil class callback for the recyclerview also which did a lot of work for me.
Hope it helps for anyone.
I have a Checkbox and a TextView that are anchored to the left side of a UI. I have another TextView "newcard #" that I would like to center in the full width of the parent. The parent width is the white space running from left to right, shown below. Notice how "newcard #" is to the right of the red center line. Basically I would like "newcard #" to be centered around the red center line.
I have tried multiple combinations of gravity and layout_gravity without any luck. What am I missing here?
item.xml
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
card_view:cardBackgroundColor="#android:color/white"
card_view:cardCornerRadius="6dp"
card_view:cardElevation="4dp" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_selector" >
<CheckBox
android:id="#+id/chkSelected"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="4dp"
android:layout_marginStart="4dp"
android:layout_marginTop="4dp"
android:gravity="center"
android:background="#008080" />
<TextView
android:id="#+id/cardType1"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_toRightOf="#+id/chkSelected"
android:layout_toEndOf="#+id/chkSelected"
android:paddingStart="3dp"
android:paddingLeft="3dp"
android:paddingEnd="6dp"
android:paddingRight="6dp"
android:layout_marginTop="4dp"
android:gravity="center"
android:textColor="#ffffff"
android:textStyle="bold|italic"
style="#style/Base.TextAppearance.AppCompat.Subhead" />
<TextView
android:id="#+id/cardBlankText1"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_toRightOf="#+id/cardType1"
android:layout_toEndOf="#+id/cardType1"
android:layout_marginTop="4dp"
android:layout_marginLeft="6dp"
android:layout_marginStart="6dp"
android:gravity="center_horizontal"
android:textColor="#color/colorFlLabelFinal"
android:textStyle="bold"
style="#style/Base.TextAppearance.AppCompat.Subhead" />
I kept only RelativeLayout, hope a result won't change.
Deleted:
android:layout_toEndOf="#+id/cardType1"
android:layout_toRightOf="#+id/cardType1"
and inserted:
android:layout_centerHorizontal="true"
So:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_selector">
<CheckBox
android:id="#+id/chkSelected"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="4dp"
android:layout_marginStart="4dp"
android:layout_marginTop="4dp"
android:background="#008080"
android:gravity="center"/>
<TextView
android:id="#+id/cardType1"
style="#style/Base.TextAppearance.AppCompat.Subhead"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_marginTop="4dp"
android:layout_toEndOf="#+id/chkSelected"
android:layout_toRightOf="#+id/chkSelected"
android:gravity="center"
android:paddingEnd="6dp"
android:paddingLeft="3dp"
android:paddingRight="6dp"
android:paddingStart="3dp"
tools:text="Work"
android:textColor="#ffffff"
android:textStyle="bold|italic"/>
<TextView
android:id="#+id/cardBlankText1"
style="#style/Base.TextAppearance.AppCompat.Subhead"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginLeft="6dp"
android:layout_marginStart="6dp"
android:layout_marginTop="4dp"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
tools:text="newcard#"
android:textColor="#color/colorFlLabelFinal"
android:textStyle="bold"/>
<TextView
android:id="#+id/cardBlankTextNumsTotal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="fggfhfg"
android:layout_toRightOf="#id/cardBlankText1"/>
</RelativeLayout>
I'm using nestedscrollview in sliding card to pull it up and down, by extending coordinator layout behavior class and overriding its nested scrolling and flinging methods.
In my layout, I have on recylerview, and two nestedscroll view one to wrap the header and make it pull the card up and down, and one for the to wrap and error message which appears after any error message.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/slidinguppanel_slidingcontainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:background="#android:color/white">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_marginTop="?actionBarSize"
android:fillViewport="true"
android:fitsSystemWindows="true"
android:layout_gravity="fill_vertical"
android:layout_height="match_parent">
<include
android:id="#+id/blocking_error_panel"
layout="#layout/blocking_error_panel" />
</android.support.v4.widget.NestedScrollView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v4.widget.NestedScrollView
android:id="#+id/nested_scroll_view"
android:layout_width="match_parent"
android:fillViewport="true"
android:layout_gravity="fill_vertical"
android:fitsSystemWindows="true"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/choose_bus_headers"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="false"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:clickable="false"
android:layout_height="?actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="horizontal">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:src="#drawable/ic_publicbus_choosebus_bus" />
<com.wrzit.app.Utils.CustomTextView
android:id="#+id/txtPanelHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/toolbar_text_margin_start"
android:text="#string/bus_panel_header_text"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="#dimen/card_header_text_size"
app:typeface="roboto_regular.ttf" />
</LinearLayout>
<ImageButton
android:id="#+id/btnSlider"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:background="#color/colorPrimary"
android:padding="5dp"
android:src="#drawable/ic_expand_more_white_24dp" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<com.wrzit.app.Utils.CustomTextView
android:id="#+id/txtGPSNotification"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/notification_background"
android:padding="#dimen/notification_padding"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="#dimen/regular_text_size"
android:visibility="gone"
app:typeface="roboto_regular.ttf" />
<com.wrzit.app.Utils.CustomTextView
android:id="#+id/txtNetworkNotification"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/notification_background"
android:padding="#dimen/notification_padding"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="#dimen/regular_text_size"
android:visibility="gone"
app:typeface="roboto_regular.ttf" />
<ProgressBar
android:id="#+id/progress"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_marginTop="-7dp"
android:indeterminate="true"
android:visibility="visible" />
<LinearLayout
android:id="#+id/layoutFilterBusStop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:orientation="horizontal"
android:visibility="gone">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/txtFilterBusStopName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Jalan Raja Chulan"
android:textColor="#android:color/black"
android:singleLine="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
android:text="Filtered Bus Stop" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="0.1"
android:layout_height="match_parent">
<ImageView
android:id="#+id/btnFilterBusStopClose"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center|right"
android:src="#drawable/ic_close_black_24dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView
>
<android.support.v7.widget.RecyclerView
android:id="#+id/listChooseBus"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#E7E8E7"
android:dividerHeight="1dp" />
</LinearLayout>
The behavior detects triggers onNestedPreFling() when I fling the recyclerview, or the nestedscrollview that wraps the header. The problem occurs when I fling the nestedscrollview that wraps the error layout, it triggers onNestedPreScroll(), but doesn't always triggers onNestedPreFling(), even though scroll amount larger than the touch slop.
I tried to identify what cause this issue, but unfortunately was not able to identify it. hopefully someone knows what prevents onNestedPreFling() from being called.
Horizontal layout_width match parent issue. I am attaching the view picture below, what I want is all item in horizontal to be on same width and height.
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
card_view:cardCornerRadius="8dp"
card_view:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:id="#+id/textView_itemName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-condensed"
android:gravity="center"
android:singleLine="true"
android:text="Sheet Set"
android:textAllCaps="true"
android:textSize="20sp" />
<TextView
android:id="#+id/textView_itemDesc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:fontFamily="sans-serif-condensed"
android:gravity="center"
android:text="Pc with 4 top heaming"
android:textAppearance="?android:textAppearanceSmall" />
</LinearLayout>
</android.support.v7.widget.CardView>