Okay, here I am with the very first layout using XML for Java purposes. I will show you how I understand the idea of designing the view.
First of all you have to think what your app will show.You should always try to reduce the amount of objects on the screen. Simplicity is a key to success.
You have to mind about the differences between screen sizes and resolution. I am using the Xperia Tablet Z (1st generation) which orders me to think more about positioning.
So let’s begin! Designing app has 3 major steps:
- Select the Views (ImageView, TextView etc.)
- Position the Views
- Style the Views
First point – selecting the views
This is the most important (in my opinion) step cause you have to know exactly what objects you want to have on the screen. Remember, less is better. For example let’s look at Google Maps app:
As you can see there are the most important details only. No useless images, textures or gradients.
TextView is responsible for showing text on the screen, ImageView for images of course.
Using these two, you can build really great app, there is no need in introducing more by now.
Point number 2 – positioning
As you can conclude bright and simply design is very important. Try to set things with your own experience. Where do you look most of the time? There should be the most important info.
Positioning is handled by many attributes, for example layout_width or layout_height.
Many depends on the choosen type of layout (Relative/Linear – there is also another but not important at this stage).
When you choose LinearLayout you have to think about the order of the objects, weight (ratio of the size of views) or just a size.
When it comes to RelativeLayout remember that you have children and parent. It means that every TextView or ImageView is a child of the whole – here parent.
When you are positioning a text you do it in a reference to the sides of the screen – that are the maximum height and width of the parent.
Now the last one, number 3 – styling the Views
This is the biggest point and I could write endless story about styling.
What you have to know is that you can set almost every parameter, from color of the text to the padding of the image. Actually I don’t exactly know if padding/margins belong to positioning or styling but let’s say that here is their place.
Here is some of my code (not whole app, just an example) that I have written during the course, app that shows some text on image, it can be everything. I will discuss few atributes which style our layout.
<ImageView android:src="@drawable/a" android:layout_width="match_parent" android:layout_height="wrap_content" android:scaleType="centerCrop" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Happy Birthday John!" android:textColor="@android:color/white" android:textSize="52sp" android:fontFamily="sans-serif-light" android:layout_marginLeft="20dp" android:layout_marginTop="20dp" />
android:src says what file are we using
android:scaleType describes the way that image is cropped
android:textSize can be given in sp or dp, it depends if we want always scalled text or exact size in pixels
android:fontFamily is just a font type (you can find types in documentation)
android:layout_margin describes the gap between side and object (here text)
android:padding describes the gap between side of the View and objet (here text)
That are only few examples but if you want to enlarge your knowledge just click here.
This site is an official Android API Guide which is updated frequently.
That’s all for today, my next step is building more advanced app with more objects and little more tricky positioning/styling.