Cara membuat latar belakang 20% ​​transparan di Android

Jawaban:

1038

Jadikan warnanya 80% di saluran alpha. Misalnya, untuk penggunaan merah #CCFF0000:

<TextView
   ...
   android:background="#CCFF0000" />

Dalam contoh, CCadalah angka heksadesimal untuk 255 * 0.8 = 204. Perhatikan bahwa dua digit heksadesimal pertama adalah untuk saluran alpha. Formatnya adalah #AARRGGBB, di mana AAsaluran alfa, RRadalah saluran merah, GGadalah saluran hijau dan BBmerupakan saluran biru.

Saya berasumsi bahwa 20% transparan berarti 80% buram. Jika Anda bermaksud sebaliknya, alih-alih CCgunakan 33yang merupakan heksadesimal untuk 255 * 0.2 = 51.

Untuk menghitung nilai yang tepat untuk nilai transparansi alfa, Anda dapat mengikuti prosedur ini:

  1. Dengan persentase transparansi, misalnya 20%, Anda tahu nilai persentase buram adalah 80% (ini 100-20=80)
  2. Rentang untuk saluran alfa adalah 8 bit ( 2^8=256), yang berarti rentang bergerak dari 0 hingga 255.
  3. Proyeksikan persentase buram ke dalam rentang alfa, yaitu, gandakan rentang (255) dengan persentase. Dalam contoh ini 255 * 0.8 = 204. Membulatkan ke bilangan bulat terdekat jika diperlukan.
  4. Konversikan nilai yang diperoleh pada 3., yang ada di basis 10, ke heksadesimal (basis 16). Anda dapat menggunakan Google untuk ini atau kalkulator apa pun. Menggunakan Google, ketikkan "204 to hexa" dan itu akan memberi Anda nilai heksadesimal. Dalam hal ini 0xCC.
  5. Tambahkan nilai yang diperoleh dalam 4. ke warna yang diinginkan. Misalnya, untuk merah, yaitu FF0000, Anda akan memilikinya CCFF0000.

Anda dapat melihat dokumentasi Android untuk warna .

— aromero
sumber
Untuk warna putih dengan transparansi, sesuai pertanyaan, gunakan android:background="#CCFFFFFF".
— Gotwo
Bagaimana menerapkan aturan ini untuk latar belakang dengan gambar?
— user1090751
1517

Gunakan kode di bawah ini untuk warna hitam:

<color name="black">#000000</color>

Sekarang jika saya ingin menggunakan opacity maka Anda dapat menggunakan kode di bawah ini: 

 <color name="black">#99000000</color> <!-- 99 is for alpha and others pairs zero's are for R G B -->

Dan di bawah ini untuk kode opacity: dan semua level opacity di sini

Nilai Hex Opacity

100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00

Jika Anda selalu lupa kode transparansi apa, maka Anda harus melihat tautan di bawah ini dan tidak perlu khawatir mengingat apa pun mengenai kode transparan: -

https://github.com/duggu-hcd/TransparentColorCode

textviewHeader.setTextColor(Color.parseColor(ColorTransparentUtils.transparentColor(R.color.border_color,10)));
— Duggu
sumber
3
melihat ini saya menggunakan # 99ffffff dan itu bekerja dengan baik untuk saya, terima kasih
— nawaab saab
Bagaimana menerapkan aturan ini untuk latar belakang dengan gambar?
— user1090751
149

Anda dapat mengatur opacity warna dengan mengubah 2 karakter pertama dalam definisi warna:

# 99 000000 

100% — FF
99% — FC
98% — FA
97% — F7
96% — F5
95% — F2
94% — F0
93% — ED
92% — EB
91% — E8

90% — E6
89% — E3
88% — E0
87% — DE
86% — DB
85% — D9
84% — D6
83% — D4
82% — D1
81% — CF

80% — CC
79% — C9
78% — C7
77% — C4
76% — C2
75% — BF
74% — BD
73% — BA
72% — B8
71% — B5

70% — B3
69% — B0
68% — AD
67% — AB
66% — A8
65% — A6
64% — A3
63% — A1
62% — 9E
61% — 9C

60% — 99
59% — 96
58% — 94
57% — 91
56% — 8F
55% — 8C
54% — 8A
53% — 87
52% — 85
51% — 82

50% — 80
49% — 7D
48% — 7A
47% — 78
46% — 75
45% — 73
44% — 70
43% — 6E
42% — 6B
41% — 69

40% — 66
39% — 63
38% — 61
37% — 5E
36% — 5C
35% — 59
34% — 57
33% — 54
32% — 52
31% — 4F

30% — 4D
29% — 4A
28% — 47
27% — 45
26% — 42
25% — 40
24% — 3D
23% — 3B
22% — 38
21% — 36

