Modify UI (Design your app’s look).

 

Next Steps: What Do You Want to Do?

1️⃣ Modify UI (Design your app’s look).
2️⃣ Write Code (Add functionality like buttons).
3️⃣ Run the App (Test on an emulator or phone).

-------------------------------------------------------------------------------------------

Great! Let’s modify the UI (User Interface) of your app. 🎨📱

Step 1: Open the Layout File

• In the Left Panel, go to:

  nginx
  app → res → layout → activity_main.xml
  

• Click on activity_main.xml.

---

Step 2: Choose Design Mode

At the top-right of the middle panel, select:
✅ "Design" (for drag-and-drop editing)
✅ "Split" (to see code + preview together)

---

Step 3: Create a 3-Part Layout (Left, Middle, Right)

We will use a LinearLayout with horizontal orientation to divide the screen into three sections.

XML Code for a Simple 3-Part Layout

Replace the existing ConstraintLayout with this:

xml
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <!-- Left Section -->
    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Left"
        android:textSize="20sp"
        android:background="#FFC107"/>

    <!-- Middle Section -->
    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Middle"
        android:textSize="20sp"
        android:background="#03A9F4"/>

    <!-- Right Section -->
    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Right"
        android:textSize="20sp"
        android:background="#4CAF50"/>
</LinearLayout>

---

Step 4: Run & Test

• Click the Run ▶️ button at the top.
• Select an emulator or physical device to see the changes.

---

Customization Ideas 🎨

• Change text (Left, Middle, Right) to church-related labels.
• Replace TextView with Buttons, Images, or other elements.
• Adjust colors to match your church’s theme.

Would you like help adding buttons, images, or more functionality? 😊🚀