Selecting best Android layout

Question

I am new to Android, and wish to do a layout as below:

A Logo on top.
Following with a Rectangle with Rounded corners
Within that Rectangle, I will have two EditText box for User ID and Password, plus one Login button
Below the Rectangle with Rounded corners (outside) I have a Html Link to Terms & Conditions

I have tried various ways of layout out

Using only layout. Different kinds of layouts. All seems to be very difficult to achieve what I need
Using Layout + Background. The background is not really a background, but is more like a template, it will affect your layout, and is very difficult to control where you wants your control located.
Using onDraw. Flexible but worried that it might have problem with different screen sizes.

So, someone please enlight which is the best way to achieve what I need?

Use the XML and I think use a linear layout as vertical as the primary view and embed the logo in the first row and a relative layout in the second row, so you can make what you want. Of course you'd have make your own asset for the rounded rectangle I believe — adarsh, Mar 10 '13 at 00:07

score 2 · Answer 1 · edited May 23 '17 at 11:53

No one can really tell you what is best, it depends on exactly what you want but I would suggest using a RelatvieLayout as they are typically the easiest and most efficient to use once you work with them a little, in my opinion. You can read Here to see how to do the rectangle. You basically will use shape drawable and adjust the radius of the corners.

As far as the logo on top, if it will be reused in other Activitys then you can put it in its own layout and use the include tag in your layouts to reuse the logo layout

If you are worried about different screen sizes then read the Docs and find what works for you. Just start on it and adjust as you go. Don't be afraid to screw up and redo some of it. Hopefully this is enough information to get you started

Using a RelativeLayout will give you more flexibility and allow you to use less Layouts such as nested LinearLayouts and Layouts with only one child which can improve performance

Peshal · Answer 2 · 2013-03-10T00:17:58.007

this is how it should be done: start with linear layout with vertical orientation :

<linearLayourt xmlns=............
android:orientation="vertical"
.....other stuffs goes here
......
.....
<LinearLayout ......this is the child linearlayout
.....other stuffs goes here like width and height
<ImageView ...this is where you are gonna put your logo in
/>
</LinearLayout> ....close your child linear layout
<RelativeLayout ...
.........other stuffs here
<EditText ....1st edit text
...you position your boxes here
/>
<EditText ....2nd edit text
...you position your boxes here
/>
</RelativeLayout>
<TextView 
....
...
...put yout hyperlink for this text
/>
</LinearLayout> ...this is the parent linear layout

Thanks. It works. Unfortunately I can't press the vote up button yet. — s k, Mar 10 '13 at 01:21

Emil Adz · Answer 3 · 2013-03-10T00:52:03.587

For your case of creating a Log in screen it's not really matter as it is a relatively easy screen to design. I personally like to use XML to design my layouts and never seen it done using the onDraw method.

My suggestion to you as @codeMagic said is to learn how to use and manipulated RelativeLayouts,as those will prevent you from creating cascaded layouts that are really not recommended and take long time to load.

When I started to program for Android I found LinearLayout to be the easiest to understand and use but using it would bring me to many LinearLayouts inside of a LinearLayouts on complex screen designz, later with the use of RelativeLayout I realized that in most cases one RelativeLayout can replace many cascaded Linear ones.

in your case you could do some thing like that:

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

      <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/drop_down_icon" />

   <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/imageView1" >

    </EditText>

    <EditText
        android:id="@+id/editText2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/editText1" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editText2"
        android:layout_centerHorizontal="true"
        android:text="Button" />



    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button1"
        android:layout_centerHorizontal="true"
        android:text="TextView" />

</RelativeLayout>

All what left is to add the desired padings and margins.

Selecting best Android layout

3 Answers3