Android Screen layout help

Can someone help me build something similar to the layout below?

1.png
teknovationAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Wayne88Commented:
Help as in build it for you, provide the code?  Even then you still need your own code to make the UI work for your purpose.  The screen layout can easily be done using Eclipse ADT.  What is the goal you're trying to achieve with this UI?  Will the UI communicate with a program you already have?
0
teknovationAuthor Commented:
I just need the xml code for the layout.
0
Wayne88Commented:
See attached for a simplistic layout.  The buttons are the same.  If you want to add an image to button 1 you can do simple modification to is as shown here:  http://www.mkyong.com/android/android-imagebutton-example/

Also see Android ImageButton selector example: http://www.mkyong.com/android/android-imagebutton-selector-example/
test.txt
0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

teknovationAuthor Commented:
I need more examples - what is in the link i can do.

I cant figure out how to align the objects appropriately with multiple items on the screen.
0
Wayne88Commented:
In the link you can assign the button and the text field to however you need.  It seems like you're asking for the whole tutorial on how to use the buttons and make it work, etc.  There are many resources online that can show you how.  I will let another expert, a better "teacher" to tackle this one.
0
teknovationAuthor Commented:
Struggling still, here's the code:

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"
    android:id="@+id/test"
    android:weightSum="1">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageButton2"
        android:src="@android:drawable/star_big_on" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Second Text"
        android:id="@+id/textView3"
        android:layout_alignParentTop="true"
        android:layout_centerInParent="true"
        android:textColor="#ff0b15" />

 



        <ScrollView xmlns:Android="http://schemas.Android.com/apk/res/Android"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent" >

            <!-- Linearlaout which acts as ListView -->
            <LinearLayout
                android:id="@+id/linear_ListView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical" />

        </ScrollView>

     
    </RelativeLayout>


</LinearLayout>

Open in new window

0
teknovationAuthor Commented:
anyone?!
0
Chris HarteThaumaturgeCommented:
Layouts can be a nightmare, try building them one piece at a time. The latest eclipse (Mars) has improved their graphic editor for layouts, are you using it?

The code you posted was using wrap_contents instead of match parent in a few places.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:id="@+id/test"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:paddingBottom="@dimen/activity_vertical_margin"
	android:paddingLeft="@dimen/activity_horizontal_margin"
	android:paddingRight="@dimen/activity_horizontal_margin"
	android:paddingTop="@dimen/activity_vertical_margin"
	android:weightSum="1"
	tools:context=".MainActivity" >

	<ImageButton
		android:id="@+id/imageButton2"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:src="@android:drawable/star_big_on" />

	<TextView
		android:id="@+id/textView3"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_alignParentTop="true"
		android:layout_centerInParent="true"
		android:text="Second Text"
		android:textAppearance="?android:attr/textAppearanceMedium"
		android:textColor="#ff0b15" />

	<ScrollView
		xmlns:Android="http://schemas.Android.com/apk/res/Android"
		Android:layout_width="match_parent"
		android:layout_width="match_parent"
		Android:layout_height="match_parent"
		android:layout_height="match_parent" >

		<!-- Linearlayout which acts as ListView -->

		<LinearLayout
			android:id="@+id/linear_ListView"
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:orientation="vertical" />
	</ScrollView>

	<RelativeLayout
		android:layout_width="match_parent"
		android:layout_height="match_parent" >
	</RelativeLayout>

</LinearLayout>

Open in new window

0
teknovationAuthor Commented:
Thanks for the response! I see that everything is pushed up onto the same row.

Anyway to lay them on top of one another?

Im using Android Studio - I was trying to wrap a bunch of items into each section. So Wrap content was used inside of the Main Layout tag.

<parent>
       objects...
<parent>
<parent2>
      objects...
</parent>
0
Chris HarteThaumaturgeCommented:
I was trying to wrap a bunch of items into each section

Could be where you are going wrong. Try using different layout files for different views. Or, to separate sections from each other, use a scroll layout as your top level  view.
0
teknovationAuthor Commented:
So are you saying, it can be just either relative or linear layout and then add views below it?

What would you suggest for the top section? I need it to break into two left and right columns. The left column would be the image, and the right would be buttons. Then the bottom would be the scroll view inside a linear view.

<relative layout>
   <linear layout>
       <what to use here for the two sections containing the image buttons>
   </linear layout>
  <linear layout>
      <scroll view />
  </linear layout>
</relative layout>
0
Chris HarteThaumaturgeCommented:
Use imageViews with an onClickListener in the code. To get them side by side use android:layout_toEndOf="@+id/first_imageView" in the right hand image layout.
0
teknovationAuthor Commented:
It would be helpfful if you provide syntax? I'm new to android development, thanks so much
0
teknovationAuthor Commented:
still cannot fix this issue with the solutions provided
0
teknovationAuthor Commented:
i figured this one out myself by playing with it
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
teknovationAuthor Commented:
i figured this out myself
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Android

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.