20% — 33
19% — 30
18% — 2E
17% — 2B
16% — 29
15% — 26
14% — 24
13% — 21
12% — 1F
11% — 1C

10% — 1A
9% — 17
8% — 14
7% — 12
6% — 0F
5% — 0D
4% — 0A
3% — 08
2% — 05
1% — 03
0% — 00
— carlol
sumber
1
Apa yang ini tambahkan ke jawaban yang ada?
— Code-Apprentice
6
@ Code-Apprentice Saya kira jawaban ini berguna ketika Anda membutuhkan transparansi berbutir lebih baik seperti 87% atau 54%, seperti yang disebutkan dalam material.google.com/style/color.html#color-color-schemes
— Bruce
5
Ya, kemarin saya memiliki kebutuhan untuk mengelola alpha 13% dan saya memutuskan untuk menambahkan hasil pencarian saya ke utas yang bermanfaat ini.
— carlol
Bagaimana jika saya ingin membuat LinearLayout menjadi transparan tanpa warna?
— Si8
1
Semua tampilan transparan secara default, Anda dapat menggunakan mLinearLayout.setBackgroundColor secara terprogram (Color.TRANSPARENT); atau android: background = "@ android: color / transparan" di xml Anda jika Anda harus memaksanya karena beberapa alasan (jelas warna ini tidak diwarisi oleh pandangan anak)
— carlol
106

Gunakan warna dengan nilai alpha like #33------, dan atur sebagai latar belakang editText Anda menggunakan atribut XML android:background=" ".

  1. 0% (transparan) -> # 00 dalam hex
  2. 20% -> # 33
  3. 50% -> # 80
  4. 75% -> # C0
  5. 100% (buram) -> #FF

255 * 0,2 = 51 → dalam hex 33

— K_Anas
sumber
91

Anda dapat mencoba melakukan sesuatu seperti:

textView.getBackground().setAlpha(51);

Di sini Anda dapat mengatur opacity antara 0 (sepenuhnya transparan) ke 255 (benar-benar buram). 51 persis 20% yang Anda inginkan.

— yugidroid
sumber
17
@oti, karena textViewvariabel Anda null.
— yugidroid
solusi elegan yang bagus. Saya dapat menerapkan ini pada latar belakang item daftar ketika saya memilihnya - jadi saya mendapatkan warna, tetapi tidak bersaing dengan teks item .. Sangat keren, terima kasih!
— Gene Bo
setAlpha (int) tidak digunakan lagi karena setAlpha (float) di mana 0 sepenuhnya transparan dan 1 sepenuhnya myImage.setAlpha buram (0,5f);
— polmabri
@ polababri, tidak juga. myImage.setAlpha(0.5f);menerapkan alfa ke tampilan itu sendiri tetapi apa yang saya tunjukkan dalam jawaban saya sedang diterapkan ke latar belakang yang dapat ditarik.
— yugidroid
Ini dapat menyebabkan bug grafis! Gunakan dengan hati-hati dan banyak pengujian.
— Michael
74

Di Android Studio ada alat bawaan untuk menyesuaikan warna dan nilai alfa / opacity :

Android Sesuaikan Opacity Warna

— Jayakrishnan PM
sumber
32

Lihat tangkapan layar

Saya telah mengambil tiga Tampilan. Pada tampilan pertama saya mengatur warna penuh (tanpa alfa), pada tampilan kedua saya mengatur warna setengah (0,5 alpha), dan pada tampilan ketiga saya mengatur warna terang (0,2 alpha).

Anda dapat mengatur warna apa saja dan mendapatkan warna dengan alfa dengan menggunakan kode di bawah ini:

File activity_main.xml

<LinearLayout 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"
    android:gravity = "center"
    android:orientation = "vertical"
    tools:context = "com.example.temp.MainActivity" >

    <View
        android:id = "@+id/fullColorView"
        android:layout_width = "100dip"
        android:layout_height = "100dip" />

    <View
        android:id = "@+id/halfalphaColorView"
        android:layout_width = "100dip"
        android:layout_height = "100dip"
        android:layout_marginTop = "20dip" />

    <View
        android:id = "@+id/alphaColorView"
        android:layout_width = "100dip"
        android:layout_height = "100dip"
        android:layout_marginTop = "20dip" />

</LinearLayout>

File MainActivity.java

public class MainActivity extends Activity {

    private View fullColorView, halfalphaColorView, alphaColorView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        fullColorView = (View)findViewById(R.id.fullColorView);
        halfalphaColorView = (View)findViewById(R.id.halfalphaColorView);
        alphaColorView = (View)findViewById(R.id.alphaColorView);

