How can bring the cross button above the box The Text amp Ic | Compose | Kotlinlang

Join the conversation Join Slack

Channels

# 100daysofcode

# 100daysofkotlin

# 100daysofkotlin-2021

# advent-of-code

# algolialibraries

# android-architecture

# android-databinding

# android-studio

# androidgithubprojects

# androidthings

# androidx-xprocessing

# announcements

# apollo-kotlin

# arksemdevteam

# arrow-contributors

# awesome-kotlin

# beepiz-libraries

# cincinnati-user-group

# code-coverage

# codemash-precompiler

# codingconventions

# collaborations

# competitive-programming

# competitivecoding

# compose-desktop

# compose-hiring

# compose-ui-showcase

# connect-audit-events

# cscenter-course-2016

# docs-revamped

# domain-driven-design

# effective-kotlin

# effectivekotlin

# embedded-kotlin

# event21-community-content

# fb-internal-demo

# fluid-libraries

# general-advice

# getting-started

# github-actions-kotlin-dsl

# graphql-kotlin

# graviton-browser

# hazelcast-explorer

# image-processing

# intellij-plugins

# intellij-tricks

# introduce-yourself

# istanbulcoders

# jackson-kotlin

# java-to-kotlin-refactoring

# javadevelopers

# jhipster-kotlin

# jobsworldwide

# juul-libraries

# jvm-ir-backend-feedback

# k2-early-adopters

# kampkit-support

# kgen-doc-tools

# kloudformation

# kotest-contributors

# kotlin-by-example

# kotlin-data-storage

# kotlin-in-action

# kotlin-inject

# kotlin-logging

# kotlin-mumbai

# kotlin-native

# kotlin-pakistan

# kotlin-plugin

# kotlin-roadmap

# kotlin-samples

# kotlin-serbia

# kotlin-szeged

# kotlin-website

# kotlinacademy

# kotlinforbeginners

# kotlingforbeginners

# kotlinprogrammers

# kotlintest-devs

# kotlinultimatechallenge

# kotlinx-datetime

# kotlinx-files

# lambdaworld_cadiz

# language-evolution

# language-proposals

# leedskotlinusergroup

# lets-have-fun

# library-development

# machinelearningbawas

# metro-detroit

# monsterpuzzle

# multiplatform

# myndocs-oauth2-server

# navigation-architecture-component

# ohio-kotlin-users

# package-search

# pattern-matching

# pocketgitclient

# practical-functional-programming

# prozis-android-backup

# python-contributors

# realworldkotlin

# refactoring-to-kotlin

# refreshversions

# russian-kotlinasfirst

# serialization

# sg-user-group

# skia-wasm-interop-temp

# sofl-user-group

# spotify-mobius

# spring-security

# squarelibraries

# stackoverflow

# stayhungrystayfoolish

# strife-discord-lib

# swagger-gradle-codegen

# swiss-user-group

# talking-kotlin

# tricity-kotlin-user-group

Powered by Linen

Channels

k

Kshitij Patil

1 year ago

How can bring the cross button above the box? The Text & Icon are being defined inside a box which is managing stroke & background color as well as shape. I tried putting cross button in parent box and with zIndex of this child box less than the icon’s but didn’t work. Do I need to write custom layout for this?

d

Denis

1 year ago

Code?

Yuri Drigin

Yuri Drigin

1 year ago

Box - alignment TopEnd, and Modifier. padding(4.dp) for the center shape

k

Kshitij Patil

1 year ago

cc: @Denis

OverlappingIcon.kt

d

Denis

1 year ago

@Kshitij Patil, I tried to insert your code like

@Preview
@Composable
fun CrossButtonPreview() {
    /* Your code */
}

but there were too many errors. It would be nice to have a self-contained example, so we can collaborate easily. Have you solved the problem?

Afzal Najam

Afzal Najam

1 year ago

Instead of putting the icon in the box with the border, you could use a container and make them siblings inside it

Shakil Karim

Shakil Karim

1 year ago

Try offset

k

Kshitij Patil

1 year ago

@Denis will share a self contained example tomorrow, I was in bit hurry so just shared a snippet that's responsible for Box & Icon. @Afzal Najam I tried that way but how can I know the dimensions of box so that I can correctly place the icon on it's topRight edge.

@Shakil Karim I've already used that in the snippet I shared

Surprisingly, when I wrote them in a separate Composable and doing as @ Afzal Najam mentioned, it just worked. Here is a snippet for that.

BoxWithEdgeIcon

❤️ 1 🎉 2

View count: 1

Join thread in Slack