How to make your Android apps feel more professional
Tags: android, kotlin, mobile, tristan
Published: 2023-04-18 18:51:19

### Table of contents
1. [What we are talking about](#talk)
2. [Call to actions](#act)
3. [Navigation](#nav)

### My app on the Google Playstore
- [HERE](https://play.google.com/store/apps/details?id=com.elliottsoftware.calftracker)

### GitHub code <a name="github"></a>
- [HERE](https://github.com/thePlebDev/CalfTracker)

### Introduction <a name="intro"></a>
- This series will be an informal demonstration of any problems I face or any observations I make while developing Android apps. Each blog post in this series will be unique and separate from the others, so feel free to look around.

### What we are talking about <a name="talk"></a>
- If you are like me and are still in that stage where your mobile applications seem a little off. Then this blog post is for you. I will be quickly discussing two simple things you can do to make your applications feel more professional

### 1) Call to actions <a name="act"></a>
- The first change you can make to your app to make it feel more professional is to change how you display your `call to actions`. What I mean by `call to action` is anytime your user needs to do something, like create a data set or buy a subscription. I have noticed on big tech applications(like TikTok), all the call to actions animate from the bottom. This might sound a little confusing so let me show you through a diagram:


![Call to action diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6aae0689z5l32olppixv.png)

- Notice how the red section is show to move up and down from the bottom. The more urgent the call to action, the more of the user's screen you should take up.
- The most crucial part of this is the smooth animation from the bottom up and back down again. To achieve this in Android's jetpack compose you can use the [ModalBottomSheetLayout](https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#ModalBottomSheetLayout(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.material.ModalBottomSheetState,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function0)). My implementation of the `ModalBottomSheetLayout` can been seen on GitHub, [Here](https://github.com/thePlebDev/CalfTracker/blob/3cec874ddfaf0127c2148f8cb1b590868bbd1d60/app/src/main/java/com/elliottsoftware/calftracker/presentation/components/main/MainView.kt#L108). It's not very pretty but it works well enough for right now.
- I am not sure how to implement this in IOS, but I am sure the team at Apple has something similar to `ModalBottomSheetLayout`.

### 2) Navigation <a name="nav"></a>
- The second change you can make to your app to make it feel more professional is animate your navigation. As you user navigates through your app make sure to animate the page transition. Now the implementation of this will vary quite different depending on how you implement your navigation. What is important is when you keep your continuity when navigating. When you navigate away from the main screen animate the transition left to right and reverse when the user traverses back to the main screen.

- These are 2 simple things you can do to make your application look a little more professional 


### Conclusion
- Thank you for taking the time out of your day to read this blog post of mine. If you have any questions or concerns please comment below or reach out to me on [Twitter](https://twitter.com/AndroidTristan).