Customizations of the UI may be desired to establish a certain identity of an app. There are three ways to go about UI Customization:

Styles and Themes

The Kits follow Android’s use of styles and themes. Any theme applied to the app will also be used across all the views in the Kits. To know more about styles and themes in Android, visit this link.

Layout Customization via XML

Developers will be given access to the layout XML files used by the Kits. Another way of customizing the UI of a specific screen is to create a copy of the corresponding layout XML file in your app module and modify the file as desired.

View Property Change

Take a look at the Challenges kit and choose to change the look of an individual Challenge list item:

Obtain a copy of the XML file of the layout to be modified - list_item_challenges.xml.
Place the copy of the XML file in the resource folder of the app module.

Override the parameters of the desired view to customize. The following is the heading TextView in a Challenge list item layout:

 <TextView
    android:id="@+id/heading_text_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:maxLines="2"
    android:ellipsize="end"
    android:textColor="@color/black"
    android:textAppearance="@style/Base.List.Title" />

We can modify this into:

 <TextView
    android:id="@+id/heading_text_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:maxLines="5"
    android:ellipsize="marquee"
    android:textColor="@color/blue"
    android:textAppearance="TextAppearance.AppCompat.Title" />

This changes the default values maxLines="2", ellipsize="end", textColor=@color/black and textAppearance=@style/Base.List.Title

View Repositioning

Another option is to reposition the views in the layout. Move the views in another layout in the layout file. IMPORTANT NOTE: It is easy to modify the XML layout styles by changing the elements on the View but note that you must not change the ID of the View. In the case of the example above, heading_text_view should be kept the same for the library and app side copy of the resources.
In case a view is not part of the requirement, do not delete the view but instead change its visibility to gone or invisible

Layout Customization via Code

Requirements may include adding additional elements to the user interface. An example would be is if the app is required to show elements based on certain logic that is not available in the ready-to-use views. The process is to extend the View and then override the layout with you own layout (means creating a new layout and setting it as the new layout for the View)

Customizing an Activity

Use your own custom layout for the ChallengeDetailsActivity of the Challenges Kit. To use a custom layout for the ChallengeDetailsActivity:

Create your MyChallengeDetailsActivity which will act as the sub-class of the Activity that we want to modify.

Extend the ChallengeDetailsActivity, and override the getContentLayoutId() method of the class. Return your own layout ID.

public class MyChallengeDetailsActivity extends ChallengeDetailsActivity {
	
    @Override
    protected int getContentLayoutId() {
        return R.layout.activity_my_challenge_list;
    }
		
}

Include your MyChallengeDetailsActivity in the app’s AndroidManifest.xml with the proper actions in the intent-filter. Please check Kits References for the actions used by each kit.

<activity android:name=".MyChallengeDetailsActivity">
  <intent-filter>
     <action android:name="${applicationId}.CHALLENGE_DETAILS" />
     <category android:name="android.intent.category.DEFAULT" />
  </intent-filter>
</activity>

Customizing a Fragment

Use your own layout for the ChallengesListFragment of the Challenges Kit. To use a custom layout for the ChallengesListFragment:

Create your MyChallengesListFragment which will act as the sub-class.

Extend the StellarChallengesListFragment , and override the getContentLayoutId() method of the class. Return your own layout ID.

 public class MyStellarChallengesListFragment extends StellarChallengesListFragment {

     @Override
     protected int getContentLayoutId() {
         return R.layout.fragment_my_challenges_pager;
     }
 }

Use MyStellarChallengesListFragment in one of your classes/layouts.
Next: Android Kits Reference

Cheetah CES Docs Portal