Android UI Design with Multiple Layout Types
I am about to explode your world in Android UI XML design. This is a great way for new programmers to really expand their UIs to become much more robust and gives you a way to really get things looking how you want them on all screen size!
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <ImageView android:layout_width="fill_parent" android:layout_height="wrap_content" android:src="@drawable/headerimage" /> <ScrollView android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:padding="10dp" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:textSize="30dp" android:text="This is a Text View for the title"" /> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:padding ="5dp" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/something" android:padding="5dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Heres text about this image!" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:padding ="5dp" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/somethingelse" android:padding="5dp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="And heres text about this image!" /> </LinearLayout> </LinearLayout> </ScrollView> </LinearLayout>
What we want to accomplish is a screen that has a header/banner image, and then below it a way for the user to scroll and see a bunch of contents.
To do this, you can see we start with a linear layout, and then put our banner. Then below, we put a ScrollView. You might have had problems with scroll views before, and the problem was probably relating to the fact you probably tried to put a whole bunch of things in it, but then realized you can only have 1 view in a ScrollView! So to get around that, you put ANOTHER view in the scroll view. Here, I put another linear layout, but it could also be a relative or absolute o r frame or whatever. THEN inside this linear layout, I have MORE linear layouts! And then in those layouts I finally put actual objects that we are so used to.
I hope this helps you out, feel free to post any questions or comments, maybe even some screenshots or code of the ridiculous layouts you’re defining!
-Kevin Grant