ปุ่ม Android พร้อมไอคอนและข้อความ


93

ฉันมีปุ่มแบบนี้ในแอปของฉัน:

    <Button
        android:id="@+id/bSearch"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:text="Search"
        android:textSize="24sp" />

ฉันพยายามสร้างปุ่มเดียวกันกับข้อความและไอคอน android: drawableLeft ใช้ไม่ได้สำหรับฉัน (อาจจะเป็นไปได้ แต่ฉันไม่รู้วิธีตั้งค่าความสูงสูงสุดให้กับไอคอน)

ดังนั้นฉันจึงสร้าง LinearLayout ด้วย ImageView และ TextView และทำให้มันทำหน้าที่เหมือนปุ่ม:

    <LinearLayout
        android:id="@+id/bSearch2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:drawable/btn_default"
        android:clickable="true"
        android:padding="16dp"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="5dp"
            android:adjustViewBounds="true"
            android:maxHeight="30dp"
            android:maxWidth="30dp"
            android:scaleType="fitCenter"
            android:src="@drawable/search_icon" />

        <TextView
            android:id="@+id/tvSearchCaption"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:textSize="24sp"
            android:paddingRight="30dp"
            android:gravity="center"
            android:text="Search" />
    </LinearLayout>

ปุ่มใหม่ของฉันคือสิ่งที่ฉันต้องการ (ขนาดตัวอักษรไอคอนและตำแหน่งข้อความ) แต่ดูเหมือนปุ่มเริ่มต้นของฉัน:

ป้อนคำอธิบายภาพที่นี่

ดังนั้นฉันจึงลองเปลี่ยนพื้นหลังและสีข้อความของปุ่มใหม่ของฉัน:

Button Search = (Button) findViewById(R.id.bSearch);
LinearLayout bSearch2 = (LinearLayout) findViewById(R.id.bSearch2);
bSearch2.setBackground(bSearch.getBackground());
TextView tvSearchCaption = (TextView)findViewById(R.id.tvSearchCaption);
tvSearchCaption.setTextColor(bSearch.getTextColors().getDefaultColor());

สิ่งนี้ให้ผลลัพธ์ที่แปลกปุ่มเก่าของฉันยุ่งเหยิง:

ป้อนคำอธิบายภาพที่นี่

เมื่อฉันเปลี่ยนลำดับของปุ่มทั้งสองนี้ใน XML ดังนั้น "ปุ่มใหม่" จึงไปก่อนมันทำให้เกิดผลลัพธ์แปลก ๆ อีกอย่าง:

ป้อนคำอธิบายภาพที่นี่

ตอนนี้ฉันสังเกตว่าเมื่อฉันพยายามกดปุ่มเก่าปุ่มใหม่จะถูกกด

ความคิดใด ๆ ?

คำตอบ:


284

ลองอันนี้.

<Button
    android:id="@+id/bSearch"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:text="Search"
    android:drawableLeft="@android:drawable/ic_menu_search"
    android:textSize="24sp"/>

3
ดูเหมือนว่าฉันต้องการ แต่ฉันต้องการใช้ไอคอนของตัวเองไม่ใช่ไอคอนเริ่มต้นของ Android ไอคอนของฉันมีขนาดใหญ่ขึ้น หมายความว่าฉันต้องสร้างบิตแมปที่เล็กลงสำหรับทุกความละเอียดหรือไม่? มีพารามิเตอร์บางตัวที่ให้ฉันควบคุมขนาดไอคอนได้หรือไม่?
Dusan

ถูกต้อง. คุณต้องสร้างขนาดภาพที่แตกต่างกันสำหรับแต่ละความละเอียด
Liem Vo

โอเคขอบคุณสำหรับความช่วยเหลือของคุณ แต่ตอนนี้ฉันมีคำถามอื่น ... ไอคอนของฉันสว่างเพราะข้อความเป็นสีขาวบนปุ่มสีเข้มเหมือนที่คุณเห็นในรูปภาพในคำถามของฉัน แอปถูกตั้งค่าให้ใช้ธีมที่มีให้ใช้งานในเวอร์ชัน Android ตัวอย่างของฉันมาจาก android 4.3 เมื่อแอปทำงานบน Android 2.3.3 ปุ่มเริ่มต้นจะสว่างพร้อมข้อความสีเข้ม บางอย่างเช่นปุ่มบนภาพแรกของฉัน มีวิธีจัดเตรียมบิตแมปทางเลือกสำหรับไอคอนที่ทำงานบนอุปกรณ์รุ่นเก่าหรือไม่ ฉันหวังว่าคุณจะเข้าใจคำถามของฉัน :)
Dusan

