Android_Creating 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.
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.
<?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.
Now we are going to use this layouts in other layouts, for example profile_layout.xml.
<?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.
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.
@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");
}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.
