Showing posts with label Jetpack. Show all posts
Showing posts with label Jetpack. Show all posts

Monday 3 July 2023

JetPack Compose: Basic TextView Sample in JetPack Compose

 Hi All,

     This is the very basic Text View Sample Jetpack compose.  


1. Text Color:
Change the text color using color parameter
@Composable
fun ColorText() {
    Text("Text in Red Color", color = Color.Red ,  modifier = Modifier
        .padding(8.dp) // margin
        .padding(8.dp) // padding
    )
}

2. Text Size: Change the text size using fontSize parameter
@Composable
fun TextWithSize(label : String, size : TextUnit) {
    Text(label, fontSize = size)
}

//TextWithSize("Big text",40.sp) -- call this method 
3.Bold Text: Use fontWeight parameter to making the bold text
@Composable
fun BoldText() {
    Text("Text in Bold", fontWeight = FontWeight.Bold,  modifier = Modifier
        .padding(8.dp) // margin
        .padding(8.dp)) // padding
}
4. Italic Text: Use fontStyle paramter to making the italic text
@Composable
fun ItalicText() {
    Text("Italic Text", fontStyle = FontStyle.Italic,  modifier = Modifier
        .padding(8.dp) // margin
        .padding(8.dp)) // padding
}
5. Maximum number of lines: To limit the number of visible lines in a Text composable, set the maxLines parameter,
@Composable
fun MaxLines() {
    Text("Text with Max line 2 ".repeat(50), maxLines = 2, modifier = Modifier
        .padding(8.dp) // margin
        .padding(8.dp)) // padding
}
6. Text Overflow: When limiting a long text, you may want to indicate a text overflow, which is only shown if the displayed text is truncated. To do so, set the textOverflow parameter
@Composable
fun OverflowedText() {
    Text("Text with three dot at end, Text Overflow  ".repeat(150),
        maxLines = 3, overflow = TextOverflow.Ellipsis,
        modifier = Modifier
            .padding(8.dp)) // margin
}

Download code from here

Tuesday 28 September 2021

Android Jetpack Compose Toolbar example | Jetpack Compose TopAppBar

Hi Friends,
              Many of us looking for Toolbar example in Jetpack Compose or
TopAppBar example in Jetpack compose. Today I am going to share  you 
a sample which helps you in creating Toolbar in Jetpack compose.
Also in this tutoriail I am providing you how to create toolbar menu item using
JetPack Compose.


Source Code:


Complete Activity class


Download code from here

Hope this will help someone.
Enjoy Coding............... :)

Android Jetpack Compose Dropdown menu Example | Dropdown menu using DropdownMenu Composable

Dropdown menu:
       We are going to use DropdownMenu Composable for creating dropdown menu.



fun DropdownMenu(
expanded: Boolean,
onDismissRequest: () -> Unit,
modifier: Modifier = Modifier,
offset: DpOffset = DpOffset(0.dp, 0.dp),
properties: PopupProperties = PopupProperties(focusable = true),
content: @Composable ColumnScope.() -> Unit
)

In Above code if expanded is true, the popup menu with dropdown content will be shown.
onDismissRequest will be called when the menu should be dismiss,
@Composable
fun DropdownDemo() {
    var expanded by remember { mutableStateOf(false) }
    val items = listOf(
        "Apple", "Banana", "Cherry", "Grapes",
        "Mango", "Pineapple", "Pear"
    )
    var selectedIndex by remember { mutableStateOf(0) }
    Column(
        modifier = Modifier
            .fillMaxSize()
            .wrapContentSize(Alignment.TopStart)
            .padding(all = 5.dp)
    ) {
        Text(
            items[selectedIndex],
            modifier = Modifier
                .fillMaxWidth()
                .clickable(onClick = { expanded = true })
                .background(
                    Color.Red
                ),
            color = Color.White,
            fontSize = 20.sp,
            textAlign = TextAlign.Start
        )
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            modifier = Modifier
                .fillMaxWidth()
                .background(
                    Color.Gray
                )
        ) {
            items.forEachIndexed { index, s ->
                DropdownMenuItem(onClick = {
                    selectedIndex = index
                    expanded = false
                }) {
                    Text(text = s)
                }
            }
        }
    }
}

Hope this will help someone.
Enjoy Coding.......... :)

Friday 24 September 2021

Android Jetpack Compose Button Example | How to center a button in jetpack Compose | How to onclick listener on button in Jetpack Compose

Hi Friends,
             Today I am sharing a Sample of Jetpack Compose Button view. I will show you how
to set onclick listener on button in Jetpack Compose. How to style on Button in
Jetpack Compse , how to set height and width of button in Jetpack compose.

  Code:
   

  Hope this will help someone.
  Enjoy Coding........... :) 





Android Jetpack compose- Android Listview using Jetpack compose | Jetpack compose listview clicklistener

 Hello all, 
        Today I am going to share my anothere Android Jetpack Compose tutoria.
How to set clicklistener on listview in android Jetpack Compses, how to set clicklistener 
on button using Jetpack Compse.



I am sharing below code where I am handling list item click in jetpack compose.


Downlaod complete code from here
Hope this will help someone.
Enjoy Coding....... :)

Android Jetpack Compose Alert Dialog Sample | Jetpack Compose Dialog

 Hi Friends,  
               Today I am sharing the Jetpack Compse Alert Dialog Sample.

What is Alert Dialog?
- Alert dialog is a Dialog which interrupts the user with 
urgent information, details or actions.


Code:

Hope this will help someone.
Enjoy Coding........ :)



Tuesday 21 September 2021

Android Jetpack- Composable functions




Jetpack Compose is built around composable functions. These functions
let you define your app's UI programmatically by describing how it
should look and providing data dependencies, rather than 
focusing on the process of the UI's construction (initializing an 
element, attaching it to a parent, etc.).
To create a composable function, just add the @Composable annotation
to the function name.




Enjoy Coding.... :)

Wednesday 1 September 2021

Android Jetpack Compose- Android Studio with Jetpack Compose Getting Started | Jetpack Compose Tutoria


Hi All,
  
Today I am going to share my first JetPack Compose Tutorial. Here we learn how\nto setup android compose in android studio. We see the rquired dependency and other settings.

Step 1: Installation:  First we have to download Android Studio Arctic Fox. That’s because when we use Android Studio to develop our app with Jetpack Compose, we can benefit from smart editor features, such as New Project templates and the ability to immediately
preview our Compose UI.

Step2: Create android app :  After the installint of latest android studio from link now lets 
create an app.
  • Open Android Studio > select File > New > New Project from the menu bar.  
  • In the Select a Project Template window, select Empty Compose Activity and click Next.
  • In the Configure your project window, do the following:
    1. Set the NamePackage name, and Save location as you normally would.
    2. Note that, in the Language dropdown menu, Kotlin is the only available option because Jetpack Compose works only with classes written in Kotlin.
    3. In the Minimum API level dropdown menu, select API level 21 or higher.
  • Click Finish.  


   You can see below dependecny in your app build.gradle file which is required for Compose.
    
 



 For more check this tutorial

While setting it if you are facing issue of  "Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8". Plesase check this tutorial

Hope this will help some one.
Enjoy Coding....... :)

 

Copyright @ 2013 Android Developers Blog.