Leniwce.com | blog technologiczny
Android - dostosowanie paska tytułowego
Bartosz Lewandowski, 2011-07-12 18:30:02
kategoria: Android, Java

Po raz pierwszy na naszym blogu pojawił się wpis o Androidzie. Na początek krótka rozprawka o pasku tytułowym aplikacji. Niekiedy programy napisane na Androida zamieniają standardowy pasek tytułowy na swój własny. Przykładem tu może być Facebook, gdzie standardowy pasek został zastąpiony przez logo Facebooka.

Zabieg ten nie jest trudny, zmiana domyślnego paska tytułowego wymaga kilku prostych kroków.

Na początku nasza aplikacja posiada standardowy pasek tytułowy:

Po modyfikacji, aplikacja prezentuje się następująco (efekt końcowy zależny jest od talenu plastycznego wykonującego :) ):

 

Krok 1

Pierwszym krokiem jest przygotowanie grafiki. Do katalogu res\drawable-hdpi wstawiamy nasz obraz, który wykorzystamy na naszym pasku. Przygotowany będzie jako przeźroczysty plik png (tu bg.png):

Krok 2

Kolenym etapem jest utworzenie w res\layout\ pliku XML opisujący wygląd naszego tytułu (nazwę go title.xml):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/screen"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:background="#d9f9c1"  
  android:layout_marginBottom="2dp"  
  >
    <ImageView android:id="@+id/imageView1" 
    android:layout_height="wrap_content"     
    android:layout_width="wrap_content"    
    android:layout_alignParentLeft="true"
    android:src="@drawable/bg" 
    android:layout_weight="1"  
    android:scaleType="fitStart"
    ></ImageView>        
</RelativeLayout>
 

Zamieściłem na widoku obiekt ImageView w którym umieszam grafikę z tytułem. Ustawiłem scaleType na fitStart, dzięki czemu grafika będzie po lewej stronie u góry. Kolor tła określiłem już na definicji layoutu - android:background.

Krok 3

Również w folderze values tworzę plik XML, nazwę go MyTitle.xml, gdzie wprowadzam:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CustomWindowTitleBackground">
 <item name="android:background">#d9f9c1</item>        
</style>
 
<style name="MyTitle" parent="android:Theme">
  <item name="android:windowTitleSize">30dip</item>
  <item name="android:windowTitleBackgroundStyle">@style/CustomWindowTitleBackground</item>
</style>
</resources>

Krok 4

Następnie w kodzie aplikacji (metoda onCreate) umieszczamy:

//przed setContentView!
requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
setContentView(R.layout.main);
//po setContentView!
getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE, R.layout.title);

Krok 5

I ostatnia, drobna zmiana w pliku AndroidManifest. Dodajemy do aplikacji nasz nowy tytuł (android:theme):

<application android:icon="@drawable/icon" android:label="@string/app_name" 
android:theme="@style/MyTitle">

Patrząc na Eclispe, projekt wygląda tak:

Do pobrania źródła w formie projektu Eclispe (64kB).

 

Powiązane artykuły
Nie taki dialog straszny, czyli kilka słów o okienkach dialogowych (2011-07-30)
Wyznacznik macierzy (2010-12-11)


Komentarze
Brak komentarzy.

Dodaj komentarz:
Autor:*

WWW:

Treść:*

Wprowadź kod zabezpieczający*:


        * - pola wymagane
Kategorie
C# (13)
Inne (6)
Java (3)
Matlab (1)
OpenGL (1)
PHP (2)


Najnowsze wpisy

Ostatnie komentarze