Android_Creating Reusable Layouts - smukov/AvI GitHub Wiki

Reusable Layouts

In the previous post I mentioned how I imported a 3rd party library called ['CircularImageView](https://github.com/hdodenhof/CircleImageView) that I plan to use to display a user's profile image with a circular border. In this post I'm going to use that CircularImageView, together with TextView` to create a reusable layout, that I can then use in multiple places throughout my app.

Creating a reusable layout

First, I'm going to create a new file called res/layout/profile_header.xml that will be my reusable layout. I'll choose a horizontal LinearLayout for it, and I'll add the CircularImageView and the TextView to it. Below you can see the full code for the layout.

Source Code

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

    <de.hdodenhof.circleimageview.CircleImageView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/profile_image"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:src="@drawable/hugh"
        app:civ_border_width="0dp"
        app:civ_border_color="#FF000000"/>

    <TextView
        android:id="@+id/profile_name"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center_vertical"
        android:layout_marginLeft="10dp"
        android:textSize="20sp"
        android:textStyle="bold"
        android:text="Doctor House" />

</LinearLayout>

Some values are hard-coded for now, but I'll show you later how you can override them.

Using the reusable layout

Now we are going to use this layouts in other layouts, for example profile_layout.xml.

Source Code

<?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="match_parent">

    <include layout="@layout/profile_header"/>

</LinearLayout>

That's all it takes. A single line with include tag can replace many lines that took to define the actual layout. Pretty handy.

Accessing the included layout from code

Now we want to access the views inside our reusable layouts that are being inflated within our profile_layout.xml. Since the layout that is hosting the resuable layout is a Fragment, a perfect place to access these views would be a onViewCreated method, that is called immediately after onCreateView has returned, but before any saved state has been restored in to the view.

Source Code

@Override
public void onViewCreated(View view, Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);

    TextView profileName = (TextView) view.findViewById(R.id.profile_name);
    profileName.setText("Dr. Gregory House");
}

Conclusion

That's how you create pieces of layouts that you can reuse throughout the app. It's a pretty cool feature that can help and make the development process faster, and the whole project more maintainable. Below you can see the reusable layout being rendered in My Profile page.

Reusable Layout

References