Day42 of #100DaysOfCode

#CodeTogether Day 42/100

Hii folks 🙌

Today I started pathway 2 of Unit 2 of the Android Basic with Kotlin.

Unit 2: Layouts

Pathway 2: Get user input in an app — Part 2

Source: https://developer.android.com/courses/android-basics-kotlin/course

Today we are going to add colors to our android app.‎️‍🌈

Note that a color can also be defined including an alpha value #00-#FF, which represents the transparency (#00 = 0% = fully transparent, #FF = 100% = fully opaque). When included, the alpha value is the first of 4 hexadecimal numbers (ARGB). If an alpha value is not included, it is assumed to be #FF = 100% opaque.

• So, first, create a new Android Project, and in the activity.xml file, I wrote down the following code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:gravity="center_vertical"
        android:text="@string/primary_color"
        android:textAllCaps="true"
        android:textSize="12sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/button" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="8dp"
        android:gravity="center_vertical"
        android:text="@string/secondary_color"
        android:textAllCaps="true"
        android:textSize="12sp" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:contentDescription="@string/email_icon"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</LinearLayout>

• Then in the strings.xml (app > res > values > strings.xml), I declared the string names.

<resources>
    <string name="app_name">TipTime</string>
    <string name="primary_color">Primary color</string>
    <string name="button">Button</string>
    <string name="secondary_color">Secondary color</string>
    <string name="email_icon">email icon</string>
</resources>

• And in the colors.xml (app > res > values > colors.xml) file, I declared the colors hex values for each color resource.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
</resources>

• After this, we will pick some colors and add them to our app. Now the colors.xml file looks like this:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>

    <color name="green">#1B5E20</color>
    <color name="green_dark">#003300</color>
    <color name="green_light">#A5D6A7</color>
    <color name="blue">#0288D1</color>
    <color name="blue_dark">#005B9F</color>
    <color name="blue_light">#81D4FA</color>
</resources>

• Now we can use the colors in our theme, so in themes.xml file we will assign those colors and file will look like this:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green</item>
        <item name="colorPrimaryVariant">@color/green_dark</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue</item>
        <item name="colorSecondaryVariant">@color/blue_dark</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize our theme here. -->
    </style>
</resources>

1. Changed colorPrimary to the primary color, we selected, @color/green.
2. Changed colorPrimaryVariant to @color/green_dark.
3. Changed colorSecondary to @color/blue.
4. Changed colorSecondaryVariant to @color/blue_dark.

Now, the app looks something like this:

Today I Learned:

• We can use the Material Color Tool to select colors for our app theme.
• Alternatively, we can use the Material palette generator to help select a color palette.
• Declare color resources in the colors.xml file to make it easier to reuse them.

That is all for Day42 ✅

Thanks for reading, See you tomorrow!