Common Layouts

[dpnkrg]

I am just wondering how we can use common UI or XMLs in jetpack compose. like we use in Android Activity or in Fragments. Wanted to know about and tag as well.

[cybercoder-naj]

What do you mean by "common UI or XMLs"?

[dpnkrg]

What do you mean by "common UI or XMLs"?

Like in standard practice, we can use the same layout (XML file) in different activity or fragments.

Suppose, the activity_main.xml file can be used in, MainActivity.kt, ActivityOne.kt, ActivityTwo.kt or in FragmentOne.kt or FragmentTwo.kt or if we have multiple layouts in XML form we can use this in a layout like

if the layout file in activity_main.xml and common layouts are, common_header.xml, content_main.xml and common_footer.xml So, I can use those layouts in multiple XML files and use their ids in Activity or Fragments. in XML file we can create a LinearLayout and in layout, we can include the via include tag common_header content_main common_footer

So, we can perform the reusability. My question is that how we can use this in jetpack-compose. Because mainly we are creating UI via Code.

[dpnkrg]

Another Question :

Layout Or UI for Mobile Phones and Tablets. I am just wondering about, how we can achieve or implement layouts for Mobile and Tablets. For example, In the older implementation, we can, implements these res folder layouts for different screens, for the land folder for landscape, and for tablet layout-600dp, layout-720dp.

Describe the solution you'd like How we can achieve this. In terms of UI and Behaviour of app for Mobile and Tablet. Because in general, the layout for tablet and mobile is different in terms of sizing, detailing and UX.

Describe alternatives you've considered Please check the Gmail app on Mobile and Tablet.

Additional context I am also attaching the screens shots for your reference.

Mobile Phone:

Tablet :

Second Thing As of now if we are using, XML for layouts we can use same layout for different activities and fragments. I am just wondering how we can achieve in jetpack compose.

If you can guide us in this context that will be very helpful.

Learning and implementing...

[cybercoder-naj]

What do you mean by "common UI or XMLs"?

Like in standard practice, we can use the same layout (XML file) in different activity or fragments.

Suppose, the activity_main.xml file can be used in, MainActivity.kt, ActivityOne.kt, ActivityTwo.kt or in FragmentOne.kt or FragmentTwo.kt or if we have multiple layouts in XML form we can use this in a layout like

if the layout file in activity_main.xml and common layouts are, common_header.xml, content_main.xml and common_footer.xml So, I can use those layouts in multiple XML files and use their ids in Activity or Fragments. in XML file we can create a LinearLayout and in layout, we can include the via include tag common_header content_main common_footer

So, we can perform the reusability. My question is that how we can use this in jetpack-compose. Because mainly we are creating UI via Code.

Yes, the main functionality of Jetpack Compose is to use Reusable Composable functions, For example,

// CommonLayouts.kt

@Composable
fun Header(content: @Composable () -> Unit) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.Green)
            .padding(horizontal = 8.dp)
    ) {
        content();
    }
}

@Composable
fun Footer(color: Color, message: String) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(color)
            .padding(horizontal = 8.dp)
    ) {
        Box(contentAlignment = Alignment.Center) {
            Text(text = message)
        }
    }
}

By defining such methods, you can call them inside any other layout as per your wish.

// MainActivity.kt
class MainActivity: AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentLayout {
            Header {
                Button(onClick = {/* TODO */}) {
                    Text(text = "Click me!")
                }
            }
            /* More content */
            Footer(Color.Red, "Jetpack Compose")
        }
    }
}

Note: I have not tested this code, but I am sure the above code should work. If it doesn't, there maybe required a few minor tweeks. I hope you get the general idea.

As per your question regarding the responsive design in Jetpack Compose, I haven't yet researched on that topic yet. It's a good question, I shall look around.

[dpnkrg]

What do you mean by "common UI or XMLs"?

Like in standard practice, we can use the same layout (XML file) in different activity or fragments. Suppose, the activity_main.xml file can be used in, MainActivity.kt, ActivityOne.kt, ActivityTwo.kt or in FragmentOne.kt or FragmentTwo.kt or if we have multiple layouts in XML form we can use this in a layout like if the layout file in activity_main.xml and common layouts are, common_header.xml, content_main.xml and common_footer.xml So, I can use those layouts in multiple XML files and use their ids in Activity or Fragments. in XML file we can create a LinearLayout and in layout, we can include the via include tag common_header content_main common_footer So, we can perform the reusability. My question is that how we can use this in jetpack-compose. Because mainly we are creating UI via Code.

Yes, the main functionality of Jetpack Compose is to use Reusable Composable functions, For example,

// CommonLayouts.kt

@Composable
fun Header(content: @Composable () -> Unit) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.Green)
            .padding(horizontal = 8.dp)
    ) {
        content();
    }
}

@Composable
fun Footer(color: Color, message: String) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(color)
            .padding(horizontal = 8.dp)
    ) {
        Box(contentAlignment = Alignment.Center) {
            Text(text = message)
        }
    }
}

By defining such methods, you can call them inside any other layout as per your wish.

// MainActivity.kt
class MainActivity: AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentLayout {
            Header {
                Button(onClick = {/* TODO */}) {
                    Text(text = "Click me!")
                }
            }
            /* More content */
            Footer(Color.Red, "Jetpack Compose")
        }
    }
}

Note: I have not tested this code, but I am sure the above code should work. If it doesn't, there maybe required a few minor tweeks. I hope you get the general idea.

As per your question regarding the responsive design in Jetpack Compose, I haven't yet researched on that topic yet. It's a good question, I shall look around.

Thank you for your suggestion. I will try and update.