LinearLayout


LinearLayout is a viewgroup that arranges its child elements linearly in a descending column from top to bottom or left to right.

Each of these elements can then have gravity and weight properties. These properties denote how the elements will dynamically grow and shrink to fill space.

Elements arrange themselves in a row or column notation based on the android:orientation parameter.

<LinearLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView 1"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView 2"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView 3"/>
</LinearLayout>

These three TextViews will be arranged vertically given that we've used the android:orientation="vertical" as a layoutParam in our LinearLayout.

Designing Registeration Page with LinearLayout and ScrollView

Let's now create a registeration page with LinearLayout helping us arrange our edittexts, imageview, button, spinner and textview.

This is code that you can copy and use as a registeration page in your android project. Clearly you can see the importance and classic application of LinearLayout, it allows us arrange items linearly either vertically or horizontally.

<?xml version="1.0" encoding="utf-8"?>

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/content_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/colorPrimary"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".activities.RegisterActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingLeft="24dp"
        android:paddingRight="24dp"
        android:paddingTop="56dp">

        <ImageView
            android:src="@drawable/ic_local_taxi_black_24dp"
            android:layout_width="72dp"
            android:layout_height="72dp"
            android:layout_marginBottom="24dp"
            android:layout_gravity="center_horizontal" />

        <!-- Email Label -->
        <android.support.design.widget.TextInputLayout
            android:id="@+id/user_email_wrapper_register"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginTop="8dp">

            <EditText
                android:id="@+id/input_email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Email"
                android:inputType="textEmailAddress" />
        </android.support.design.widget.TextInputLayout>

        <!-- Password Label -->
        <android.support.design.widget.TextInputLayout
            android:id="@+id/user_password_wrapper"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginTop="8dp">

            <EditText
                android:id="@+id/input_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Password"
                android:inputType="textPassword" />

        </android.support.design.widget.TextInputLayout>

        <!-- Password Label -->
        <android.support.design.widget.TextInputLayout
            android:id="@+id/password_confirm_wrapper"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginTop="8dp">

            <EditText
                android:id="@+id/input_password_confirm"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Confirm Password"
                android:inputType="textPassword" />

        </android.support.design.widget.TextInputLayout>
        <!--First name label-->
        <android.support.design.widget.TextInputLayout
            android:id="@+id/user_first_name_wrapper"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginTop="8dp">

            <EditText
                android:id="@+id/input_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="First name"
                android:inputType="textPersonName"

                />

        </android.support.design.widget.TextInputLayout>

        <!--Last Name label-->
        <android.support.design.widget.TextInputLayout
            android:id="@+id/user_last_name_wrapper"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginTop="8dp">

            <EditText
                android:id="@+id/input_last_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Last name"
                android:inputType="textPersonName"

                />
        </android.support.design.widget.TextInputLayout>
        <!--Route wrapper-->
        <android.support.design.widget.TextInputLayout
            android:id="@+id/user_route_wrapper"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginTop="8dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Route:"
                android:textSize="20sp"
                />

            <Spinner
                android:id="@+id/SpinnerRoute"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:prompt="@string/RouteType"
                android:entries="@array/RouteList"
                >
            </Spinner>

        </android.support.design.widget.TextInputLayout>

        <!--Vehicle Type-->
        <android.support.design.widget.TextInputLayout
            android:id="@+id/vehicle_type_wrapper"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginTop="8dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Vehicle Type:"
                android:textSize="20sp"
                />
            <Spinner
                android:id="@+id/SpinnerVehicleType"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:prompt="@string/VehicleType"
                android:entries="@array/VehicleTypeList">

            </Spinner>

        </android.support.design.widget.TextInputLayout>

        <android.support.v7.widget.AppCompatButton
            android:id="@+id/btn_signup"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="24dp"
            android:background="@color/colorPrimaryDark"
            android:layout_marginTop="24dp"
            android:padding="12dp"
            android:text="Register" />

        <TextView android:id="@+id/link_login"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="24dp"
            android:textColor="#ffffff"
            android:text="Already a member? Login"
            android:gravity="center"
            android:textSize="16dip"/>

    </LinearLayout>
</ScrollView>

Programmatic Instantiation of LinearLayout

There are two important classes when thinking about working with a LinearLayout programmatically.

First is the LinearLayout class itself and secondly the LayoutParams class.

So we instantiate both. Take note of the parameters we are passing to our LayoutParams, the first being the width which in our case we get from the SwipeItem, secondly is the LayoutParams.MATCH_PARENT which specifies that the target view will match that of it's parent.

Then we set the LinearLayout parameters loke id, gravity, orientation,params, background image and even the onClickListener.

private void addItem(SwipeMenuItem item, int id) {
    LayoutParams params = new LayoutParams(item.getWidth(),
            LayoutParams.MATCH_PARENT);
    LinearLayout parent = new LinearLayout(getContext());
    parent.setId(id);
    parent.setGravity(Gravity.CENTER);
    parent.setOrientation(LinearLayout.VERTICAL);
    parent.setLayoutParams(params);
    parent.setBackgroundDrawable(item.getBackground());
    parent.setOnClickListener(this);

    addView(parent);

    if (item.getIcon() != null) {
        parent.addView(createIcon(item));
    }
    if (!TextUtils.isEmpty(item.getTitle())) {
        parent.addView(createTitle(item));
    }

}
How to create a custom bottom navigation view using a LinearLayout

Let's start by creating a layout, let's call it nav_bar.xml.

At the root we have a LinearLayout with vertical orientation. We'll have a generic View obect. Then below it we define another LinearLayout with a nested RelativeLayout containing ImageView for our left button and a View for our divider.

We'll also have another ImageView with a red dot image.

