ایجاد تولبار و اضافه کردن لوگو و آیکون به تولبار

ایجاد تولبار و اضافه کردن لوگو و آیکون  به تولبار

 

ما میخواهیم یه تولبار برای برنامه‌مون تعریف کنیم و چند تا آیکون مورد نیازمون رو بهش اضافه کنیم.

اول باید تم برنامه رو به حالت NoActionBar  تغییر بدیم تا تولبار پیش فرض رو نمایش نده.

فایل styles.xml  رو در فولدر res/values باز می‌کنیم و تم رو که DarkActionBar  را به NoActionBar  تغییر میدیم.

<resources>

<!– Base application theme. –>
<style name=”AppTheme” parent=”Theme.AppCompat.Light.NoActionBar”>
<!– Customize your theme here. –>
<item name=”colorPrimary”>@color/colorPrimary</item>
<item name=”colorPrimaryDark”>@color/colorPrimaryDark</item>
<item name=”colorAccent”>@color/colorAccent</item>
</style>

</resources>

در فولدر  layout فایلی یا لایه‌ای بنام toolbar.xml ایجاد می‌کنیم. و تگی بنام toolbar  تعریف میکنیم مانند کد زیر:

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical” android:layout_width=”match_parent”
android:layout_height=”match_parent”>
<android.support.v7.widget.Toolbar
android:layout_width=”match_parent”
android:background=”#ffcc00″
android:layout_height=”?attr/actionBarSize”>
<LinearLayout
android:orientation=”horizontal”
android:layout_width=”match_parent”
android:layout_height=”match_parent”>

</LinearLayout>
</android.support.v7.widget.Toolbar>
</LinearLayout>

 

بعد به اکتیویتی ActivityMain   میریم و toolbar  ایجاد شده را اضافه می‌کنیم.

<include layout=”@layout/toolbar”/>

تا اینجای کار ما یه تولبار اضافه کردیم با رنگ و مشخصاتی که خودمون تعریف کردیم.مانند تصویر زیر:

 

اون قسمت زرد رنگ بالای برنامه تولبار ایجاد شده توسط شماست.

بعد از ایجاد تولبار اختصاصی خودمون باید آیکون‌های مروبط به برنامه‌مون رو اضافه کنیم.

قبل از کد نویسی برید به سایتهای دانلود آیکون مثل flaticon.com و غیره  آیکون‌های مورد نیازتون رو دانلود کنید.

 

من لوگو سایت و این سه تا آیکون که بسیاری کاربردی هستن را با سایز و رنگ دلخواه خودم دانلود کردم و در فولدر drawable کپی کردم.

 

برای اینکه بتونید آیکونهای خودتونو دقیق تنظیم کنید پیشنهاد می‌کنم برای هر آیکون یک LinearLayout جداگانه بسازید و ImageView را داخل اونها قرار بدید.چون حتما تجربه کردید که تنظیم محل تصاویر کمی خسته کننده‌ ست.البته هر چی تجربه‌تون بیشتر بشه کار براتون ساده‌تر بشه.من دفعه اولی که اینمارو داشتم میکردم واقعا گیج شده بودم و به معنای واقعی داستم تو این کدها دست و پا میزدم.

من کد نهایی رو براتون میزارم شما فقط کافیه نام آیکونهای خودتونو جایگزین کنید.ولی پیشنهاد می‌کنم برای یکبار هم که شده خودتون بدون این کدها اینمارو از اول تا آخر انجام بدید.

 

 

<?xml version=”1.0″ encoding=”utf-8″?>
<?xml version=”1.0″ encoding=”utf-8″?>

<android.support.v7.widget.Toolbar android:layout_width=”match_parent”
android:background=”#f0e910″
android:layout_height=”?attr/actionBarSize”
xmlns:android=”http://schemas.android.com/apk/res/android”>

<LinearLayout
android:orientation=”horizontal”
android:gravity=”center”
android:layout_width=”match_parent”
android:layout_height=”match_parent”>

<LinearLayout
android:layout_width=”wrap_content”
android:orientation=”horizontal”
android:layout_weight=”1″
android:layout_height=”wrap_content”>

<LinearLayout
android:id=”@+id/linearFilnalBasket”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”>
<TextView
android:id=”@+id/txtBasketCont”
android:textSize=”16dp”
android:textColor=”#ffffff”
android:text=”1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” />

<ImageView
android:id=”@+id/serch”
android:layout_width=”32dp”
android:src=”@drawable/settings”
android:scaleType=”fitCenter”
android:layout_height=”32dp” />

</LinearLayout>

<ImageView
android:layout_marginRight=”32dp”
android:scaleType=”centerCrop”
android:layout_width=”32dp”
android:layout_gravity=”center_vertical”
android:src=”@drawable/emails”
android:id=”@+id/hambergurMenu”
android:layout_height=”32dp” />

</LinearLayout>

<LinearLayout
android:layout_gravity=”right”
android:padding=”0dp”
android:orientation=”horizontal”
android:gravity=”left”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”>

<ImageView
android:layout_marginRight=”32dp”
android:scaleType=”fitCenter”
android:layout_width=”100dp”
android:id=”@+id/digikala”
android:src=”@drawable/aaaabi”
android:layout_height=”wrap_content” />

<ImageView
android:layout_width=”32dp”
android:src=”@drawable/help”
android:layout_marginRight=”32dp”
android:scaleType=”fitCenter”
android:layout_height=”32dp” />

</LinearLayout>

</LinearLayout>

</android.support.v7.widget.Toolbar>

0 پاسخ

دیدگاه خود را ثبت کنید

آیا می خواهید به بحث بپیوندید؟
در صورت تمایل از راهنمایی رایگان ما استفاده کنید!!

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *