How to extract current Android layout segments into their own custom control?

Question

OK, I have a complete layout built; however, I am not really pleased with the long xml file that has resulted. I have a shorted version of the xml outline and designer view below. And I was wondering how I can abstract out each group of similar components into their own custom control.

For example, in the picture below, I have highlighted one such control that I would like to abstract out. Instead of it being a LinearLayout with 2 TextView's inside with their own properties and attributes set. I would like to reference it via <package-name.individual_song_item android:layout...> ... </>. All I would have to do is set the first TextView's text along with the second one via attributes in the top-level component.

How can this be done? I have the layout done and complete, but I don't like that nothing is abstracted away.

So the expected results that I am looking for are (if you look at the right-side of the image. there would only be one LinearLayout below the image, and the rest would be <package-name.individual_song_item>)

I have tried to just create a new layout xml with just the subsets of components, but I was not able to make it work when combining it back.

enter image description here

OLD WAY

<LinearLayout >

    <ImageView />

    <LinearLayout >

        <LinearLayout >

            <TextView />
            <TextView />

        </LinearLayout>

        <LinearLayout >

            <TextView />
            <TextView />

        </LinearLayout>

        <LinearLayout >

            <TextView />
            <TextView />

        </LinearLayout>

        ....

    </LinearLayout>

</LinearLayout>

POSSIBLE PROPOSED WAY

<LinearLayout >

    <ImageView />

    <LinearLayout >

        <com.example.individual_song_item />
        <com.example.individual_song_item />
        <com.example.individual_song_item />

        ....

        <com.example.individual_song_item  <!-- example (possible!?!?) -->
            ....
            app:label="Group"
            app:value="Group Name" />

    </LinearLayout>

</LinearLayout>

@Raghunandan no, I am talking specifically code here. I updated the question on the bottom to show what I want — Christopher Rucinski, Sep 21 '13 at 01:46

score 0 · Answer 1 · edited May 23 '17 at 12:01

Create a custom layout eg.

public class IndividualSongItem extends LinearLayout {

    private String mSong;
    private String mSongName;

    public IndividualSongItem(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }

    public IndividualSongItem(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.IndividualSongItem);

        try {
            // Read in your custom layout's attributes, 
            // for example song and songName text attributes
            CharSequence s = a.getString(R.styleable.IndividualSongItem_song);
            if (s != null) {
                setSong(s.toString());
            }

            s = a.getString(R.styleable.IndividualSongItem_songName);
            if (s != null) {
                setSongName(s.toString());
            }
        } finally {
            a.recycle();
        }

    }
....etc

You will also need to create an attributes XML for your new layout class. For a full example of how to do what you're after look at the LabelView example in the ApiDemos.

It's also very well explained here.

How to extract current Android layout segments into their own custom control?

1 Answers1

Linked