Posts Tagged ‘ xml ’

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

Using a ViewSwitcher in your Android xml layouts

ViewSwitcher is an interesting thing, and you may find use for it in your project for various uses.  Ive implemented it for you in a thread type fashion, where it could act as a loading screen.  Don’t think this is all it is useable for however.  I’ve attached the project below.

The basic premise is you put the <ViewSwitcher> tag around 2 different layouts in your xml file, and then declare a variable in your main activity, a ViewSwitcher.  Then, to switch  between views, just call switcher.showNext() and switcher.showPrevious().

private ViewSwitcher switcher;
private static final int REFRESH_SCREEN = 1;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.main);

	switcher = (ViewSwitcher) findViewById(R.id.profileSwitcher);
	startScan();
}
... Finish the rest of your program

And this is how you will switch between the views

switcher.showNext();  // Switches to the next view
switcher.showPrevious();  // Switches to the previous view

Showing the ViewSwitcher tag in action!

<?xml version="1.0" encoding="utf-8"?>
<ViewSwitcher xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/profileSwitcher"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <ProgressBar
        android:id="@+id/progressbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true" />
    <TextView
        android:text="Loading…"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_toRightOf="@+id/progressbar"
        android:gravity="center"/>
</RelativeLayout>

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal" >
    <TextView
        android:text="Finished!"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_centerVertical="true" />
</RelativeLayout>

</ViewSwitcher>

Heres some screenshots, and the source as promised, enjoy!

http://www.inphamous.com/code/examples/ViewSwitcherExample.zip

 

-Kevin Grant

Creating easy custom buttons in Android

Wouldn’t it be cool if you could make your own buttons? Well, I’ve done a bunch of hax here and there where I use ImageViews for buttons and switching the image on press and such, and sure, that works. But it isn’t as clean, and well coded as this implementation here.

What this is going to involve is putting an XML layout in your drawables folder. I know, you’re scared. I was too at first. But now, I’m creating custom buttons like its going out of style (which it probably is).

The essence here is we are going to take the style of the original Android button, and override its image resources with our own, while leaving the rest of the functionality alone. Lets start with putting the images for the button you want to use.  This example just uses an up and a down state.

Just right click and save as for these images.  Copy them into your drawables folder.

Now, the magic happens.  Create a new file in your drawables folder and call it “new_button.xml”

Paste the following code into this file

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_window_focused="false"
android:state_enabled="true"
android:drawable="@drawable/custom_button_up" />
<item
android:state_window_focused="false"
android:state_enabled="false"
android:drawable="@drawable/custom_button_up" />
<item
android:state_pressed="true"
android:drawable="@drawable/custom_button_down" />
<item
android:state_focused="true" android:state_enabled="true"
android:drawable="@drawable/custom_button_down" />
<item
android:state_enabled="true"
android:drawable="@drawable/custom_button_up" />
<item
android:state_focused="true"
android:drawable="@drawable/custom_button_up" />
<item
android:drawable="@drawable/custom_button_up" />
</selector>

Excellent. For now, we are just dealing with 2 states, pressed and unpressed. The variables you see above make it clear the different button states you could have if you wanted.

Now, we need to make a “styles.xml” file, this is where your program will look for styles that you have declared. Where do I put this styles.xml you wonder? In that folder you probably never use, the “values” folder. So, go to your values folder, and create a file called “styles.xml” and paste this code into it:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="NewButton.Button" parent="@android:style/Widget.Button">
<item name="android:background">@drawable/new_button</item>
</style>
</resources>

Excellent! Now you’re ready to use your custom buttons! In your main layout, or whereever you want to use this button, call this in the code

<Button
android:id="@+id/custombutton"
style="@style/NewButton.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>

If all goes well, this is what it should look like!

If you just skimmed to the bottom looking for source code, youre in luck. Download below.  Helpful?

http://www.inphamous.com/code/examples/Custom_Buttons.zip

Somthing extra…

Try this-  Since its still a button, you can add text on top of this bad boy.  Keep that in mind when designing your own custom buttons.  Someday, I will enlighten you on how button images properly stretch using the 9 patch tool.  Heres the guide from google if you don’t want to wait for me

http://developer.android.com/guide/developing/tools/draw9patch.html

-inph

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