How to set Button height and width with Jetpack Compose?

Last updated Oct 31, 2021


In this Jetpack compose tutorial we will learn how to set Button height and width in Android application with Jetpack compose. To create button we will use Button compose function Button(), to add size to button we will us Modifier class with height and width properties

example to set custom height and width for the button by

modifier = Modifier.size(width = 150.dp,height = 35.dp

 

 

Download Source code

 

Let's get started

Step 1: Create android application in android studio

Step 2: Follow step for setup Jetpack Compose with Android Studio

Step 3: Add ButtonDemo composable function in MainActivity.kt

To set height and width of the button you can use modifier parameter in button composable function

 

 

Full code

package com.example.jetpack.widget

import androidx.compose.foundation.layout.*
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun ButtonDemo(){
    Column(modifier = Modifier
        .fillMaxHeight()
        .fillMaxWidth()
        .padding(16.dp)){
        Text(text = "Button with height and width")
        Spacer(modifier = Modifier.padding(8.dp))
        Button(onClick = {},content={
            Text(text = "Button 1")
        })
        Spacer(modifier = Modifier.padding(8.dp))
        Button(onClick = {},modifier = Modifier.size(width = 200.dp,height = 60.dp),content={
            Text(text = "Button 2")
        })
        Spacer(modifier = Modifier.padding(8.dp))
        Button(onClick = {},modifier = Modifier.size(width = 150.dp,height = 35.dp),content={
            Text(text = "Button 3")
        })
        Spacer(modifier = Modifier.padding(8.dp))
        Button(onClick = {},modifier = Modifier.fillMaxWidth(),content={
            Text(text = "Button 4")
        })
    }
}

 

 

Custom height and width to button with compose

 

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

570 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions