Gaya garis bawah di Android

120

Saya perlu membuat bentuk android sehingga hanya bagian bawah yang memiliki goresan (garis putus-putus). Ketika saya mencoba yang berikut ini, goresan itu membagi dua bentuk tepat melalui tengah. Adakah yang tahu bagaimana melakukannya dengan benar? goresan harus menjadi garis bawah / perbatasan. Saya menggunakan bentuk sebagai latar belakang TextView. Tolong, lupakan mengapa saya membutuhkannya.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#1bd4f6" />
        </shape>
    </item>

    <item>
        <shape android:shape="line" >
            <padding android:bottom="1dp" />

            <stroke
                android:dashGap="10px"
                android:dashWidth="10px"
                android:width="1dp"
                android:color="#ababb2" />
        </shape>
    </item>

</layer-list>
Cote Mounyo
sumber
2
Mengapa saya melihat proyek git Anda untuk sesuatu yang sangat sederhana? Apakah Anda mencari hit untuk proyek ini?
Cote Mounyo
hanya ingin tahu, mengapa Anda menggunakan px untuk menentukan ukuran tanda hubung?
Jose_GD

Jawaban:

313

Ini semacam peretasan, tetapi saya pikir ini mungkin cara terbaik untuk melakukannya. Garis putus-putus akan selalu berada di bawah, berapa pun tingginya.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#1bd4f6" />
        </shape>
    </item>

    <item android:top="-2dp" android:right="-2dp" android:left="-2dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:dashGap="10px"
                android:dashWidth="10px"
                android:width="1dp"
                android:color="#ababb2" />
        </shape>
    </item>

</layer-list>

Penjelasan:

Bentuk kedua adalah persegi panjang transparan dengan garis putus-putus. Kunci untuk membuat batas hanya muncul di sepanjang bagian bawah terletak di margin negatif mengatur sisi lainnya. Margin negatif ini "mendorong" garis putus-putus di luar area yang digambar di sisi tersebut, hanya menyisakan garis di sepanjang bagian bawah. Satu potensi efek samping (yang belum saya coba) adalah, untuk tampilan yang menggambar di luar batasnya sendiri, batas margin negatif mungkin menjadi terlihat.

Krylez
sumber
5
Pintar memang. Butuh beberapa waktu bagi saya untuk mengetahui bahwa yang membuat ini berhasil adalah perbedaan dalam 1 dp (dalam nilai absolut) antara atas, kanan, dan kiri, serta lebar guratan :)
Jose_GD
5
Ini bekerja dengan sempurna, tetapi bisakah seseorang melengkapi jawabannya dengan penjelasan matematika dalam hal ini (untuk jiwa-jiwa yang malang seperti saya dan siapa pun yang datang ke sini di masa yang akan datang) :)
source.rar
Bekerja dengan baik. Dan Anda bahkan dapat menggunakan selektor yang menunjuk ke daftar-lapisan xmls bergantung pada status. Saya harus memikirkan yang satu itu dan itu berhasil juga.
Dacker
Jangan masukkan overdraw yang tidak perlu. Saya pikir solusi @Anonan lebih baik. Coba ubah yang itu sesuai kebutuhan Anda.
Vlad
44

Ini triknya ...

<item >
    <shape android:shape="rectangle">
        <solid android:color="#YOUR_BOTTOM_LINE_COLOR"/>
    </shape>
</item>

<item android:bottom="1.5dp">
    <shape android:shape="rectangle">
        <solid android:color="#YOUR_BG_COLOR"/>
    </shape>
</item>
Jongz Puangput
sumber
Ada dua persegi panjang yang saling tumpang tindih dan menambahkan ruang bawah untuk menunjukkan warna lain sebagai garis. jadi, Anda dapat menerapkan ini untuk melakukan cara lain
Jongz Puangput
3
Jawaban bagus tetapi dengan overdraw yang berlebihan
Lester
dan juga tidak akan berfungsi jika Anda memiliki warna dengan alfa
Dirk
43
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:top="-6dp"
        android:left="-6dp"
        android:right="-6dp"
        android:bottom="0dp">

        <shape android:shape="rectangle">
            <solid android:color="#88FFFF00"/>
            <stroke
                android:width="5dp"
                android:color="#FF000000"/>
        </shape>
    </item>
