Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Mobile / Android

Android UI Layout and Controls

4.75/5 (7 votes)
24 Aug 2014CPOL1 min read 19.2K  
In this tutorial, I will go over many of the Android UI Layouts and Controls. Providing a few examples I will bring you step by step through creating, and implementing these to the completion of an Android Application.

Introduction

This step by step guild is packed full of screen shots to guide you in the journey of learning about the different Android UI Layouts and Controls and how to use them in an application. Ready to code?  

Background

This tutorial was made using Windows 8, Eclipse Platform 4.2.2 and the Android ADK 23.0.2.1259578. 

Lets learn...

Step 1:  Definitions and Basic Components

 

Image 1

 

Image 2

 

Image 3

 

Image 4

 

Image 5

 

Image 6

 

Image 7

 

Image 8

 

Image 9

 

Image 10

 

Image 11

 

Step 2:  Create a Relative Layout with some UI elements

 

Image 12

 

Image 13

 

Image 14

 

Image 15

 

Image 16

 

Image 17

Image 18

 

Image 19

 

Image 20

 

Image 21

 

Image 22

 

Image 23

 

Image 24

 

Image 25

 

Image 26

 

Image 27

 

Image 28

 

Image 29

 

Image 30

 

Step 3:  Change to LinearLayout with the same UI elements and two other layouts

 

Image 31

 

Image 32

 

Image 33

 

Image 34

 

Image 35

 

Image 36

 

Image 37

 

Image 38

 

Image 39

 

Image 40

 

Image 41

 

Image 42

 

Image 43

 

Image 44

 

Image 45

 

Image 46

 

Image 47

 

Image 48

 

Image 49

 

Image 50

 

Image 51

 

Image 52

 

Step 4:  Code using the current UI Layouts and Controls

 

Image 53

 

Image 54

 

Image 55

 

Image 56

 

Image 57

 

Image 58

 

Image 59

 

Image 60

 

Image 61

 

Image 62

 

Step 5:  Add an include Other Layout with a UI Control

 

Image 63

 

Image 64

 

Image 65

 

Image 66

 

Image 67

 

Image 68

 

Step 6:  Add code for our newly added UI Control and run our application

 

Image 69

 

Image 70

 

Image 71

 

Image 72

 

Image 73

 

Image 74

 

 

Points of Interest

When I started this tutorial I had never used a ProgressBar, RatingBar, or SeekBar before, so I learned quite a bit through the process of creating it. :)  

History

 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)