I have three custom views: SmallBannerView, LargeBannerView and, like base for previous two, BannerView. Individually, the first two views show as they should, but when I attach them to BannerView, everything breaks: for some reason they start to "shrink" to the left border, while trying to increase the width has no effect whatsoever, only the frame limiting the view increases.
SmallBannerView's layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android=";
android:layout_width="88dp"
android:layout_height="88dp"
android:id="@+id/small_banner_view"
xmlns:tools=";
xmlns:app=";
android:background="@drawable/small_banner_card">
<ImageView
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_margin="4dp"
android:id="@+id/image"
android:layout_width="35dp"
android:layout_height="35dp"
tools:src="@drawable/bonus_badge"/>
<TextView
android:id="@+id/right_title"
android:layout_marginTop="4dp"
android:layout_marginHorizontal="6dp"
app:layout_constraintTop_toBottomOf="@id/image"
android:layout_width="match_parent"
android:layout_height="14dp"
android:textColor="@color/black"
tools:text="Акции"
android:textSize="12sp"
android:fontFamily="sans-serif-medium"
android:gravity="end"
android:includeFontPadding="false"
android:maxLines="1"
android:ellipsize="end"/>
<TextView
android:id="@+id/left_title"
android:layout_marginTop="6dp"
android:layout_marginHorizontal="10dp"
app:layout_constraintTop_toBottomOf="@id/right_title"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="20dp"
android:textColor="@color/black"
tools:text="2 в 1"
android:textSize="16sp"
android:fontFamily="sans-serif-medium"
android:gravity="start"
android:includeFontPadding="false"
android:maxLines="1"
android:ellipsize="end"/>
</androidx.constraintlayout.widget.ConstraintLayout>
How it shoud display:
LargeBannerView's layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android=";
xmlns:app=";
xmlns:tools=";
android:id="@+id/large_banner_view"
android:layout_width="match_parent"
android:layout_height="88dp"
android:background="@drawable/large_banner_card">
<ImageView
android:id="@+id/image"
android:layout_width="190dp"
android:layout_height="40dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:src="@drawable/banner_1_img" />
<TextView
android:layout_marginTop="4dp"
android:layout_marginHorizontal="12dp"
android:id="@+id/title"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="18dp"
android:textSize="16sp"
android:textStyle="bold"
android:textColor="@color/black"
tools:text="Мангоооооо 100% бонусов"
app:layout_constraintTop_toBottomOf="@id/image"
android:includeFontPadding="false"
android:maxLines="1"
android:ellipsize="end"/>
<TextView
android:layout_marginBottom="4dp"
android:layout_marginHorizontal="32dp"
android:layout_width="match_parent"
android:layout_height="20dp"
android:textSize="8sp"
android:id="@+id/description"
android:textColor="@color/black"
app:layout_constraintTop_toBottomOf="@+id/title"
tools:text="Покупайте что-то по что-то и что-то что-то по что-то и что-точто-то "
android:includeFontPadding="false"
android:maxLines="2"
android:ellipsize="end"/>
</androidx.constraintlayout.widget.ConstraintLayout>
How this is expected to be shown:
BannerView's layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android=";
xmlns:app=";
xmlns:tools=";
android:layout_width="match_parent"
android:layout_height="88dp"
android:layout_marginVertical="10dp"
android:layout_marginHorizontal="20dp">
<com.prod.solution.impl.ui.banner.LargeBannerView
android:id="@+id/large"
android:layout_width="300dp"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="0dp" />
<com.prod.solution.impl.ui.banner.SmallBannerView
android:id="@+id/small"
android:layout_width="88dp"
android:layout_height="match_parent"
app:layout_constraintStart_toEndOf="@+id/large"
tools:layout_editor_absoluteY="0dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
And the result:
Here also BannerView's class:
class BannerView @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0,
) : RelativeLayout(context, attrs, defStyleAttr) {
private var binding: BannerViewBinding
init {
binding = BannerViewBinding.inflate(LayoutInflater.from(context))
addView(binding.root)
}
fun setupBanner(model: BannerUiModel) {
binding.large.setUpLarge(model.largeBanner)
binding.small.setUpSmall(model.smallBanner)
}
}
class LargeBannerView @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0,
) : RelativeLayout(context, attrs, defStyleAttr) {
private var binding: LargeBannerViewBinding
init {
binding = LargeBannerViewBinding.inflate(LayoutInflater.from(context))
addView(binding.root)
}
fun setUpLarge(model: LargeBannerUiModel) {
binding.title.text = model.title
binding.description.text = model.description
binding.image.setImageDrawable(AppCompatResources.getDrawable(context, model.imageResId))
}
}
class SmallBannerView @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0,
) : RelativeLayout(context, attrs, defStyleAttr) {
private var binding: SmallBannerViewBinding
init {
binding = SmallBannerViewBinding.inflate(LayoutInflater.from(context))
addView(binding.root)
}
fun setUpSmall(model: SmallBannerUiModel?) {
binding.rightTitle.text = model?.rightLabel
binding.leftTitle.text = model?.leftLabel
val imageId = model?.imageResId
if (imageId != null)
binding.image.setImageDrawable(AppCompatResources.getDrawable(context, imageId))
}
}
The result I was expected to see:
I've tried to remove params like maxLines and ellipsize, but it had no effect.
I have three custom views: SmallBannerView, LargeBannerView and, like base for previous two, BannerView. Individually, the first two views show as they should, but when I attach them to BannerView, everything breaks: for some reason they start to "shrink" to the left border, while trying to increase the width has no effect whatsoever, only the frame limiting the view increases.
SmallBannerView's layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android/apk/res/android"
android:layout_width="88dp"
android:layout_height="88dp"
android:id="@+id/small_banner_view"
xmlns:tools="http://schemas.android/tools"
xmlns:app="http://schemas.android/apk/res-auto"
android:background="@drawable/small_banner_card">
<ImageView
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_margin="4dp"
android:id="@+id/image"
android:layout_width="35dp"
android:layout_height="35dp"
tools:src="@drawable/bonus_badge"/>
<TextView
android:id="@+id/right_title"
android:layout_marginTop="4dp"
android:layout_marginHorizontal="6dp"
app:layout_constraintTop_toBottomOf="@id/image"
android:layout_width="match_parent"
android:layout_height="14dp"
android:textColor="@color/black"
tools:text="Акции"
android:textSize="12sp"
android:fontFamily="sans-serif-medium"
android:gravity="end"
android:includeFontPadding="false"
android:maxLines="1"
android:ellipsize="end"/>
<TextView
android:id="@+id/left_title"
android:layout_marginTop="6dp"
android:layout_marginHorizontal="10dp"
app:layout_constraintTop_toBottomOf="@id/right_title"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="20dp"
android:textColor="@color/black"
tools:text="2 в 1"
android:textSize="16sp"
android:fontFamily="sans-serif-medium"
android:gravity="start"
android:includeFontPadding="false"
android:maxLines="1"
android:ellipsize="end"/>
</androidx.constraintlayout.widget.ConstraintLayout>
How it shoud display:
LargeBannerView's layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android/apk/res/android"
xmlns:app="http://schemas.android/apk/res-auto"
xmlns:tools="http://schemas.android/tools"
android:id="@+id/large_banner_view"
android:layout_width="match_parent"
android:layout_height="88dp"
android:background="@drawable/large_banner_card">
<ImageView
android:id="@+id/image"
android:layout_width="190dp"
android:layout_height="40dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:src="@drawable/banner_1_img" />
<TextView
android:layout_marginTop="4dp"
android:layout_marginHorizontal="12dp"
android:id="@+id/title"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="18dp"
android:textSize="16sp"
android:textStyle="bold"
android:textColor="@color/black"
tools:text="Мангоооооо 100% бонусов"
app:layout_constraintTop_toBottomOf="@id/image"
android:includeFontPadding="false"
android:maxLines="1"
android:ellipsize="end"/>
<TextView
android:layout_marginBottom="4dp"
android:layout_marginHorizontal="32dp"
android:layout_width="match_parent"
android:layout_height="20dp"
android:textSize="8sp"
android:id="@+id/description"
android:textColor="@color/black"
app:layout_constraintTop_toBottomOf="@+id/title"
tools:text="Покупайте что-то по что-то и что-то что-то по что-то и что-точто-то "
android:includeFontPadding="false"
android:maxLines="2"
android:ellipsize="end"/>
</androidx.constraintlayout.widget.ConstraintLayout>
How this is expected to be shown:
BannerView's layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android/apk/res/android"
xmlns:app="http://schemas.android/apk/res-auto"
xmlns:tools="http://schemas.android/tools"
android:layout_width="match_parent"
android:layout_height="88dp"
android:layout_marginVertical="10dp"
android:layout_marginHorizontal="20dp">
<com.prod.solution.impl.ui.banner.LargeBannerView
android:id="@+id/large"
android:layout_width="300dp"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
tools:layout_editor_absoluteY="0dp" />
<com.prod.solution.impl.ui.banner.SmallBannerView
android:id="@+id/small"
android:layout_width="88dp"
android:layout_height="match_parent"
app:layout_constraintStart_toEndOf="@+id/large"
tools:layout_editor_absoluteY="0dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
And the result:
Here also BannerView's class:
class BannerView @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0,
) : RelativeLayout(context, attrs, defStyleAttr) {
private var binding: BannerViewBinding
init {
binding = BannerViewBinding.inflate(LayoutInflater.from(context))
addView(binding.root)
}
fun setupBanner(model: BannerUiModel) {
binding.large.setUpLarge(model.largeBanner)
binding.small.setUpSmall(model.smallBanner)
}
}
class LargeBannerView @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0,
) : RelativeLayout(context, attrs, defStyleAttr) {
private var binding: LargeBannerViewBinding
init {
binding = LargeBannerViewBinding.inflate(LayoutInflater.from(context))
addView(binding.root)
}
fun setUpLarge(model: LargeBannerUiModel) {
binding.title.text = model.title
binding.description.text = model.description
binding.image.setImageDrawable(AppCompatResources.getDrawable(context, model.imageResId))
}
}
class SmallBannerView @JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null,
defStyleAttr: Int = 0,
) : RelativeLayout(context, attrs, defStyleAttr) {
private var binding: SmallBannerViewBinding
init {
binding = SmallBannerViewBinding.inflate(LayoutInflater.from(context))
addView(binding.root)
}
fun setUpSmall(model: SmallBannerUiModel?) {
binding.rightTitle.text = model?.rightLabel
binding.leftTitle.text = model?.leftLabel
val imageId = model?.imageResId
if (imageId != null)
binding.image.setImageDrawable(AppCompatResources.getDrawable(context, imageId))
}
}
The result I was expected to see:
I've tried to remove params like maxLines and ellipsize, but it had no effect.
Share Improve this question edited Jan 17 at 19:01 Mark Stewart 2,1184 gold badges27 silver badges33 bronze badges asked Jan 17 at 17:18 A1phaA1pha 32 bronze badges2 Answers
Reset to default 1Try attaching the layout to the class when inflating instead of adding as a view.
Change
binding = BannerViewBinding.inflate(LayoutInflater.from(context))
addView(binding.root)
to
binding = BannerViewBinding.inflate(LayoutInflater.from(context), this)
in all 3 classes.
Setting fixed dimensions for elements in dp is usually not a good idea. I would recommend removing the fixed widths and chaining these elements using constraints (since you're using ConstraintLayout). This way, you can examine how the views behave when you change the value of layout_constraintHorizontal_chainStyle. It might look something like this:
<com.prod.solution.impl.ui.banner.LargeBannerView
android:id="@+id/large"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:layout_constraintEnd_toStartOf="@id/small"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent" />
<com.prod.solution.impl.ui.banner.SmallBannerView
android:id="@+id/small"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/large" />
You might need to adjust the widths of these elements in their respective layouts to achieve the desired appearance. However, this approach will give you a more flexible UI, which will adapt better to a variety of phones and tablets.