تغيير اللون

الخصائص التي استخدمتها بتدوينة اليوم هي : لون النص \ لون الخلفية \ لون العنوان على الاكشن بار . ولك حرية إضافة العناصر الاخرى من احجام وقياسات إلخ.

في البداية نقوم بفتح اللياوت xml رئيسية التطبيق أو صفحة الاعدادات او الصفحة التي تريد وضع بداخلها الازرار التي تقوم بعملية تغيير الثيم, وليس شرط أن يكون زر .. تستطيع عن طريق الضغط على صورة او نص او زر او حتى قائمة إلخ, وتقوم بإضافة الزر .

الكود الذي استخدمته activity_main.xml :







1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108



<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">

 

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:orientation="vertical">

        <LinearLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:orientation="vertical">

 

            <LinearLayout

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:background="#000"

                android:gravity="center"

                android:orientation="horizontal">

 

                <LinearLayout

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:layout_margin="5dp"

                    android:layout_weight="1"

                    android:background="null"

                    android:gravity="center"

                    android:orientation="horizontal"

                    android:padding="5dp">

 

                    <Button

                        android:id="@+id/coloor1"

                        android:layout_width="30dp"

                        android:layout_height="30dp"

                        android:layout_marginLeft="5dp"

                        android:layout_marginRight="5dp"

                        android:background="@color/backGColor1"

                        android:onClick="onClick" />

 

                    <Button

                        android:id="@+id/coloor2"

                        android:layout_width="30dp"

                        android:layout_height="30dp"

                        android:layout_marginLeft="5dp"

                        android:layout_marginRight="5dp"

                        android:background="@color/backGColor2"

                        android:onClick="onClick" />

 

                    <Button

                        android:id="@+id/coloor3"

                        android:layout_width="30dp"

                        android:layout_height="30dp"

                        android:layout_marginLeft="5dp"

                        android:layout_marginRight="5dp"

                        android:background="@color/backGColor3"

                        android:onClick="onClick" />

 

                    <Button

                        android:id="@+id/coloor4"

                        android:layout_width="30dp"

                        android:layout_height="30dp"

                        android:layout_marginLeft="5dp"

                        android:layout_marginRight="5dp"

                        android:background="@color/backGColor4"

                        android:onClick="onClick" />

 

                </LinearLayout>

 

                <TextView

                    android:id="@+id/textt1"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:layout_gravity="right|center"

                    android:layout_marginRight="15dp"

                    android:layout_weight="1"

                    android:background="null"

                    android:text="تغيير اللون :"

                    android:textColor="#fff"

                    android:textSize="17sp" />

 

            </LinearLayout>

        </LinearLayout>

        <LinearLayout

            android:layout_weight="1"

            android:gravity="center"

            android:orientation="vertical"

            android:layout_width="match_parent"

            android:layout_height="wrap_content">

            <TextView

                android:text="Abboudi Aliwi"

                android:textStyle="bold"

                android:padding="10dp"

                android:textSize="20sp"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content" />

 

            <TextView

                android:text="www.AndRody.com"

                android:textStyle="bold"

                android:textSize="16sp"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content" />

        </LinearLayout>

 

    </LinearLayout>

</LinearLayout>





ثم نذهب الى ملف الجافا المرتبط به ونضيف بداخل دالة الاون كريت السطر التالي قبل استدعاء اللياوت :







1



themeUtils.onActivityCreateSetTheme(this);





هذا الكلاس والدالة بداخله لم نقم بإنشائها بعد , ليتم استدعاء الثيم واستخدامه .. إي في حالة قمت باغلاق التطبيق والرجوع اليه تجد لديك اخر ثيم تم استخدامه.



والآن في نفس ملف الجافا , ولكن خارج دالة الاون كريت وداخل الكلاس نضع التالي :







1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18



public void onClick(View v) {

        // TODO Auto-generated method stub

        int id = v.getId();

        if (id == R.id.coloor1) {

            themeUtils.changeToTheme(MainActivity.this, themeUtils.F11);

 

        } else if (id == R.id.coloor2) {

            themeUtils.changeToTheme(MainActivity.this, themeUtils.F22);

 

 

        } else if (id == R.id.coloor3) {

            themeUtils.changeToTheme(MainActivity.this, themeUtils.F33);

 

        } else if (id == R.id.coloor4) {

            themeUtils.changeToTheme(MainActivity.this, themeUtils.F44);

 

        }

    }






وهي الدالة التي تعمل بعد الضغط على الازرار .. في حال تم الضغط على زر 1 مثلاً يتم الانتقال الى الكلاس الجديد واستخدام الانتجر المحدد, وهناك بذاك الكلاس عند استخدام انتجر ما يتم مثلاً تطبيق الثيم الذي اسمه كذا وكذا وهكذا.

والآن نقوم بإنشاء الكلاس الجديد الذي يتم استخدامه ونضع اسمه : themeUtils
ونضع بداخله الكود التالي :







