2.1 LinearLayout using the Layout Editor

LinearLayout using the Layout Editor

What you’ll learn

• How to work with View and ViewGroup.
• How to arrange views in an Activity, using LinearLayout.
• How to use ScrollView for displaying the scrollable content.
• How to change the visibility of a View.
• How to create and use string and dimension resources.
• How to create a LinearLayout using Android Studio’s Layout Editor.

What you’ll do

• Create the AboutMe app.
• Add a TextView to the layout to display your name.
• Add an ImageView.
• Add a ScrollView to display scrollable text.

Step 4: Extract the style

A style is a collection of attributes that specify the appearance and format for a view. A style can include font color, font size, background color, padding, margin, and other common attributes.

You can extract the name text view’s formatting into a style and reuse the style for any number of views in your app. Reusing a style gives your app a consistent look when you have multiple views. Using styles also allows you to keep these common attributes in one location.

1. Right-click the TextView in the Component Tree and select Refactor > Extract Style.
2. In the Extract Android Style dialog, clear the layout_width checkbox, the layout_height checkbox, and the textAlignment checkbox. These attributes are usually different for each view, so you don’t want them to be part of the style.
3. In the Style name field, enter NameStyle.
4. Click OK.
5. A style is also a resource, so the style is saved in the res/values/ folder in a styles.xml file. Open styles.xml and examine the generated code for the NameStyle style, which will look similar to this:

   <style name="NameStyle">
   	<item name="android:layout_marginTop">@dimen/layout_margin</item>
   	<item name="android:fontFamily">@font/roboto</item>
   	<item name="android:paddingTop">@dimen/small_padding</item>
   	<item name="android:textColor">@android:color/black</item>
   	<item name="android:textSize">@dimen/text_size</item>
   </style>
   

6. Open activity_main.xml and switch to the Text tab. Notice that the generated style is being used in the text view as style="@style/NameStyle".
7. Run the app and notice the changes in the font and the padding around your TextView.