Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> Android

एंड्रॉइड में बॉर्डर वाली टेबल कैसे बनाएं?

एंड्रॉइड में TableLayout से बॉर्डर वाली टेबल बनाना

यह उदाहरण दिखाता है कि `TableLayout` और `TableRow` का उपयोग करके बॉर्डर वाली डेटा टेबल कैसे बनाई जाती है।

चरण 1: नया प्रोजेक्ट बनाएं

Android Studio में File → New Project चुनकर नया प्रोजेक्ट बनाएं।

चरण 2: लेआउट XML में टेबल बनाएं

res/layout/activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="100dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:stretchColumns="*"
    tools:context=".MainActivity">

    <!-- हेडर रो -->
    <TableRow
        android:background="#0079D6"
        android:padding="5dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="10dp"
            android:text="UserId"
            android:textColor="#FFFFFF"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="10dp"
            android:text="User Name"
            android:textColor="#FFFFFF"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="10dp"
            android:text="Location"
            android:textColor="#FFFFFF"
            android:textStyle="bold" />

    </TableRow>

    <!-- डेटा रो 1 -->
    <TableRow
        android:background="#DAE8FC"
        android:padding="5dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="10dp"
            android:text="1" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="10dp"
            android:text="Michael Jackson" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="10dp"
            android:text="SA" />

    </TableRow>

    <!-- डेटा रो 2 -->
    <TableRow
        android:background="#DAE8FC"
        android:padding="5dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="10dp"
            android:text="2" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="10dp"
            android:text="Selena Gomez" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="10dp"
            android:text="USA" />

    </TableRow>

    <!-- डेटा रो 3 -->
    <TableRow
        android:background="#DAE8FC"
        android:padding="5dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="10dp"
            android:text="3" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="10dp"
            android:text="Pitbull" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="10dp"
            android:text="UK" />

    </TableRow>

</TableLayout>

🎨 बेहतर बॉर्डर के लिए: ड्रॉएबल बैकग्राउंड का उपयोग करें

ऊपर का उदाहरण रो बैकग्राउंड रंग बदलता है लेकिन वास्तविक बॉर्डर लाइन नहीं देता। वास्तविक बॉर्डर के लिए:

res/drawable/cell_border.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <stroke
        android:width="1dp"
        android:color="#CCCCCC" />
</shape>

फिर प्रत्येक TextView पर लागू करें:

<TextView
    ...
    android:background="@drawable/cell_border"
    android:layout_margin="-1dp" /> 
    

चरण 3: MainActivity

MainActivity.java:

package com.example.sample;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

चरण 4: Manifest

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.example.sample">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity android:name=".MainActivity" android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

📱 बेहतर विकल्प: RecyclerView (बड़ी सूचियों के लिए)

TableLayout बड़ी डेटा के लिए उपयुक्त नहीं है। RecyclerView उपयोग करें:

// build.gradle
implementation 'androidx.recyclerview:recyclerview:1.2.1'

// लेआउट में RecyclerView + GridLayoutManager (spanCount = कॉलम संख्या)

ऐप चलाएं

डिवाइस कनेक्ट करें, Run पर क्लिक करें। नीले हेडर और हल्के नीले रो वाली टेबल दिखाई देगी।

  1. Android में ListView को राउंडेड कॉर्नर्स के साथ कैसे बनाएं? Android में ListView को राउंडेड कॉर्नर्स के साथ कैसे बनाएं?

    Android में राउंडेड कॉर्नर्स वाला ListView बनाने का पूरा गाइड इस ट्यूटोरियल में हम सीखेंगे कि Android ऐप में ListView के चारों ओर राउंडेड कॉर्नर्स (rounded corners) कैसे लागू करें। यह UI को अधिक आकर्षक और आधुनिक बनाता है। चरण 1: नया प्रोजेक्ट बनाएं Android Studio खोलें और File → New Project चुनें।

  1. एंड्रॉइड में गोल कोनों वाला EditText कैसे बनाएं? एंड्रॉइड में गोल कोनों वाला EditText कैसे बनाएं?

    ड्रॉएबल शेप के साथ कस्टम EditText स्टाइलिंग यह उदाहरण दर्शाता है कि XML ड्रॉएबल शेप का उपयोग करके EditText के लिए गोल कोने, बॉर्डर और पृष्ठभूमि कैसे बनाएं। चरण 1: नया प्रोजेक्ट बनाएं Android Studio में File → New Project चुनें। चरण 2: लेआउट में EditText जोड़ें res/layout/activity_main.xml: <?xm

  1. HTML में कैप्शन वाली टेबल कैसे बनाएं? HTML में कैप्शन वाली टेबल कैसे बनाएं?

    <caption> टैग का उपयोग HTML टेबल में कैप्शन (शीर्षक) जोड़ने के लिए <caption> टैग उपयोग करें। यह <table> टैग के तुरंत बाद आता है। उदाहरण <!DOCTYPE html> <html> <head> <style> table, td, th { border: 1px solid black; } </style> </head>