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.

• android
• kotlin
• android-layout
• user-interface
• android-view

Share Improve this question Follow edited Jan 17 at 19:01 Mark Stewart 2,11844 gold badges2727 silver badges3333 bronze badges asked Jan 17 at 17:18 A1phaA1pha 322 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

Try 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.