Layout strategies for arranging various interface

Question

I am relatively new to android development and don't have a very strong understanding of design guidelines and right layout techniques, yet. I'm working with a screen that needs to look like the following:

The code I am using currently is a mix of several linear layout blocks and I understand that this is not the right way of going about achieving such a layout.

<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.culami.WelcomePageActivity"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="@string/welcome_msg"
        android:layout_gravity="center"
        android:textSize="50sp" />

    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:orientation="horizontal"
        android:layout_marginTop="15dp" >

        <LinearLayout 
           android:layout_width="0dp"
           android:layout_weight="1"
           android:layout_height="wrap_content"
           android:orientation="vertical" >

                <ImageView 
                    android:id="@+id/userIcon1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="3dp"
                    android:src="@drawable/user1"
                    android:contentDescription="@string/userProfileMSG"
                    android:layout_gravity="center"
                    android:onClick="" />

                <TextView 
                    android:id="@+id/nameUser1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:text="@string/nameUser1"
                    android:layout_gravity="center"
                    android:textSize="24sp" />

        </LinearLayout>

        <LinearLayout 
           android:layout_width="0dp"
           android:layout_weight="1"
           android:layout_height="wrap_content"
           android:orientation="vertical" >

                <ImageView 
                    android:id="@+id/userIcon2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="3dp"
                    android:src="@drawable/user2"
                    android:contentDescription="@string/userProfileMSG"
                    android:layout_gravity="center"
                    android:onClick="" />

                <TextView 
                    android:id="@+id/nameUser2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:text="@string/nameUser2"
                    android:layout_gravity="center"
                    android:textSize="24sp" />

        </LinearLayout>

        <LinearLayout 
           android:layout_width="0dp"
           android:layout_weight="1"
           android:layout_height="wrap_content"
           android:orientation="vertical" >

                <ImageView 
                    android:id="@+id/userIcon3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="3dp"
                    android:src="@drawable/user3"
                    android:contentDescription="@string/userProfileMSG"
                    android:layout_gravity="center"
                    android:onClick="" />

                <TextView 
                    android:id="@+id/nameUser3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:text="@string/nameUser3"
                    android:layout_gravity="center"
                    android:textSize="24sp" />

        </LinearLayout>
    </LinearLayout>

    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:orientation="horizontal" >

        <LinearLayout 
           android:layout_width="0dp"
           android:layout_weight="1"
           android:layout_height="wrap_content"
           android:orientation="vertical" >

                <ImageView 
                    android:id="@+id/userIcon4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="3dp"
                    android:src="@drawable/user4"
                    android:contentDescription="@string/userProfileMSG"
                    android:layout_gravity="center"
                    android:onClick="" />

                <TextView 
                    android:id="@+id/nameUser4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:text="@string/nameUser4"
                    android:layout_gravity="center"
                    android:textSize="24sp" />

        </LinearLayout>

        <LinearLayout 
           android:layout_width="0dp"
           android:layout_weight="1"
           android:layout_height="wrap_content"
           android:orientation="vertical" >

                <ImageView 
                    android:id="@+id/addUserIcon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:padding="3dp"
                    android:src="@drawable/adduser"
                    android:contentDescription="@string/userProfileMSG"
                    android:layout_gravity="center"
                    android:onClick="" />

                <TextView 
                    android:id="@+id/addUserText"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:text="@string/addUser"
                    android:layout_gravity="center"
                    android:textSize="24sp" />

        </LinearLayout>

        <LinearLayout 
           android:layout_width="0dp"
           android:layout_weight="1"
           android:layout_height="wrap_content"
           android:orientation="vertical" >
        </LinearLayout>

    </LinearLayout>

    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_marginTop="35dp"
        android:layout_marginBottom="10dp"
        android:text="@string/buttonSubmit"
        android:textSize="30sp"
        android:textColor="#ffffff"
        android:textStyle="bold"
        android:padding="5dp"
        android:background="@drawable/login_button_selector"
        android:layout_gravity="center" />

    <LinearLayout 
       android:layout_width="match_parent"
       android:layout_weight="0.3"
       android:layout_height="wrap_content"
       android:orientation="vertical" >
    </LinearLayout>

</LinearLayout>

Can someone please guide me with the right approach for dealing with such layouts and also, provide me with some design guidelines I may have violated here. Thanks!

