Automating Beautiful Screenshots Using Jetpack Compose | by sinasamaki | Apr, 2022

Create versatile designs in your Android apps

Screenshots are the primary impression of the person on our app. Subsequently, to place our greatest foot ahead, we want the perfect designed screenshots to be introduced.

However graphically designing screenshots is time-consuming. After arising with a novel design, you continue to want to use it to use to all variants of your app. That may be telephones or tablets, a number of localizations, and many others. And when you’ve an replace to your interface, you’ll have to redo this course of, or no less than for the affected screenshots.

Automated screenshots have been in a position to remedy most of those issues. There are instruments like fastlane that allow us to mechanically take screenshots of our app in all completely different variations we need, all in a fraction of the time an individual would take.

The draw back to that is that automating taking of screenshots takes away the individuality that helps in standing out from the group.

On this article, we’ll use UI testing and Jetpack Compose to design our screenshots and mechanically seize them utilizing fastlane.

class MyComposeTest   

@get:Rule
val composeTestRule = createAndroidComposeRule<TestActivity>()

@Rule
@JvmField val localeTestRule = LocaleTestRule()

@Before
enjoyable init()
Screengrab
.setDefaultScreenshotStrategy(
UiAutomatorScreenshotStrategy()
)

@Test
enjoyable simpleScreenshot()
composeTestRule.setContent
ScreenshotsTheme
App()


composeTestRule.takeScreenshot("simpleScreenshot")

Right here is tips on how to take a easy screenshot. Earlier than the check itself, we have now some code for establishing fastlane screenshot instrument. However a very powerful half is inside composeTestRule.setContent. In right here, we are able to use any composable obtainable when designing a standard app. For instance, we are able to add some padding to your complete app and a shadow.

composeTestRule.setContent   
ScreenshotsTheme
Field(
modifier = Modifier
.fillMaxSize()
.padding(30.dp)
.shadow(
elevation = 18.dp,
form = RoundedCornerShape(10.dp))
.clip(RoundedCornerShape(10.dp))
)
App()


// card screenshot From right here on, you’re solely restricted by your creativeness (or your designer’s ;). You might add a title that explains the screenshot, add a background, spotlight a characteristic, and many others.

composeTestRule.setContent {  
ScreenshotsTheme
Field(
Modifier
.fillMaxSize()
.background(Shade.White)
)

Field(
modifier = Modifier
.align(Alignment.TopEnd)
.offset(x = 10.dp, y = 30.dp)
.dimension(200.dp)
.background(
shade = MaterialTheme.colours.secondary,
form = CircleShape
)
)
Field(
modifier = Modifier
.align(Alignment.TopStart)
.offset(x = 40.dp, y = 130.dp)
.dimension(50.dp)
.background(
shade = MaterialTheme.colours.main,
form = CircleShape
)
)
Column(
modifier = Modifier
.verticalScroll(
state = rememberScrollState(),
reverseScrolling = false)
.fillMaxSize()
)

Textual content(
textual content = "Duties app",
textAlign = TextAlign.Heart,
fontSize = 48.sp,
fontWeight = FontWeight.Black,
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 94.dp)
)

Field(
modifier = Modifier
.fillMaxWidth()
.top(640.dp)
.padding(horizontal = 30.dp)
.shadow(
elevation = 18.dp,
form = RoundedCornerShape(10.dp))
.clip(RoundedCornerShape(10.dp))
)
App()




}

On this instance, I’ve added some textual content above the app and offset it downwards. I additionally added a easy background utilizing two containers. You might additionally instantiate two variations of your app to show a number of variations of your app.

Row(...)   
Field(
...
)
ScreenshotsTheme(darkTheme = false)
App()

Field(
...
)
ScreenshotsTheme(darkTheme = true)
App()


Right here we have now a darkish and lightweight model of the app aspect by aspect. As a result of App is only a composable, we are able to simply create two variations of it aspect by aspect. That is helpful when exhibiting completely different states of our software in a single screenshot.

For this pattern, I’m utilizing fastlane to mechanically run the UI assessments and take and handle the screenshots. It may take screenshots in a number of languages in case your app is localized and mechanically add them to the play retailer. For this pattern, I simply have a easy lane to make a clear construct and take the screenshots.

lane :screenshots do  
gradle(job: "clear assembleDebug assembleAndroidTest")
screengrab
finish

I even have a file that defines the place the apks are and which languages I want to take screenshots of.

locales ['en-US', 'de-DE']  
clear_previous_screenshots true
tests_apk_path 'app/construct/outputs/apk/androidTest/debug/app-debug-androidTest.apk'
app_apk_path 'app/construct/outputs/apk/debug/app-debug.apk'
test_instrumentation_runner 'androidx.check.runner.AndroidJUnitRunner'

So I also can mechanically generate German screenshots with the identical design and code.

The way you arrange the automation is as much as you and your workflow. However the primary level of this text was to show how Jetpack Compose permits us to be versatile with the designs of our screenshots. I hope with this you’ll be able to create superior screenshots. The supply code for the pattern challenge is here.

Thanks for studying and good luck!

More Posts