Github Link: https://github.com/tutorialseu/Voice-Changer-App/tree/build_ui

To get started, we will be creating a new Empty Compose Activity Project.

After the project is created successfully, open MainActivity.kt and remove the Greeting Function and the references to it in onCreate and DefaultPreview. So that we now have the below codes in the file.

MainActivity.Kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            VoiceChangerTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    
                }
            }
        }
    }
}

//Todo 4: Create MainView composable function
@Composable
fun MainView(){

}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    VoiceChangerTheme {
        
    }
}

We have also added a new composable MainView

Building The User Interface.

The User interface will be a very simple one, using the screenshot above,

1. is a card view hosting a TextView that will show the selected voice effect,
2. is a button that will enable users to join and leave a channel,
3. is where the user will enter channel name to join,
4. is a list of voice effects.

To begin, we will call MainView function within DefaultPreview function and setContent, MainActivity will now look like so

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            VoiceChangerTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    MainView()
                }
            }
        }
    }
}

@Composable
fun MainView(){

}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    VoiceChangerTheme {
        MainView()
    }
}

In MainView composable we will add a Column layout to align all elements vertically on the screen

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(bottom = 60.dp),
    verticalArrangement = Arrangement.Top
){
}

Using the Modifier, we set the Column to fillMaxSize which includes the vertical and horizontal axis with a bottom padding of 60dp. We also align the elements vertically to the bottom using verticalArrangement.

Designing UI number 1 from the screenshot