App development using Kodular
All tutorialsHomePage
  • 📱Build your first app on Kodular
    • App design
    • App logic
    • Test your app
    • Fixing the jumping button
    • Adding a button click sound effect
  • How to guide
Powered by GitBook
On this page

Was this helpful?

  1. Build your first app on Kodular

App design

This section of the tutorial describes how to design the app interface.

PreviousBuild your first app on KodularNextApp logic

Last updated 1 month ago

Was this helpful?

  • While the Screen1 is selected under the component tree, change the Align horizontal property of the Screen1 to Center

  • Drag and drop the Image palette and a Button palette on the phone view.

  • Click on the Image placeholder either on the phone screen or on the component tree. Select the asset upload button next to the Designer tab to upload the provided image.

  • Once uploaded, close the upload asset window.

  • While the Image placeholder is selected, change the Picture property from None to the uploaded picture by clicking on the dropdown menu. Additionally, tick off the box Scale Picture To Fit

  • Select the Button1 either from the phone screen or from the component tree. Change the default text to Hide and make the button wider by choosing Fill Parent for the width property.

Pro tip: you can upload an image by clicking on the up arrow icon in the Picture property.

Pro tip: you can choose a number or a percentage if you want a different behaviour

📱
👏
👏
Uploading asset