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

Read More

Splash Screen API in Android 12 | Android 12 Splash Screen Example | Splash screens in Android 12 | Splash screen demo Using Splash Screen API | Splash Screen API Example

 Hi All,

         Today I am going to share a tutotial and a sample demo of Android 12 

Splash Screen Api.  Android 12 Splash screen api introduce in Android 12.

Android 12 adds the SplashScreen API, which enables a new app launch animation

for all apps when running on a device with Android 12 or higher. This includes an

into-app motion at launch, a splash screen showing your app icon, and a transition

to your app itself. 

Note: As Splash Screen  introduced in Android 12 so it will work on Android 

Api level 31 and above. 

We can Customize the Splash Screen Theme:

                - With the help of below attribute we can customize our Splash activity theme.

1. android:windowSplashScreenBackground : Used for Splash Screen background color.

#FFFFFF	

2. android:windowSplashScreenAnimatedIcon:  Used to replace an icon in

the center of the starting window. If the object is animatable and drawable through AnimationDrawable and AnimatedVectorDrawable, you also need to set windowSplashScreenAnimationDuration to play the animation while showing the

starting window.

	@drawable/splash_screen_animateable_icon
	

3. android:windowSplashScreenAnimationDuration : Used to indicate the duration of the splash screen icon animation. Max duration is 1000ms.

800	

4. android:windowSplashScreenIconBackgroundColor : Used to set a background behind

 the splash screen icon. This is useful if there isn’t enough contrast between the window

 background and the icon.

#004d28	

5. android:windowSplashScreenBrandingImage: We can use this to set an image to be shown at the bottom of the splash screen. The design guidelines recommend against using a branding image.

@drawable/ic_logo_12	

Keep the splash screen on-screen for longer periods:

The splash screen is dismissed as soon as your app draws its first frame. If you need to load a small amount of data such as in-app settings from a local disk asynchronously, you can use ViewTreeObserver.OnPreDrawListener to suspend the app to draw its first frame.

If your starting activity finishes before drawing (for example, by not setting the content view and finishing before onResume), the pre-draw listener is not needed.

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        mainViewModel = ViewModelProvider(this).get(MainViewModel::class.java)
        content = findViewById(android.R.id.content)
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
            Log.d("MainActivity", "onCreate: I AM RUNNING ON API 12 or higher")
            content.viewTreeObserver.addOnPreDrawListener(object :
                    ViewTreeObserver.OnPreDrawListener {
                    override fun onPreDraw(): Boolean =
                        when {
                            mainViewModel.mockDataLoading() -> {
                                content.viewTreeObserver.removeOnPreDrawListener(this)
                                true
                            }
                            else -> false
                        }
                })
        }
    }	

Customizing Splash Screen Animation: In Android 12 we get the Splash screen 

instance by calling getSplashScreen() from Activity class. So we can further customize

the animation of the splash screen through Activity.getSplashScreen().

        splashScreen.setOnExitAnimationListener { splashScreenView ->
            val slideUp = ObjectAnimator.ofFloat(
                splashScreenView,
                View.TRANSLATION_Y,
                0f,
                -splashScreenView.height.toFloat()
            )
            slideUp.interpolator = AnticipateInterpolator()
            slideUp.duration = 200L

            // Call SplashScreenView.remove at the end of your custom animation.
            slideUp.doOnEnd { splashScreenView.remove() }

            // Run your animation.
            slideUp.start()
        }	

Code: MainActivity.kt

package com.example.android12splashscreenapi

import android.animation.ObjectAnimator
import android.os.Build
import android.os.Bundle
import android.util.Log
import android.view.View
import android.view.ViewTreeObserver
import android.view.animation.AnticipateInterpolator
import androidx.appcompat.app.AppCompatActivity
import androidx.core.animation.doOnEnd
import androidx.lifecycle.ViewModelProvider

class MainActivity : AppCompatActivity() {
    lateinit var content: View
    lateinit var mainViewModel: MainViewModel
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        mainViewModel = ViewModelProvider(this).get(MainViewModel::class.java)
        content = findViewById(android.R.id.content)
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
            Log.d("MainActivity", "onCreate: I AM RUNNING ON API 12 or higher")
            content.viewTreeObserver.addOnPreDrawListener(object :
                    ViewTreeObserver.OnPreDrawListener {
                    override fun onPreDraw(): Boolean =
                        when {
                            mainViewModel.mockDataLoading() -> {
                                content.viewTreeObserver.removeOnPreDrawListener(this)
                                true
                            }
                            else -> false
                        }
                })

            // custom exit on splashScreen
            splashScreen.setOnExitAnimationListener { splashScreenView ->
                val slideUp = ObjectAnimator.ofFloat(
                    splashScreenView,
                    View.TRANSLATION_Y,
                    0f,
                    -splashScreenView.height.toFloat()
                )
                slideUp.interpolator = AnticipateInterpolator()
                slideUp.duration = 200L

                // Call SplashScreenView.remove at the end of your custom animation.
                slideUp.doOnEnd { splashScreenView.remove() }

                // Run your animation.
                slideUp.start()
            }
        }
    }
}
	

Reference:

1. https://developer.android.com/guide/topics/ui/splash-screen#suspend-drawing

Note: For updating/migraating your older app  for Android 12 please check below

tutorial.

1. https://developer.android.com/guide/topics/ui/splash-screen/migrate

Download Complete Code Here

Hope this will help Someone.

Enjoy Coding ..........................  :)

Read More

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............... :)

Read More

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.......... :)

Read More

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........... :) 

Read More

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....... :)

Read More

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........ :)

Read More

How to get Context in Jetpack Compose

Hello All,

            Many of us facing issue in using/getting context in JetPack Compose.

Here I am sharing a composbale function where I am using context for showing toast message.

 

Read More

Android Jetpack Compose- An easy way to RecyclerView | How to create a RecyclerView in Jetpack Compose | LazyColumn-JetPack Compose

 Hello Friends,

        Today I am going to share a my another JetPack Compose tutorial.

Here I am going to share you the creation of listview/recyclerview using 

Compose.

Creating a listview/recyclerview in Compose:

                                            Creating a listview/recyclerview in Compose is easy.

No Adapter. No View holder.

What is LazyColumn?

- A LazyColumn is a vertically scrolling list that only composes and lays out the currently visible items. It’s similar to a Recyclerview in the classic Android View system.

Download code from here

Hope this will help someone.

Enjoy Coding......................... :)

Read More

Android Jetpack- Jetpack cardview sample

 Hi All,

         Today I am going to share Jetpack CardView sample. Here I am going to create a simple android cardview UI  withoutt using the android Xml and layout editor.

We are going to build the UI using Composable funtion(i.e: using Jetpack Compse).

Column :  We are going to use Column function for arranging the view vertically.

For arranging the view horizontally you can use Row function.

 

 Check MainActivity.kt file for Code,

Download complete code here

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

Read More