Answer 1

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Welcome!"
    android:textSize="50dp"
    android:gravity="center_horizontal"
    android:id="@+id/welcome"/>

<LinearLayout
    android:layout_marginTop="30dp"
    android:layout_below="@+id/welcome"
    android:id="@+id/ll1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="0.33"
        android:layout_height="wrap_content"
        android:orientation="vertical">

    <ImageView
        android:src="@drawable/com_facebook_button_blue_normal"
        android:layout_width="match_parent"
        android:scaleType="fitXY"
        android:layout_height="100dp"
        android:layout_weight="0.33"
        android:id="@+id/im1"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="1234"
            android:layout_marginTop="10dp"
            android:gravity="center_horizontal"
            android:textSize="20dp"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="0.33"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:src="@drawable/com_facebook_button_blue_normal"
            android:layout_width="match_parent"
            android:scaleType="fitXY"
            android:layout_height="100dp"
            android:layout_weight="0.33"
            android:id="@+id/im1"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="1234"
            android:layout_marginTop="10dp"
            android:gravity="center_horizontal"
            android:textSize="20dp"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="0.33"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:src="@drawable/com_facebook_button_blue_normal"
            android:layout_width="match_parent"
            android:scaleType="fitXY"
            android:layout_height="100dp"
            android:layout_weight="0.33"
            android:id="@+id/im1"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="1234"
            android:layout_marginTop="10dp"
            android:gravity="center_horizontal"
            android:textSize="20dp"/>

    </LinearLayout>

    </LinearLayout>

<LinearLayout
    android:layout_marginTop="15dp"
    android:layout_below="@+id/ll1"
    android:id="@+id/ll2"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="0.33"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:src="@drawable/com_facebook_button_blue_normal"
            android:layout_width="match_parent"
            android:scaleType="fitXY"
            android:layout_height="100dp"
            android:layout_weight="0.33"
            android:id="@+id/im1"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="1234"
            android:layout_marginTop="10dp"
            android:gravity="center_horizontal"
            android:textSize="20dp"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="0.33"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:src="@drawable/com_facebook_button_blue_normal"
            android:layout_width="match_parent"
            android:scaleType="fitXY"
            android:layout_height="100dp"
            android:layout_weight="0.33"
            android:id="@+id/im1"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="1234"
            android:layout_marginTop="10dp"
            android:gravity="center_horizontal"
            android:textSize="20dp"/>

    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="0.33"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:scaleType="fitXY"
            android:layout_height="100dp"
            android:layout_weight="0.33"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:gravity="center_horizontal"
            android:textSize="20dp"/>

    </LinearLayout>

    </LinearLayout>

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/button"
    style="@android:style/Widget.Holo.Button.Borderless"
    android:text="Get Started"
    android:textSize="40dp"
    android:textColor="@color/black"
    android:padding="15dp"
    android:background="#4caf50"
    android:layout_alignParentBottom="true"/>


</RelativeLayout>

Explanation - Relative layout as parent view (for flexicbility in arranging widgets).

TextView with id "welcome" for the top text. (u can customize it u way with gravity and textsize and all that).

LinearLayout -

1) it has horizontal orientation. That is, widgets will be arranged horizantally. 2) it is below first text view :

android:layout_below="@+id/welcome"

3) it has 3 imageviews (horizontally placed as stated above). Loo at their widths, its 0dps. Because I have used layout_weight instead. Weight for each is 0.33 i.e. it will occuoy 33% of whatever is available for it horizontally. If u want 4 images, u can use weight as 0.25 for each.

Then we have another linear layout, again to have images as in the above one. it is placed below ll1.