We'll have a button at middle of our navigation bar and lastly an imageview to represent our right button.

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

    <View
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/colorPrimary"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_weight="2"
            android:layout_height="50dp">
            <ImageView
                android:id="@+id/nav_button_left"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:layout_centerInParent="true"
                android:src="@mipmap/icon_order_0"
                android:clickable="true"/>
            <View
                android:id="@+id/nav_divider_1"
                android:layout_width="8dp"
                android:layout_height="match_parent"
                android:layout_centerHorizontal="true"/>

            <ImageView
                android:id="@+id/nav_red_dot"
                android:layout_width="10dp"
                android:layout_height="10dp"
                android:src="@mipmap/icon_red_dot"
                android:layout_toRightOf="@id/nav_divider_1"
                android:layout_marginTop="5dp"
                />
        </RelativeLayout>

        <ImageView
            android:id="@+id/nav_button_middle"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:src="@drawable/button_add_order"
            android:clickable="true"/>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_weight="2"
            android:layout_height="50dp">
            <ImageView
                android:id="@+id/nav_button_right"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:src="@mipmap/icon_me_0"
                android:layout_centerInParent="true"
                android:clickable="true"/>
        </RelativeLayout>

    </LinearLayout>

</LinearLayout>

Then we come create our class, in this case we called it NavigationView. We'll have it derive from LinearLayout.

As instance fields we'll have:

  1. Left Button - Imageview.
  2. Middle Button - ImageView.
  3. Right Button - ImageView.
  4. Red Dot - ImageView.

Then our constructor will receive a Context and an AttributeSet object. Then pass them to the super class, in this case the LinearLayout class, via the super() method.

Then next we inflate our nav_bar.xml layout using the LayoutInflater class.

Then we reference the imageviews we defined above.

Then set their image resources via the setImageResource() method.

Here's the full code:

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.LinearLayout;

import with . jshaz . daigo . R ;

/**
 * Bottom navigation bar View
 */

public class NavigationView extends LinearLayout {

    private ImageView btnLeft, btnMiddle, btnRight, redDot;

    public NavigationView(Context context, AttributeSet attr) {

        super(context, attr);

        LayoutInflater.from(context).inflate(R.layout.nav_bar, this);

        btnLeft = (ImageView) findViewById(R.id.nav_button_left);
        btnMiddle = (ImageView) findViewById(R.id.nav_button_middle);
        btnRight = (ImageView) findViewById(R.id.nav_button_right);
        redDot = (ImageView) findViewById(R.id.nav_red_dot);

        btnLeft.setImageResource(R.mipmap.icon_order_1);
        btnRight.setImageResource(R.mipmap.icon_me_0);

        setRedDot ( false );

    }

    public void setBtnLeftDown() {
        btnLeft.setImageResource(R.mipmap.icon_order_1);
        btnRight.setImageResource(R.mipmap.icon_me_0);
    }

    public void setBtnRightDown() {
        btnLeft.setImageResource(R.mipmap.icon_order_0);
        btnRight.setImageResource(R.mipmap.icon_me_1);
    }

    public void buttonLeftSetListener(OnClickListener listener) {
        btnLeft.setOnClickListener(listener);
    }

    public void buttonRightSetListener(OnClickListener listener) {
        btnRight.setOnClickListener(listener);
    }

    public void buttonMiddleSetListener(OnClickListener listener) {
        btnMiddle.setOnClickListener(listener);
    }

    public void setButtonMiddleEnabled(boolean b) {
        int state = (b == true) ? VISIBLE : GONE;
        btnMiddle.setVisibility(state);
    }

    public void setAllButtonEnabled(boolean b) {
        btnLeft.setClickable(b);
        btnRight.setClickable(b);
        btnMiddle.setClickable(b);
    }

    public void setRedDot(boolean b) {
        if (b) {
            redDot.setVisibility(VISIBLE);
        } else {
            redDot.setVisibility(GONE);
        }
    }

    public ImageView getBtnLeft() {
        return btnLeft;
    }

    public ImageView getBtnMiddle() {
        return btnMiddle;
    }

    public ImageView getBtnRight() {
        return btnRight;
    }

    public ImageView getRedDot () { return redDot ; }  
}

Then let's say we want to use our custom Bottom NavigationView with a fragment.

First assume you have an activity_main.xml layout. And that layout has our navigationView defined as an element.

<LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        ....

        <com.jshaz.daigo.ui.NavigationView
            android:id="@+id/client_main_navbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

        </com.jshaz.daigo.ui.NavigationView>
        ....
    </LinearLayout>

Then inside the onCreate() method you can start by referencing the NavigationView:

    NavigationView navigationView = (NavigationView) findViewById(R.id.client_main_navbar);

Then continue:

        /* Turn on the availability of the middle button */ 
        navigationView . setButtonMiddleEnabled ( true );

Then:


        / * Listen for events left button of the navigation bar * / 
        navigationView . ButtonLeftSetListener ( new new View . OnClickListener () { 
            @Override public void onClick ( View View ) { 
                navigationView .SetBtnLeftDown (); 
                    //replaceFragment(orderFragment, SLIDE_FROM_LEFT_TO_RIGHT);
            }
        });

        /* Listen for  click event for navigation bar middle button */ 
        navigationView . ButtonMiddleSetListener ( new new View . OnClickListener () { 
            @Override public void onClick ( View View ) { 
                //replace fragment
            }
        });

        /*Listening to the click event of the right button of the navigation bar*/
        navigationView.buttonRightSetListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                navigationView.setBtnRightDown();
                // replace fragment

            }
        });

How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section. This feedback helps us gauge our progress.

Help me Grow.

I set myself some growth ambitions I desire to achieve by this year's end regarding this website and my youtube channel. Am halfway. Help me reach them by:




Recommendations


What do You Think


Previous Post Next Post