1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61



public class themeUtils {

    private static int cTheme;

 

 

    public final static int F11 = 1;

 

    public final static int F22 = 2;

 

    public final static int F33 = 3;

 

    public final static int F44 = 4;

 

 

    public static void changeToTheme(Activity activity, int theme) {

 

        cTheme = theme;

 

        activity.finish();

 

 

        activity.startActivity(new Intent(activity, activity.getClass()));

 

 

    }

 

    public static void onActivityCreateSetTheme(Activity activity) {

 

        switch (cTheme)

 

        {

 

            default:

 

            case F11:

 

                activity.setTheme(R.style.AppTheme1);

 

                break;

 

            case F22:

 

                activity.setTheme(R.style.AppTheme2);

 

                break;

            case F33:

 

                activity.setTheme(R.style.AppTheme3);

 

                break;

 

            case F44:

 

                activity.setTheme(R.style.AppTheme4);

 

                break;

 

        }

 

    }

 

}






وهو فقط يتم تفعيل او استخدام انتجر بعد الدخول إليه وتغيير هذا الثيم حسب الرقم اغلاق الاكتفتي واعادة فتحها بالثيم الجديد.

و الآن نذهب لوضع هذه الثيمات, بداخل ملف styles.xml







1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63



<resources>

 

    <!-- // theme 1 -->

    <style name="AppTheme1" parent="Theme.AppCompat.Light.DarkActionBar">

        <item name="android:background">@color/backGColor1</item>

        <item name="android:textColor">@color/textColor1</item>

        <item name="actionBarStyle">@style/MyActionBar1</item>

    </style>

 

    <style name="MyActionBar1" parent="@style/Widget.AppCompat.ActionBar.Solid">

        <item name="titleTextStyle">@style/MyTitleTextStyle1</item>

    </style>

 

    <style name="MyTitleTextStyle1" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">

        <item name="android:textColor">@color/textColorActionBar1</item>

    </style>

 

    <!-- // theme 2 -->

    <style name="AppTheme2">

        <item name="android:background">@color/backGColor2</item>

        <item name="android:textColor">@color/textColor2</item>

        <item name="actionBarStyle">@style/MyActionBar2</item>

    </style>

 

    <style name="MyActionBar2" parent="@style/Widget.AppCompat.ActionBar.Solid">

        <item name="titleTextStyle">@style/MyTitleTextStyle2</item>

    </style>

 

    <style name="MyTitleTextStyle2" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">

        <item name="android:textColor">@color/textColorActionBar2</item>

    </style>

 

    <!-- // theme 3 -->

    <style name="AppTheme3">

        <item name="android:background">@color/backGColor3</item>

        <item name="android:textColor">@color/textColor3</item>

        <item name="actionBarStyle">@style/MyActionBar3</item>

    </style>

 

    <style name="MyActionBar3" parent="@style/Widget.AppCompat.ActionBar.Solid">

        <item name="titleTextStyle">@style/MyTitleTextStyle3</item>

    </style>

 

    <style name="MyTitleTextStyle3" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">

        <item name="android:textColor">@color/textColorActionBar3</item>

    </style>

 

    <!-- // theme 4 -->

    <style name="AppTheme4">

        <item name="android:background">@color/backGColor4</item>

        <item name="android:textColor">@color/textColor4</item>

        <item name="actionBarStyle">@style/MyActionBar4</item>

    </style>

 

    <style name="MyActionBar4" parent="@style/Widget.AppCompat.ActionBar.Solid">

        <item name="titleTextStyle">@style/MyTitleTextStyle4</item>

    </style>

 

    <style name="MyTitleTextStyle4" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">

        <item name="android:textColor">@color/textColorActionBar4</item>

    </style>

 

</resources>






ونذهب الان الى ملف color.xml إن لكن موجوداً قم بإنشائه, ونضع داخله الالوان المستخدمة وهي :































1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17



<resources>

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

    <color name="backGColor1">#075e54</color>

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

 

    <color name="textColor2">#ff450029</color>

    <color name="backGColor2">#ffb9aca8</color>

    <color name="textColorActionBar2">#ff450029</color>

 

    <color name="textColor3">#ff01003c</color>

    <color name="backGColor3">#ff845bff</color>

    <color name="textColorActionBar3">#ff01003c</color>

 

    <color name="textColor4">#f3f2ff</color>

    <color name="backGColor4">#86030a</color>

    <color name="textColorActionBar4">#f3f2ff</color>

</resources>






ومن هنا قم بتغيير الالوان فقط إذا كنت مبدئ, ومن لديه الخبرة ولو قليلاً يستطيع إضافة المزيد من الالوان والخصائص والثيمات كما الموجود.

بالتوفيق لكم جميعاً .. وانتظرونا في المزيد من الدروس, لا تنسوا مشاركة الدرس للاخرين .. وتعليقاتكم تهمنا لتطوير موقعنا وموقعكم اندرودي عربي.