{"id":25851774,"url":"https://github.com/fekri8614/jetpack-compose-samples","last_synced_at":"2026-06-11T17:31:01.201Z","repository":{"id":179387921,"uuid":"627490939","full_name":"fekri8614/jetpack-compose-samples","owner":"fekri8614","description":"Jetpack-Compose examples","archived":false,"fork":false,"pushed_at":"2023-04-13T15:34:23.000Z","size":5,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-23T21:12:27.437Z","etag":null,"topics":["androiddevelopment","jetpack-compose","jetpack-compose-example","kotlin","kotlin-android","programming-training"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fekri8614.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-04-13T15:17:40.000Z","updated_at":"2023-04-13T15:36:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"569af467-7436-4325-adf2-1876496c24c1","html_url":"https://github.com/fekri8614/jetpack-compose-samples","commit_stats":null,"previous_names":["fekri8614/jetpack-compose-samples"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fekri8614/jetpack-compose-samples","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fekri8614%2Fjetpack-compose-samples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fekri8614%2Fjetpack-compose-samples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fekri8614%2Fjetpack-compose-samples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fekri8614%2Fjetpack-compose-samples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fekri8614","download_url":"https://codeload.github.com/fekri8614/jetpack-compose-samples/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fekri8614%2Fjetpack-compose-samples/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34211061,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-11T02:00:06.485Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["androiddevelopment","jetpack-compose","jetpack-compose-example","kotlin","kotlin-android","programming-training"],"created_at":"2025-03-01T13:18:32.088Z","updated_at":"2026-06-11T17:31:01.195Z","avatar_url":"https://github.com/fekri8614.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# jetpack-compose-samples\n*Use these code-samples to practice the Jetpack Compose!*\n\n### ___\n\n    @SuppressLint(\"UnusedMaterialScaffoldPaddingParameter\")\n    @Composable\n    fun ScaffoldDemo() {\n        val materialBlue700 = Color(0xFF1976D2)\n        val scaffoldState = rememberScaffoldState(rememberDrawerState(DrawerValue.Closed))\n        Scaffold(\n            scaffoldState = scaffoldState,\n            topBar = {\n                TopAppBar(title = {\n                    Text(\n                        \"TopAppBar\",\n                        fontSize = 30.sp,\n                        style = TextStyle(color = Color.White)\n                    )\n                }, backgroundColor = materialBlue700)\n            },\n            floatingActionButtonPosition = FabPosition.End,\n            floatingActionButton = {\n                FloatingActionButton(onClick = {}) {\n                    Text(\"X\")\n                }\n            },\n            drawerContent = { Text(text = \"drawerContent\") },\n            content = { Text(\"BodyContent\") },\n            bottomBar = { BottomAppBar(backgroundColor = materialBlue700) { Text(\"BottomAppBar\") } }\n        )\n    }\n\n---\n\n    @Composable\n    fun ColumnExample() {\n        Column(\n            modifier = Modifier\n                .width(100.dp)\n                .padding(4.dp)\n                .background(Color.LightGray),\n            verticalArrangement = Arrangement.Center,\n            horizontalAlignment = Alignment.CenterHorizontally\n        ) {\n            Text(text = \"Hello, World!\")\n            Text(text = \"Hello, World!2\")\n        }\n    }\n\n---\n\n    @Composable\n    fun RowExample() {\n        Row(\n            horizontalArrangement = Arrangement.SpaceEvenly,\n            modifier = Modifier.fillMaxWidth()\n        ) {\n            Text(text = \"Hello, world!\")\n            Text(text = \"Hello, world!2\")\n        }\n    }\n\n---\n\n    @Composable\n    fun BoxExample() {\n        Box(modifier = Modifier.fillMaxSize()) {\n            Text(\n                text = \"This text is write first\",\n                modifier = Modifier\n                    .align(Alignment.TopCenter)\n                    .padding(top = 8.dp)\n            )\n            Box(\n                modifier = Modifier\n                    .align(Alignment.TopCenter)\n                    .background(Color.Green)\n                    .fillMaxHeight()\n                    .width(50.dp)\n            )\n            Text(text = \"This text is write last\", modifier = Modifier.align(Alignment.Center))\n            FloatingActionButton(\n                modifier = Modifier\n                    .align(Alignment.BottomEnd)\n                    .padding(12.dp),\n                onClick = {}\n            ) {\n                Text(\"+\")\n            }\n        }\n    }\n\n---\n\n    @Composable\n    fun CanvasDrawExample() {\n        Canvas(modifier = Modifier.fillMaxSize()) {\n            drawRect(Color.Blue, topLeft = Offset(0f, 0f), size = Size(this.size.width, 55f))\n            drawCircle(Color.Red, center = Offset(100f, 200f), radius = 80f)\n            drawLine(\n                Color.Green, Offset(20f, 0f),\n                Offset(200f, 200f), strokeWidth = 5f\n            )\n            drawArc(\n                Color.Black,\n                0f,\n                60f,\n                useCenter = true,\n                size = Size(300f, 300f),\n                topLeft = Offset(60f, 60f)\n            )\n        }\n    }\n\n---\n\n    @Composable\n    fun ImageResourceDemo() {\n        val image: Painter = painterResource(id = R.drawable.composelogo)\n        Image(painter = image, contentDescription = \"Compose logo\")\n    }\n\n---\n\n    @Composable\n    fun LazyColumnDemo() {\n        val list = listOf\u003cString\u003e(\"A\", \"B\", \"C\", \"D\") + ((0..100).map { it.toString() })\n\n        LazyColumn(modifier = Modifier.fillMaxHeight()) {\n            items(items = list, itemContent = { item -\u003e\n                Log.d(\"COMPOSE\", \"This get rendered $item\")\n                when (item) {\n                    \"A\" -\u003e {\n                        Text(text = item, style = TextStyle(fontSize = 80.sp))\n                    }\n                    \"B\" -\u003e {\n                        Button(onClick = {}) {\n                            Text(text = item, style = TextStyle(fontSize = 80.sp))\n                        }\n                    }\n                    \"C\" -\u003e {\n                        // do nothing\n                    }\n                    \"D\" -\u003e {\n                        Text(text = item)\n                    }\n                    else -\u003e {\n                        Text(text = item, style = TextStyle(fontSize = 80.sp))\n                    }\n                }\n            })\n        }\n    }\n\n---\n\n    @Composable\n    fun LazyRowDemo() {\n        val list = listOf\u003cString\u003e(\"A\", \"B\", \"C\", \"D\") + ((0..100).map { it.toString() })\n\n        LazyRow(modifier = Modifier.fillMaxHeight()) {\n            items(items = list, itemContent = { item -\u003e\n                Log.d(\"ComposeLog\", \"This get rendered $item\")\n                when (item) {\n                    \"A\" -\u003e {\n\n                    }\n                    \"B\" -\u003e {\n                        Button(onClick = {}) {\n                            Text(text = item, style = TextStyle(fontSize = 80.sp))\n                        }\n                    }\n                    \"C\" -\u003e {\n                        //Do Nothing\n                    }\n                    \"D\" -\u003e {\n                        Text(text = item)\n                    }\n                    else -\u003e {\n                        Text(text = item, style = TextStyle(fontSize = 80.sp))\n                    }\n                }\n            })\n        }\n    }\n\n---\n\n    @Composable\n    fun LazyVerticalGridDemo() {\n        val list = (1..10).map { it.toString() }\n\n        LazyVerticalGrid(\n            columns = GridCells.Fixed(2),\n            contentPadding = PaddingValues(\n                start = 12.dp,\n                top = 16.dp,\n                end = 12.dp,\n                bottom = 16.dp\n            ),\n            content = {\n                items(list.size) { index -\u003e\n                    Card(\n                        backgroundColor = Color.Red,\n                        modifier = Modifier\n                            .padding(4.dp)\n                            .fillMaxWidth(),\n                        elevation = 8.dp\n                    ) {\n                        Text(\n                            text = list[index],\n                            fontWeight = FontWeight.Bold,\n                            fontSize = 30.sp,\n                            color = Color(0xFFFFFFFF),\n                            textAlign = TextAlign.Center,\n                            modifier = Modifier.padding(16.dp)\n                        )\n                    }\n                }\n            }\n        )\n    }\n\n---\n\n    @Composable\n    fun RectangleShapeDemo() {\n        ExampleBox(shape = CutCornerShape(8.dp))\n    }\n\n    @Composable\n    fun ExampleBox(shape: Shape) {\n        Column(\n            modifier = Modifier\n                .fillMaxWidth()\n                .wrapContentSize(Alignment.Center)\n                .padding(8.dp)\n        ) {\n            Box(\n                modifier = Modifier\n                    .size(100.dp)\n                    .clip(shape)\n                    .background(Color.Red)\n            )\n        }\n    }\n\n---\n\n    @Composable\n    fun TextExample() {\n        Column {\n            Text(text = \"Just a Text\")\n            Text(text = \"Text with Cursive font\", style = TextStyle(fontFamily = FontFamily.Cursive))\n            Text(\n                text = \"Text with LineThrough\",\n                style = TextStyle(textDecoration = TextDecoration.LineThrough)\n            )\n            Text(\n                text = \"Text with Underline\",\n                style = TextStyle(textDecoration = TextDecoration.Underline)\n            )\n            Text(\n                text = \"Text with Underline, LineThrough and bold\",\n                style = TextStyle(\n                    textDecoration = TextDecoration.combine(\n                        listOf(\n                            TextDecoration.LineThrough,\n                            TextDecoration.Underline\n                        )\n                    ),\n                    fontWeight = FontWeight.Bold\n                )\n            )\n        }\n    }\n\n---\n\n    @Composable\n    fun AlertDialogSample() {\n        MaterialTheme {\n            Column {\n                val openDialog = remember { mutableStateOf(false) }\n\n                Button(onClick = { openDialog.value = true }) {\n                    Text(text = \"Click me!\")\n                }\n\n                if (openDialog.value) {\n\n                    AlertDialog(\n                        onDismissRequest = { openDialog.value = false },\n                        title = { Text(text = \"Dialog Title\") },\n                        text = { Text(text = \"Here's a Text!\") },\n                        confirmButton = {\n                            Button(\n                                onClick = { openDialog.value = false }\n                            ) {\n                                Text(text = \"Confirm\")\n                            }\n                        },\n                        dismissButton = {\n                            Button(\n                                onClick = { openDialog.value = false }\n                            ) {\n                                Text(text = \"Dismiss\")\n                            }\n                        }\n                    )\n\n                }\n            }\n        }\n    }\n\n ---\n\n    @Composable\n    fun ButtonExample() {\n        Button(\n            onClick = { /*Do something!*/ },\n            colors = ButtonDefaults.buttonColors(backgroundColor = Color.Yellow)\n        ) {\n            Text(text = \"Button\")\n        }\n    }\n\n---\n\n    @Composable\n    fun OutlinedButtonExample() {\n        OutlinedButton(onClick = { /*Do something!*/ }) {\n            Text(text = \"Outlined button!\")\n        }\n    }\n\n---\n\n    @Composable\n    fun TextButtonExample() {\n        TextButton(onClick = { /*Do something*/ }) {\n            Text(text = \"TextButton!\")\n        }\n    }\n\n---\n\n    @Composable\n    fun CheckBoxDemo() {\n        val checkedState = remember { mutableStateOf(true) }\n\n        Checkbox(\n            checked = checkedState.value,\n            onCheckedChange = {\n                checkedState.value = it\n            }\n        )\n    }\n\n---\n\n    @Composable\n    fun CircularProgressIndicatorSample() {\n        var progress by remember { mutableStateOf(0.1f) }\n        val animatedProgress = animateFloatAsState(\n            targetValue = progress,\n            animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec\n        ).value\n\n        Column(horizontalAlignment = Alignment.CenterHorizontally) {\n            Spacer(modifier = Modifier.height(30.dp))\n            Text(\"CircularProgressIndicator with undefined progress\")\n            CircularProgressIndicator()\n\n            Spacer(modifier = Modifier.height(30.dp))\n            Text(\"CircularProgressIndicator with progress set by buttons\")\n            CircularProgressIndicator(progress = animatedProgress)\n\n            Spacer(modifier = Modifier.height(30.dp))\n            OutlinedButton(\n                onClick = {\n                    if (progress \u003c 1f) progress += 0.1f\n                }\n            ) {\n                Text(text = \"Increase\")\n            }\n            OutlinedButton(\n                onClick = {\n                    if (progress \u003e 0f) progress -= 0.1f\n                }\n            ) {\n                Text(text = \"Decrease\")\n            }\n        }\n    }\n\n---\n\n    @Composable\n    fun DropdownDemo() {\n        var expanded by remember { mutableStateOf(false) }\n        val items = listOf\u003cString\u003e(\"A\", \"B\", \"C\", \"D\", \"E\")\n        val disabledValue = \"B\"\n        var selectedIndex by remember { mutableStateOf(0) }\n\n        Box(\n            modifier = Modifier\n                .fillMaxSize()\n                .wrapContentSize(Alignment.TopStart)\n        ) {\n            Text(\n                text = items[selectedIndex],\n                modifier = Modifier\n                    .fillMaxWidth()\n                    .clickable { expanded = true }\n                    .background(Color.Gray)\n            )\n            DropdownMenu(\n                expanded = expanded,\n                onDismissRequest = { expanded = false },\n                modifier = Modifier\n                    .fillMaxWidth()\n                    .background(Color.Red)\n            ) {\n                items.forEachIndexed { index, s -\u003e\n                    DropdownMenuItem(\n                        onClick = {\n                            selectedIndex = index\n                            expanded = false\n                        }\n                    ) {\n                        val disabledText = if (s == disabledValue) \" (Disabled)\" else \"\"\n                        Text(text = s + disabledText)\n                    }\n                }\n            }\n        }\n    }\n\n---\n\n    @Composable\n    fun FloatingActionButtonDemo() {\n        FloatingActionButton(onClick = { /*do something*/ }) {\n            Text(text = \"FloatingActionButton\", modifier = Modifier.padding(8.dp))\n        }\n    }\n\n---\n\n    @Composable\n    fun ExtendedFloatingActionButtonDemo() {\n        ExtendedFloatingActionButton(\n            text = { Text(text = \"ExtendedFloatingActionButton\") },\n            icon = { Icon(Icons.Filled.Favorite, \"\") },\n            onClick = { /*do something*/ },\n            elevation = FloatingActionButtonDefaults.elevation(8.dp)\n        )\n    }\n\n---\n\n    @Composable\n    fun ModalDrawerSample() {\n        val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)\n        val scope = rememberCoroutineScope()\n\n        ModalDrawer(\n            drawerState = drawerState,\n            drawerContent = {\n                Column {\n                    Text(text = \"Text in drawer\")\n                    Button(\n                        onClick = {\n                            scope.launch { drawerState.close() }\n                        }\n                    ) {\n                        Text(text = \"Close!\")\n                    }\n                }\n            },\n            content = {\n                Column {\n                    Text(text = \"Text in BodyContext\")\n                    Button(\n                        onClick = {\n                            scope.launch { drawerState.open() }\n                        }\n                    ) {\n                        Text(text = \"Open!\")\n                    }\n                }\n            }\n        )\n    }\n\n---\n\n    @Composable\n    fun RadioButtonSample() {\n        val radioOptions = listOf\u003cString\u003e(\"A\", \"B\", \"C\")\n        val (selectedOption, onOptionSelected) = remember { mutableStateOf(radioOptions[1]) }\n\n        Column {\n            radioOptions.forEach { text -\u003e\n                Row(\n                    Modifier\n                        .fillMaxWidth()\n                        .selectable(\n                            selected = (text == selectedOption),\n                            onClick = {\n                                onOptionSelected(text)\n                            }\n                        )\n                        .padding(horizontal = 16.dp)\n                ) {\n                    RadioButton(\n                        selected = (text == selectedOption),\n                        onClick = { onOptionSelected(text) }\n                    )\n                    Text(\n                        text = text,\n                        style = MaterialTheme.typography.body1.merge(),\n                        modifier = Modifier.padding(start = 16.dp)\n                    )\n                }\n            }\n        }\n    }\n\n---\n\n    @Composable\n    fun MySliderDemo() {\n        var sliderPosition by remember { mutableStateOf(0f) }\n        Text(text = sliderPosition.toString())\n        Slider(value = sliderPosition, onValueChange = { sliderPosition = it })\n    }\n\n---\n\n    @Composable\n    fun SnackbarDemo() {\n        Column {\n            val (snackBarVisibleState, setSnackBarState) = remember { mutableStateOf(false) }\n\n            Button(\n                onClick = {\n                    setSnackBarState(!snackBarVisibleState)\n                }\n            ) {\n                if (snackBarVisibleState) {\n                    Text(text = \"Hide!\")\n                } else {\n                    Text(text = \"Show!\")\n                }\n            }\n            if (snackBarVisibleState) {\n                Snackbar(\n                    action = {\n                        Button(onClick = { }) {\n                            Text(text = \"My Action\")\n                        }\n                    },\n                    modifier = Modifier.padding(8.dp)\n                ) {\n                    Text(text = \"This is a Snackbar!\")\n                }\n            }\n        }\n    }\n\n---\n\n    @Composable\n    fun SwitchDemo() {\n        val checkedState = remember { mutableStateOf(true) }\n\n        Switch(\n            checked = checkedState.value,\n            onCheckedChange = { checkedState.value = it }\n        )\n    }\n\n---\n\n    @Composable\n    fun TextFieldDemo() {\n        Column(modifier = Modifier.padding(16.dp)) {\n            val textState = remember { mutableStateOf(TextFieldValue()) }\n\n            TextField(value = textState.value, onValueChange = { textState.value = it })\n            Text(text = \"The textfield has this text: ${textState.value.text}\")\n        }\n    }\n    \n### ___\n\n***I hope you enjoy!!✌😋😍😍***\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffekri8614%2Fjetpack-compose-samples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffekri8614%2Fjetpack-compose-samples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffekri8614%2Fjetpack-compose-samples/lists"}