        fullColorView.setBackgroundColor(Color.BLUE);
        halfalphaColorView.setBackgroundColor(getColorWithAlpha(Color.BLUE, 0.5f));
        alphaColorView.setBackgroundColor(getColorWithAlpha(Color.BLUE, 0.2f));
    }


    private int getColorWithAlpha(int color, float ratio) {
        int newColor = 0;
        int alpha = Math.round(Color.alpha(color) * ratio);
        int r = Color.red(color);
        int g = Color.green(color);
        int b = Color.blue(color);
        newColor = Color.argb(alpha, r, g, b);
        return newColor;
    }
}

Versi Kotlin:

private fun getColorWithAlpha(color: Int, ratio: Float): Int {
  return Color.argb(Math.round(Color.alpha(color) * ratio), Color.red(color), Color.green(color), Color.blue(color))
}

Selesai

— Hiren Patel
sumber
31

Kita bisa membuat transparan dengan cara juga.

Kode warna putih - FFFFFF

20% putih - # 33 FFFFFF

20% - 33

70% putih - # B3 FFFFFF

70% - B3

Semua nilai hex dari 100% menjadi 0%

100% - FF, 99% - FC, 98% - FA, 97% - F7, 96% - F5, 95% - F2, 94% - F0, 93% - ED, 92% - EB, 91% - E8, 90% - E6, 89% - E3, 88% - E0, 87% - DE, 86% - DB, 85% - D9, 84% - D6, 83% - D4, 82% - D1, 81% - CF, 80% - CC, 79% - C9, 78% - C7, 77% - C4, 76% - C2, 75% - BF, 74% - BD, 73% - BA, 72% - B8, 71% - B5, 70% - B3 , 69% - B0 68% - 67% Masehi - AB, 66% - A8, 65% - A6, 64% - A3, 63% - A1, 62% - 9E, 61% - 9C, 60% - 99, 59% - 96, 58% - 94, 57% - 91, 56% - 8F, 55% - 8C, 54% - 8A, 53% - 87, 52% - 85, 51% - 82, 50% - 80, 49% - 7D, 48% - 7A, 47% - 78, 46% - 75, 45% - 73, 44% - 70, 43% - 6E, 42% - 6B, 41% - 69, 40% - 66, 39% - 63, 38% - 61, 37% - 5E, 36% - 5C, 35% - 59, 34% - 57, 33% - 54, 32% - 52, 31% - 4F, 30% - 4D, 29% - 4A, 28% - 47, 27% - 45, 26% - 42, 25% - 40, 24% - 3D, 23% - 3B, 22% - 38, 21% - 36, 20% - 33, 19% - 30, 18% - 2E, 17% - 2B, 16% - 29, 15% - 26, 14% - 24, 13% - 21, 12% - 1F, 11% - 1C, 10% - 1A , 9% - 17, 8% - 14, 7% - 12, 6% - 0F, 5% - 0D, 4% - 0A, 3% - 08, 2% - 05, 1% - 03, 0% - 00

— Ashish Kumar
sumber
1
Jawaban yang luar biasa. Teruskan.
— Tarun
22

Semua nilai hex dari 100% hingga 0% alpha, Anda dapat mengatur warna apa pun dengan nilai alpha yang disebutkan di bawah ini. mis. #FAFFFFFF (ARRGGBB)

100% — FF
99% — FC
98% — FA
97% — F7
96% — F5
95% — F2
94% — F0
93% — ED
92% — EB
91% — E8
90% — E6
89% — E3
88% — E0
87% — DE
86% — DB
85% — D9
84% — D6
83% — D4
82% — D1
81% — CF
80% — CC
79% — C9
78% — C7
77% — C4
76% — C2
75% — BF
74% — BD
73% — BA
72% — B8
71% — B5
70% — B3
69% — B0
68% — AD
67% — AB
66% — A8
65% — A6
64% — A3
63% — A1
62% — 9E
61% — 9C
60% — 99
59% — 96
58% — 94
57% — 91
56% — 8F
55% — 8C
54% — 8A
53% — 87
52% — 85
51% — 82
50% — 80
49% — 7D
48% — 7A
47% — 78
46% — 75
45% — 73
44% — 70
43% — 6E
42% — 6B
41% — 69
40% — 66
39% — 63
38% — 61
37% — 5E
36% — 5C
35% — 59
34% — 57
33% — 54
32% — 52
31% — 4F
30% — 4D
29% — 4A
28% — 47
27% — 45
26% — 42
25% — 40
24% — 3D
23% — 3B
22% — 38
21% — 36
20% — 33
19% — 30
18% — 2E
17% — 2B
16% — 29
15% — 26
14% — 24
13% — 21
12% — 1F
11% — 1C
10% — 1A
9% — 17
8% — 14
7% — 12
6% — 0F
5% — 0D
4% — 0A
3% — 08
2% — 05
1% — 03
0% — 00
— Anant Shah
sumber
19

