Posts Tagged ‘ layout ’

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

addContentView example simplified

Welcome to inphamousdevelopment.com! You were probably directed here from my portfolio site, inphamous.com, or by some miracle you were looking for some android code on Google and you happened to stumble here. Basically this site is a way I’m contributing back to the internet by sharing the code I’ve created and found to help your android producing experience easier.

Today, for a first post, I will make a simple yet demanded contribution. First, let me type out all of the searches I made before I got close to my answer

addContentView help, addContentView Android, addContentView Code Android, Adding a xml layout onto a canvas android, how to inflate a view with an xml file, multiple layout xml android, etc, etc.

The list goes on, next time I will actually better document what I searched for, so that hopefully those same searches will direct you here! In any case, by reading those searches, maybe you can see what I wanted to do. I want to draw a couple of buttons from an xml layout onto a canvas. This solution will work with drawing any xml layout onto anything else however.

LayoutInflater inflater = getLayoutInflater();
View tmpView;
tmpView = inflater.inflate(R.layout.extra_layout, null);
getWindow().addContentView(tmpView, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT,
ViewGroup.LayoutParams.FILL_PARENT));

Alternatively, if you want the code to be a little slimmer, just put the inflater return directly into the addcontent function, as so

LayoutInflater inflater = getLayoutInflater();
getWindow().addContentView(inflater.inflate(R.layout.extra_layout, null), new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT,
ViewGroup.LayoutParams.FILL_PARENT));

This code goes into your onCreate(Bundle whateever), preferably right underneath where you just called “setContentView(R.layout.main);”

If you found this helpful, leave a comment! I make no claim that this is the best implementation for this idea, but it works!

Buttons xml overlay

 

-Kevin Grant