</layer-list>
Anonan
sumber
Bekerja dengan sempurna untuk saya! Terima kasih.
hetsgandhi
19

Jawaban ini untuk pencari google yang ingin menunjukkan batas bawah bertitik EditTextseperti di sini

Sampel

Buat folder dotted.xmldi dalam drawabledan tempel ini

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="1dp"
        android:left="-2dp"
        android:right="-2dp"
        android:top="-2dp">
        <shape android:shape="rectangle">
            <stroke
                android:width="0.5dp"
                android:color="@android:color/black" />    
            <solid android:color="#ffffff" />
            <stroke
                android:width="1dp"
                android:color="#030310"
                android:dashGap="5dp"
                android:dashWidth="5dp" />
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />
        </shape>
    </item>
</layer-list>

Kemudian cukup atur android:backgroundatribut yang dotted.xmlbaru saja kita buat. Anda EditTextterlihat seperti ini.

<EditText
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Some Text"
    android:background="@drawable/dotted" />
Shree Krishna
sumber
13

Saya merasa ini mudah, tanpa semua bantalan atau bangau negatif ini.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@color/main_bg_color"/>
    <item android:gravity="bottom">
        <shape android:shape="rectangle">
            <size android:height="5dp"/>
            <solid android:color="@color/bottom_bar_color"/>
        </shape>
    </item>
</layer-list>
Simon K. Gerges
sumber
2
Jika Anda tidak membutuhkan latar belakang khusus, Anda dapat menghapus<item android:drawable="@color/main_bg_color"/>
Overclover
1
Bekerja dengan Android 27, tidak bekerja dengan Android 19 ... tidak menguji versi lain.
Konyol
10

Coba kode drawable xml berikutnya:

    <layer-list>
        <item android:top="-2dp" android:right="-2dp" android:left="-2dp">
            <shape>
                <solid android:color="@android:color/transparent" />
                <stroke
                    android:width="1dp"
                    android:color="#fff" />
            </shape>
        </item>
    </layer-list>
Sviatoslav Zaitsev
sumber
7

Saya pikir Anda tidak perlu menggunakan bentuk jika saya mengerti Anda.

Jika Anda melihat seperti yang ditunjukkan pada gambar berikut, gunakan tata letak berikut.

masukkan deskripsi gambar di sini

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:background="#1bd4f6"
    android:paddingBottom="4dp" >

    <TextView
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:background="#ababb2"
        android:padding="5dp"
        android:text="Hello Android" />
 </RelativeLayout>

 </RelativeLayout>

EDIT

bermain dengan properti ini, Anda akan mendapatkan hasil

    android:top="dimension"
    android:right="dimension"
    android:bottom="dimension"
    android:left="dimension"

coba seperti ini

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item>
    <shape android:shape="rectangle" >
        <solid android:color="#1bd4f6" />
    </shape>
</item>

<item android:top="20px"
    android:left="0px">
    <shape android:shape="line"  >
        <padding android:bottom="1dp" />

        <stroke
            android:dashGap="10px"
            android:dashWidth="10px"
            android:width="1dp"
            android:color="#ababb2" />
    </shape>
</item>

</layer-list>
Ketan Ahir
sumber
pukulan saya adalah garis putus-putus
Cote Mounyo
Ini berfungsi, satu-satunya peringatan adalah ketika ukuran tampilan diubah terlalu kecil, bentuknya tidak terlihat
Jose_GD
Anda harus selalu berhati-hati untuk tidak memasukkan overdraw yang tidak perlu.
Vlad
5

Solusi sederhana:

Buat file drawable sebagai edittext_stroke.xml di folder drawable . Tambahkan kode di bawah ini:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line"
   >
    <stroke
        android:width="1dp"
        android:color="@android:color/white" >
    </stroke>
</shape>

Di file tata letak, tambahkan drawable ke edittext sebagai

android: drawableBottom = "@ drawable / edittext_stroke"

<EditText
      android:textColor="@android:color/white"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:drawableBottom="@drawable/edittext_stroke"
      />
