All geek questions in one place

Styling composite views

I want to create a composite element and have different styles for it, but I don’t see how to achieve it so far with the help of one style, I have to use different styles.

To illustrate my problem, I will describe an example scenario. Imagine that I have a list with items, these items are users, and I have an avatar, username and email address. I want the style of each of these 3 different options to be dedicated to my topic.

What I'm trying to achieve:

(file res / layout / item_user.xml, this will be overpriced for ListView)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="wrap_content"
    style="@style/CustomStyleA">

    <ImageView
        style="avatarStyle"
        android:id="@+id/avatar"
        android:src="@drawable/avatar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        style="usernameStyle"
        android:id="@+id/username"
        android:text="Username"
        android:layout_toRightOf="@id/avatar"
        android:layout_alignParentTop="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        style="emailStyle"
        android:id="@+id/email"
        android:text="fakemail@mail.com"
        android:layout_toRightOf="@id/avatar"
        android:layout_below="@id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

(file res / values ​​/styles.xml)

<resources>

    <!-- Style A -->
    <style name="CustomStyleA">
        <item name="avatarStyle">@style/CustomStyleA.Avatar</item>
        <item name="usernameStyle">@style/CustomStyleA.Username</item>
        <item name="emailStyle">@style/CustomStyleA.Email</item>
    </style>

    <style name="CustomStyleA.Avatar">
        <!-- Here avatar specific styles -->
    </style>

    <style name="CustomStyleA.Username" parent="android:TextAppearance">
        <!-- Here username specific styles -->
    </style>

    <style name="CustomStyleA.Email" parent="android:TextAppearance">
        <!-- Here email specific styles -->
    </style>

    <!-- Style B -->
    <style name="CustomStyleB">
        <item name="avatarStyle">@style/CustomStyleB.Avatar</item>
        <item name="usernameStyle">@style/CustomStyleB.Username</item>
        <item name="emailStyle">@style/CustomStyleB.Email</item>
    </style>

    <style name="CustomStyleB.Avatar">
        <!-- Here avatar specific styles -->
    </style>

    <style name="CustomStyleB.Username" parent="android:TextAppearance">
        <!-- Here username specific styles -->
    </style>

    <style name="CustomStyleB.Email" parent="android:TextAppearance">
        <!-- Here email specific styles -->
    </style>

</resources>

What i really need to do

(file res / layout / item_user.xml, this will be overpriced for ListView)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="wrap_content">

    <ImageView
        style="@style/CustomStyleA.Avatar"
        android:id="@+id/avatar"
        android:src="@drawable/avatar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        style="@style/CustomStyleA.Email"
        android:id="@+id/username"
        android:text="Username"
        android:layout_toRightOf="@id/avatar"
        android:layout_alignParentTop="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        style="@style/CustomStyleA.Email"
        android:id="@+id/email"
        android:text="fakemail@mail.com"
        android:layout_toRightOf="@id/avatar"
        android:layout_below="@id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

(file res / values ​​/styles.xml)

<resources>

    <!-- Style A -->

    <style name="CustomStyleA.Avatar">
        <!-- Here avatar specific styles -->
    </style>

    <style name="CustomStyleA.Username" parent="android:TextAppearance">
        <!-- Here username specific styles -->
    </style>

    <style name="CustomStyleA.Email" parent="android:TextAppearance">
        <!-- Here email specific styles -->
    </style>

    <!-- Style B -->

    <style name="CustomStyleB.Avatar">
        <!-- Here avatar specific styles -->
    </style>

    <style name="CustomStyleB.Username" parent="android:TextAppearance">
        <!-- Here username specific styles -->
    </style>

    <style name="CustomStyleB.Email" parent="android:TextAppearance">
        <!-- Here email specific styles -->
    </style>

</resources>

, , , . .

+4
2

. , , .

res/values ​​/attrs.xml:

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

    <declare-styleable name="MyCustomAttributes">
        <attr name="avatarStyle" format="reference" />
        <attr name="usernameStyle" format="reference" />
        ...
    </declare-styleable>

</resources>

:

<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
    <item name="avatarStyle">@style/CustomStyleA.Avatar</item>
    <item name="usernameStyle">@style/CustomStyleA.Username</item>
    ...
</style>

:

<ImageView
    style="?avatarStyle"
    android:id="@+id/avatar"
    android:src="@drawable/avatar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
0

, .

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
        <!-- Customize your theme here. -->
    </style>

    <!-- Style A -->
    <style name="CustomStyleA" parent="AppTheme">
        <item name="avatarStyle">@style/CustomStyleA.Avatar</item>
        <item name="usernameStyle">@style/CustomStyleA.Username</item>
        <item name="emailStyle">@style/CustomStyleA.Email</item>
    </style>

    <!-- Style B -->
    <style name="CustomStyleB" parent="AppTheme">
        <item name="avatarStyle">@style/CustomStyleB.Avatar</item>
        <item name="usernameStyle">@style/CustomStyleB.Username</item>
        <item name="emailStyle">@style/CustomStyleB.Email</item>
    </style>

    <style name="CustomStyleA.Avatar">
        <!-- Here avatar specific styles -->
    </style>

    <style name="CustomStyleA.Username" parent="android:TextAppearance">
        <!-- Here username specific styles -->
        <item name="android:textColor">@android:color/holo_red_dark</item>
    </style>

    <style name="CustomStyleA.Email" parent="android:TextAppearance">
        <!-- Here email specific styles -->
    </style>




    <style name="CustomStyleB.Avatar">
        <!-- Here avatar specific styles -->
    </style>

    <style name="CustomStyleB.Username" parent="android:TextAppearance">
        <!-- Here username specific styles -->
        <item name="android:textColor">@android:color/holo_blue_dark</item>
    </style>

    <style name="CustomStyleB.Email" parent="android:TextAppearance">
        <!-- Here email specific styles -->
    </style>

</resources>

avatarStyle, usernameStyle, emailStyle - , . attrs.xml.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--<declare-styleable name="AppTheme">-->
        <attr name="avatarStyle" format="reference"/>
        <attr name="usernameStyle" format="reference"/>
        <attr name="emailStyle" format="reference"/>
    <!--</declare-styleable>-->
</resources>

layout/item_user.xml,

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="wrap_content"
    >

    <ImageView
        style="?attr/avatarStyle"
        android:id="@+id/avatar"
        android:src="@drawable/ic_launcher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        style="?attr/usernameStyle"
        android:id="@+id/username"
        android:text="Username"
        android:layout_toRightOf="@id/avatar"
        android:layout_alignParentTop="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        style="?attr/emailStyle"
        android:id="@+id/email"
        android:text="fakemail@mail.com"
        android:layout_toRightOf="@id/avatar"
        android:layout_below="@id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

, , - android:theme AndroidManifest.xml.

android:theme="@style/CustomStyleB"
0

Source: https://habr.com/ru/post/1569518/

More articles:


All Articles