Sekarang Android Studio 3.3 dan versi yang lebih baru menyediakan fitur bawaan untuk mengubah nilai warna Alpha ,

Cukup klik pada warna di editor studio Android dan berikan nilai Alphapercentage .

Untuk informasi lebih lanjut lihat gambar di bawah ini

masukkan deskripsi gambar di sini

— Chandan Sharma
sumber
18

Ada nilai XML alphayang mengambil nilai ganda.

Karena API 11+rentang adalah dari 0fke 1f(inklusif), 0ftransparan dan 1fmenjadi buram:

  • android:alpha="0.0" itu tidak terlihat

  • android:alpha="0.5" tembus pandang

  • android:alpha="1.0" terlihat penuh

Begitulah cara kerjanya.

— eldivino87
sumber
1
yang akan membuat seluruh tata letak semi-transparan, termasuk kontennya
— jack_the_beast
7 
<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:alpha="0.9"
        />

Alpha berkisar antara 0 (transparan) dan 1 (buram) di Android API 11+

— Naramsim
sumber
3

Lihat Popularitas di bawah textView menggunakan ini 

     android:alpha="0.38"

masukkan deskripsi gambar di sini

XML

android:color="#3983BE00"    // Partially transparent sky blue

Secara dinamis

btn.getBackground (). setAlpha (128); // 50% transparan

tv_name.getBackground (). setAlpha (128); // 50% transparan

Where the INT ranges from 0 (fully transparent) to 255 (fully opaque).


  <TextView
            style="@style/TextAppearance.AppCompat.Caption"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:alpha="0.38"
            android:gravity="start"
            android:textStyle="bold"
            tools:text="1994|EN" />

android: alpha = "0,38"

Text View alpha property set 0.38 to your textView visibility is faid
— Keshav Gera
sumber
3

Di Kotlin, Anda dapat menggunakan menggunakan alpha seperti ini,

   //Click on On.//
    view.rel_on.setOnClickListener{
        view.rel_off.alpha= 0.2F
        view.rel_on.alpha= 1F

    }

    //Click on Off.//
    view.rel_off.setOnClickListener {
        view.rel_on.alpha= 0.2F
        view.rel_off.alpha= 1F
    }

Hasilnya seperti dalam tangkapan layar ini.20% Transparan

Semoga ini bisa membantu Anda. Terima kasih

— Rahul Kushwaha
sumber
1

Saya tahu, itu pertanyaan yang sangat lama.

Jika Anda ingin menggunakan nilai warna, Anda juga dapat menggunakan versi singkatnya dengan #ARGB. Di mana Anilai untuk saluran alpha.

Dalam hal warna putih ada nilai transparansi berikut:

#FFFF  -     0%
#EFFF  -   6,7%
#DFFF  -  13,3%
#CFFF  -  20,0%
#BFFF  -  26,7%
#AFFF  -  33,3%
#9FFF  -  40,0%
#FFF8  -  46,7%
#7FFF  -  53,3%
#6FFF  -  60,0%
#5FFF  -  66,7%
#4FFF  -  73,3%
#3FFF  -  80,0%
#2FFF  -  86,7%
#1FFF  -  93,3%
#0FFF  - 100,0%

Jadi Anda dapat TextViewmenambahkan baris berikut untuk transparansi 20%:

<TextView
    android:background="#CFFF"
    ... />
— mendapat dua
sumber
0

Berikut ini solusi terprogram dari jawaban @Aromero untuk menghitung nilai heksadesimal untuk saluran alpha. :)

 public static void main(String[] args) throws Exception {
    final Scanner scanner = new Scanner(System.in);
    int transPerc;
    float fPerc;
    System.out.println("Enter the transparency percentage without % symbol:");
    while((transPerc=scanner.nextInt())>=0 && transPerc <=100){
        fPerc = (float) transPerc / 100;
        transPerc = Math.round(255 * fPerc);
        System.out.println("= " + Integer.toHexString(transPerc));
        System.out.print("another one please : ");
    }
    scanner.close();
}
— theapache64
sumber
3
Pertanyaan telah ditandai untuk Android. Kode ini tidak mendukung Android.
— Pawan
0

Coba kode ini :)

Ini adalah kode hex yang sepenuhnya transparan - "# 00000000"

— Agilanbu
sumber
0

jika Anda ingin membuat warna 50% transparan di kotlin,

val percentage = 50f/100 //50%
ColorUtils.setAlphaComponent(resources.getColor(R.color.whatEverColor), (percentage * 255).toInt())
— Jetwiz
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.