Android Ui design & layout -material design

Android UI Design & Layouts

Material Design வழிகாட்டி தமிழில்

1. Layouts பற்றி அறிதல்

Android UI வடிவமைப்பில் முக்கியமானவை Layouts. அவை:

• LinearLayout → Elements-ஐ Horizontal/Vertical வரிசையில் வைக்கிறது
• RelativeLayout → Elements-ஐ ஒன்றுக்கொன்று தொடர்புபடுத்துகிறது
• ConstraintLayout → Complex UI-களுக்கான Flexible Layout
• FrameLayout → ஒரே இடத்தில் Overlay செய்ய பயன்படுத்தப்படும்

2. LinearLayout உதாரணம்

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="பெயரை உள்ளிடவும்:"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="உங்கள் பெயர்"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="சமர்ப்பிக்கவும்"/>

</LinearLayout>
    

3. ConstraintLayout உதாரணம்

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btnClick"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>
    

4. Material Design Components

Google-ன் Material Design guidelines மூலம் modern UI-களை உருவாக்கலாம். com.google.android.material:material library-ஐ பயன்படுத்தி:

• MaterialButton
• TextInputLayout
• CardView
• BottomNavigationView

5. Material Button Example

<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Material Button"
    style="@style/Widget.MaterialComponents.Button.Filled"/>
    

6. Theme & Styles

themes.xml மற்றும் styles.xml கோப்புகள் மூலம் App முழுவதற்கும் நிறம், எழுத்துரு, UI look-and-feel அமைக்கலாம்.

முடிவு

🎨 இதுவரை நீங்கள் Layouts மற்றும் Material Design UI பற்றி கற்றுக் கொண்டீர்கள். அடுத்த பாடத்தில் Activities & Intents பற்றி விரிவாக பார்க்கலாம்.

© 2025 SakthibalaWeb - Android Development Tutorials தமிழில்