What should my Android Layout look like?

Question

I recently asked a question about how to add a view on top of a view, after asking that I realized I needed to added a better layout to my app before proceeding further.

I was reading Android Layout Tricks but noticed it was specifically for text views and image views. I'm looking to do it with two custom views. So I decided to whip up a quick image in paint to hopefully show more clearly of what I'm wanting to do.

This is how I want my layout to split the views. :

This is how it would look with the views drawn. Obviously the purple and blue boundaries would be the background color (greyish). The data above simply displays the y-intercept of the graph drawn with respective color. (So there would be multiple graph views drawn on top of each other)

So my question is, what would my main content view look like? I assume it would have a Linear layout but I'm rather new to these layouts.

EDIT

Using TextViews I'm able to come up with something similar using the following XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <TextView
            android:text="Data Placeholder"
            android:background="#733674"
            android:textSize="15pt"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="20"/>

        <TextView
            android:text="Graph Placeholder"
            android:background="#374F82"
            android:textSize="15pt"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="80"/>

    </LinearLayout>

</LinearLayout>

So The only question that really remains is, am I supposed to use TextViews? Meaning in my Activity am I able to add my custom views where these TextViews are? Or am I supposed to add my custom view to the XML?

Ie.

    <DataView
        android:text="Data Placeholder"
        android:background="#733674"
        android:textSize="15pt"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="20"/>

    <GraphView
        android:text="Graph Placeholder"
        android:background="#374F82"
        android:textSize="15pt"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="80"/>

My custom views are written in Java and I'm not sure how I would let the layout know where the views are located if I was to do it this way.

Answer 1

Try this: http://developer.android.com/resources/tutorials/views/hello-linearlayout.html

It has some very useful information which might help you out in regards to layout_weight as Michell Bak mentioned in the comment.

And here's the page for the Hello Views: http://developer.android.com/resources/tutorials/views/index.html

Not to be rude, but it would be much better for you to peruse these and learn the xml on your own. That way you can actually understand it and be better able to re-create it later.

I was quite overwhelmed at first with all the code I didn't understand (including xml files), but with a little practice it becomes very easy - just time consuming.

The main thing I'm confused about is what kind of View to put in the layout. In the examples they use TextView or ImageView, but mine is a custom view

Well, for your "Custom Data View", you would use a LinearLayout with android:layout_width="fill_parent" and android:layout_height="fill_parent" and android:layout_weight="1" and android:background="#BA4AAB" (See http://www.colorpicker.com/ )

Then for your Custom Graph View, I would use: android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="4" android:background="#7D4ABA"

Note the layout_weight and background values I put are kind of guesses, you might have to tweak them some to match what you want.

The two linearlayouts that I mentioned would be inside one larger LinearLayout with android:orientation="vertical"

Then for the data in the top, you would use 4 text Views, and in code, you'd use setText(...) on those text views to put your data in.

In the xml for textview1, you would add android:id="@+id/textview1" then in code add TextView textview1 = (TextView)findviewbyId(R.id.textview1); then textview1.setText(myString);

For the graph in the bottom part, you would use 2 views for the base of the graph, and set there android:layout_width and android:layout_height to whatever suits you using dip, dp, or px units.

For the lines that you draw, I believe you would have to use the canvas class with a bitmap and call canvas.drawLine(...) (see http://developer.android.com/reference/android/graphics/Canvas.html )