adhi
sumber
Dalam hal ini baris Anda akan berada di tengah, bukan di bawah
Sviatoslav Zaitsev
4

Biasanya untuk tugas serupa - Saya membuat daftar lapisan yang dapat digambar seperti ini:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
        <solid android:color="@color/underlineColor"/>
        </shape>
    </item>
<item android:bottom="3dp">
    <shape android:shape="rectangle">
        <solid android:color="@color/buttonColor"/>
    </shape>
</item>

Idenya adalah pertama-tama Anda menggambar persegi panjang dengan underlineColor dan di atasnya Anda menggambar persegi panjang lain dengan buttonColor sebenarnya tetapi menerapkan bottomPadding. Itu selalu berhasil.

Tetapi ketika saya perlu memiliki buttonColor agar transparan, saya tidak dapat menggunakan drawable di atas. Saya menemukan satu solusi lagi

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="@android:color/transparent"/>
    </shape>
</item>

<item android:drawable="@drawable/white_box" android:gravity="bottom"     android:height="2dp"/>
</layer-list>

(seperti yang Anda lihat di sini mainButtonColor transparan dan white_box hanyalah persegi panjang sederhana yang dapat digambar dengan Solid putih)

Lanitka
sumber
2

gunakan xml ini ubah warnanya dengan pilihan Anda.

<item>
    <layer-list>
        <item>
            <shape>
                <solid android:color="@color/gray_500" />

            </shape>
        </item>
        <!-- CONTENT LAYER -->
        <item android:bottom="2dp" >
            <shape>
                <solid android:color="#ffffff" />
            </shape>
        </item>
    </layer-list>
</item>

Dalam Kasus jika Anda ingin secara terprogram

public static Drawable getStorkLineDrawable(@ColorInt int colorStrok, int    iSize, int left, int top, int right, int bottom)

{
    GradientDrawable gradientDrawable = new GradientDrawable();
    gradientDrawable.setShape(GradientDrawable.RECTANGLE);
    gradientDrawable.setStroke(iSize, colorStrok);
    LayerDrawable layerDrawable = new LayerDrawable(new Drawable[]{gradientDrawable});
    layerDrawable.setLayerInset(0, left, top, right, bottom);
    return layerDrawable;
}

sebut metode ini seperti

  Drawable yourLineDrawable=  getStorkLineDrawable(yourColor, iSize, -iSize, -iSize, -iSize, 0);
sourav pandit
sumber
2

Ini bekerja paling baik untuk saya:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="-5dp" android:left="-5dp" android:right="-5dp" android:bottom="0dp">
        <shape android:shape="rectangle">
            <stroke android:width="4dp" android:color="#ff0000"/>
        </shape>
    </item>
</layer-list>

Menunjukkan garis di bagian bawah saja. Anda dapat dengan mudah mengubah dengan lebar guratan ke ukuran yang Anda suka dan juga memperbarui bagian atas, kiri, kanan yang sesuai.

Sileria
sumber
2

Cara termudah untuk melakukannya adalah meletakkan setelah tampilan di mana Anda ingin batas bawah

    <?xml version="1.0" encoding="utf-8"?>
    <View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@color/colorPrimary" />
Rachit Vohera
sumber
0

itu benar-benar Edittext transparan dengan latar belakang transparan.

<item>
    <shape android:shape="rectangle" >
        <solid android:color="@color/transparent" />
    </shape>
</item>

<item android:top="-3dp" android:right="-3dp" android:left="-3dp">
    <shape>
        <solid android:color="@android:color/transparent" />
        <stroke

            android:width="2dp"
            android:color="@color/bottomline" />
    </shape>
</item>

Samet ÖZTOPRAK
sumber
0

Solusi sederhana :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="-1dp"
        android:left="-1dp"
        android:right="-1dp"
        android:top="-1dp">

        <shape android:shape="rectangle">

            <solid android:color="#AARRGGBB" />

            <stroke
                android:width="5dp"
                android:color="@android:color/red"
                android:dashWidth="10dp"
                android:dashGap="12dp" />

        </shape>
    </item>
</layer-list>

Dan akhirnya kami memiliki sesuatu seperti itu :)

masukkan deskripsi gambar di sini

Amirhf
sumber