นั่นเป็นคำถามที่ดี คุณสามารถกำหนดรูปแบบที่แตกต่างกันสำหรับไอคอนของคุณตัวระบายข้อความอย่างมีสไตล์สำหรับแต่ละระดับ API (หมายถึงเวอร์ชัน Android OS) คุณสามารถดูโฟลเดอร์ values-v11, values-v14
Liem Vo

2
คุณยังสามารถเพิ่มช่องว่างภายในไอคอน android: drawablePadding = ""
Asad Mirza

15

ในการเพิ่มภาพไปทางซ้ายขวาบนหรือล่างคุณสามารถใช้แอตทริบิวต์ดังนี้:

android:drawableLeft
android:drawableRight
android:drawableTop
android:drawableBottom

โค้ดตัวอย่างได้รับด้านบน คุณยังสามารถบรรลุสิ่งนี้ได้โดยใช้เค้าโครงสัมพัทธ์


ฉันจะทำแบบเป็นโปรแกรมได้อย่างไร
Sujay UN

1
คุณสามารถพูดandroid:drawableStartแทนซ้ายและandroid:drawableEndแทนขวา
Simão Garcia

@ SimãoGarcia * ควร เริ่มต้นควรแทนที่ขวาและสิ้นสุดควรแทนที่ซ้ายในทุกตำแหน่ง ทั้งนี้เพื่อให้แน่ใจว่าการอ่านจากขวาไปซ้ายและการอ่านจากซ้ายไปขวาสามารถใช้ได้เนื่องจากประเทศอื่น ๆ บางประเทศอ่านไม่เหมือนกัน
Carson J.

11

สำหรับใครก็ตามที่ต้องการทำสิ่งนี้แบบไดนามิกsetCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom)วัตถุปุ่มจะช่วยได้

ตัวอย่าง

Button search = (Button) findViewById(R.id.yoursearchbutton);
search.setCompoundDrawables('your_drawable',null,null,null);

5
การใช้ setCompoundDrawables ไม่ได้แสดงถึง UI ใช้ setCompoundDrawablesWithIntrinsicBounds แทนและใช้งานได้
Aldo

5

นี่คือสิ่งที่คุณต้องการจริงๆ

<Button
       android:id="@+id/settings"
       android:layout_width="190dp"
       android:layout_height="wrap_content"
       android:layout_gravity="center_horizontal"
       android:background="@color/colorAccent"
       android:drawableStart="@drawable/ic_settings_black_24dp"
       android:paddingStart="40dp"
       android:paddingEnd="40dp"
       android:text="settings"
       android:textColor="#FFF" />

4

คุณสามารถใช้ไลบรารีส่วนประกอบวัสดุและMaterialButtonคอมโพเนนต์
ใช้app:iconและapp:iconGravity="start"แอตทริบิวต์

สิ่งที่ต้องการ:

  <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.Icon"
        app:icon="@drawable/..."
        app:iconGravity="start"
        ../>

ป้อนคำอธิบายภาพที่นี่


โปรดทราบว่าหากคุณมีธีมการออกแบบวัสดุสำหรับแอปของคุณวิดเจ็ตปุ่มมาตรฐานจะพองอัตโนมัติเป็น MaterialButton ต่อที่นี่ - material.io/develop/android/components/buttons
dodgy_coder

2

คำตอบของ @Liem Vo นั้นถูกต้องหากคุณใช้ android.widgetbutton โดยไม่มีการลบล้างใด ๆ หากคุณกำลังลบล้างธีมของคุณโดยใช้ MaterialComponents สิ่งนี้จะไม่สามารถแก้ปัญหาได้

ดังนั้นถ้าคุณเป็น

  1. ใช้ com.google.android.material.button.MaterialButton หรือ
  2. การแทนที่ AppTheme โดยใช้ MaterialComponents

ใช้app: iconพารามิเตอร์

<Button
    android:id="@+id/bSearch"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:text="Search"
    android:textSize="24sp"
    app:icon="@android:drawable/ic_menu_search" />
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.