Finally, we have a button (u can either align it below ll2 or at the parent bottom

Answer 2

I suggest you to use Grid View with adapter. Here are some advantages of Adapter mentioned blow.

Advantages of an adapter

1-Dynamic – Can expand to any number of elements rather than statically coding each individual view. 2-Elegant – Makes your code petite and quite clear to understand once you get over the initial difficulty 3-Beautiful – Now you don’t have to control how many items there are in rows or columns, android will automatically fill up the screen in the best way possible. This also means you don’t need to redesign your application for horizontal and vertical orientations.

These are some example of GridView using adapters for beginners. Example 1 Example 2 Example 3

Answer 3

I would suggest you use GridView with an adapter if you want the capability to manipulate (add and remove) users. The major advantages are:

1. Easily add and remove components with java code.
2. Automatic scrolling capabilities.

The automatic scrolling makes it so you don't have to put the container inside a ScrollView.

For other uses that don't require the dynamic capabilities of GridView you can just use GridLayout, which is much easier as you can add all it's children from in the xml file and don't have to worry about adding them in your java code.

Answer 4

While you can achieve this with some LinearLayouts and the alike, my suggestion is to use a RecyclerView. Its very scalable and performs superb even if you happen to have a ton of elements in it.

You can read up on the RecyclerView here: https://developer.android.com/reference/android/support/v7/widget/RecyclerView.html

It may be much to take in at first, it was for me anyway, but once you get the hang of it you will start to see new solutions to many of your problems.

I take it you want the Welcome to scroll with the content, as well as the Get started button, you can achieve this with another 2 ViewTypes in the RecyclerView.Adapter. Or you can use an onScrollListener on the RecyclerView directly and scroll them offscreen when the user has scrolled a set distance.

Last but not least you can adapt the sizing between items with ItemDecoration which is set on the RecyclerView, and you can set how the items are displayed with the LayoutManager (currently theres LinearLayoutManager (think List), GridLayoutManager and StaggeredGridLayoutManager available. They provide all you need I believe, but if you want more you can even check out TwoWayView from Lucas Rocha, which allows you to further customize how the items will be displayed (SpannableGridLayoutManger is what I have in mind).

Direct link to his github: https://github.com/lucasr/twoway-view

Good luck, and remember that even though there may be a cheaper quicker solution, you may need to modify it in the future and then you will think back to this moment and wonder why you didnt take the elegant way :-) Or not.. Anyways, good luck.

Answer 5

Alright, here is my suggestion:

This solution has no inner weights for the best performance.

It's also dynamic, meaning you can manipulate the list of users, and the view hierarchy is very simple.

main_layout.xml

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Welcome!"
        android:gravity="center"
        android:padding="20dp"
        android:textSize="25sp"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center">

        <GridView
            android:id="@+id/login_users_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:numColumns="3"
            android:horizontalSpacing="10dp"
            android:verticalSpacing="10dp"/>

    </LinearLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Get Started!"
        android:background="@android:color/holo_green_dark"
        android:gravity="center"
        android:padding="20dp"
        android:textSize="25sp"
        android:textColor="@android:color/white"/>

</LinearLayout>

As you can see it now has a gridview where you can add items as you wish.

user_cell_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:drawablePadding="10dp"
      android:gravity="center"
      android:textSize="20sp"
      android:padding="5dp"/>

Each cell is a normal textview. The icon will be a property of the textView called drawableTop.

You will need an adapter for the gridview, to adapt each item into a grid view item.

UserAdapter.java

public class UserAdapter extends ArrayAdapter<String> {

    private Context mContext;
    private int mLayoutResourceId;

    public UserAdapter(Context context, int layoutResourceId, String[] data) {
        super(context, layoutResourceId, data);
        mContext = context;
        mLayoutResourceId = layoutResourceId;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            LayoutInflater inflater = LayoutInflater.from(mContext);
            convertView = inflater.inflate(mLayoutResourceId, parent, false);
            UserViewHolder holder = new UserViewHolder();
            holder.textViewUserName = (TextView) convertView;
            convertView.setTag(holder);
        }
        UserViewHolder holder = (UserViewHolder) convertView.getTag();
        String userName = getItem(position);
        holder.textViewUserName.setText(userName);
        holder.textViewUserName.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_launcher, 0, 0);
        return convertView;
    }

    static class UserViewHolder {
        TextView textViewUserName;
    }
}

Then in the onContent of your activity just do:

GridView gridView = (GridView) findViewById(R.id.login_users_container);

String[] users = new String[]{
        "Bruce", "Tony", "Barry", "Katie", "Add New"};

UserAdapter adapter = new UserAdapter(this, R.layout.login_user_cell_layout, users);

gridView.setAdapter(adapter);

Hope that helps! You can now change the contents of the list and just call adapter.notifyDataSetChanged(); and the gridview should adjust to accommodate the changes.

If you want you can extend the UserAdapter to hold items of type User instead of simple Strings, where you can add an icon, a username and an id. This example is for a listview, but the adapter part is container agnostic.

Answer 6

If you want to read more about layout designing guideline please refer below link:

http://developer.android.com/training/improving-layouts/index.html