Endre fontstørrelse for hele applikasjonen i Android Studio

Universell utforming er mye på agendan nå og en av de store forutsetningene er at alle mennesker skal kunne se informasjonen. En selvfølgelighet kanskje, men det er ikke alle applikasjoner eller websider som tilbyr en slags funksjon, hvor man for eksempel kan endre tekststørrelse. Jeg satt lenge med å få gjort det i vår applikasjon i Android og tilslutt fant jeg en vei rundt det. Dette ved hjelp av theme.

Vi begynner først med xml. Lag tre buttons, to som endrer tema og en som tar oss til neste aktivitet (en annen side). Lag også en TexView så du kan se endringen i teksten.

<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/text"
    android:id="@+id/text1"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="57dp" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/theme1"
    android:text="Small Font Theme"
    android:layout_below="@+id/text1"
    android:layout_marginTop="20dp"
    />
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/theme2"
    android:text="Medium Font Theme"
    android:layout_alignBottom="@+id/theme1"
    android:layout_toEndOf="@+id/theme1" />
<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/nextActivity"
    android:text="Neste aktivitet"
    android:background="@color/green"
    android:textColor="@color/black"
    android:layout_marginTop="20dp"
    android:layout_below="@+id/theme2"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true" />

</RelativeLayout>

under mappen res/values. Skap en ny fil som du gir navnet theme.xml

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">

<!--Theme 1-->

    <style name="Theme1" parent="Theme.AppCompat.Light">
        <item name="pageBackground">@style/page_background</item>
        <item name="textSubheader">@style/text_subheader</item>
        <item name="textLarge">@style/text_large</item>
        <item name="textRegular">@style/text_regular</item>
        <item name="button">@style/button</item>

<!--Theme 2-->
<style name="Theme2" parent="Theme.AppCompat.Light">
    <item name="pageBackground">@style/page_background</item>
    <item name="textRegular">@style/SmallFont</item>
    <item name="textLarge">@style/LargeFont</item>
    <item name="textSubheader">@style/MediumFont</item>
</style>

Nå er alle @style/.. garantert markert som rødt. Derfor trenger vi i tillegg skape en ny fil i res/values mappa som heter styles.xml. Her lager vi designet for tekst, farger, bakgrunn og knapper.

<resources>
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
</style>

<!--Setter fargen på bakgrunnen-->
<style name="page_background">
<item name = "android:background"> #ffffff </item>
</style>

<!--Angir størrelsen og farge på text_subheader-->
<style name="text_subheader">
<item name="android:textColor"> #000 </item>
<item name = "textSize"> @dimen/ text_subheader_text_size </item>

...............

</resources>

Detsamme gjelder for text_regular, text_large, SmallFont, MediumFont og LargeFont. I item name=»android:textSize»> @dimen / …. referer du til en størrelse.
Style for knappene setter du i

<style name="button" parent="text_large">
    <item name="android:background">@color/green</item>
</style>

Nå går du ytterligere til mappa res/values og lager en fil som du kaller for dimens.xml. Her skal du sette alle fontstørrelser.

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>

<!--Setting the textsizes for theme 1-->
    <dimen name="text_regular_text_size">12sp</dimen>
    <dimen name="text_subheader_text_size">14sp</dimen>
    <dimen name="text_large_text_size">18sp</dimen>
    
<!--Setting the textsizes for theme 2-->    
    <dimen name="small_font">14dp</dimen>
    <dimen name="medium_font">16dp</dimen>
    <dimen name="large_font">20dp</dimen>
</resources>

Nå har vi satt op grunnen for å gå videre til Java kode.

public class MainActivity extends AppCompatActivity implements OnClickListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setCOntentView(R.layout.main_activity);
}

@Override 
public void onClick(View v){

}
} // Slutt på java kode

Da vi har tre knapper må vi implementerer OnClickListener så at det skjer noe når brukeren trykker på de knappene vi laget. Under public void onCreate begynner vi med å definere de knappene ved hjelp av ID som vi satt i xml filen.

findViewById(R.id.theme1).setOnClickListener(this);
findViewById(R.id.theme2).setOnClickListener(this);
findViewById(R.id.nextActivity).setOnClickListener(this);

Under public void onClick (View v) sier vi hva som skal skje når man trykker på respektive knapp. Det har jeg gjort ved å bruke en så kalt switch funksjon.

@Override
public void onClick(View v)
{
    // TODO Auto-generated method stub
    switch (v.getId())
    {
        case R.id.theme1:
           //Change to theme 1
            break;
        case R.id.theme 2:
            // Change to theme 2
            break;
        case R.id.nextActivity:
           // Go to next activity
    }
}

Nå har vi satt en OnClick på alle knappene våre og en funksjon er satt der den henter ut ID på den knappen som er trykket på, men det skjer fortsatt ikke noe da vi ikke har en funksjon enda i case. Funksjonen som vi nå må lage er en funksjon som endrer tema i applikasjonen. Legg til en ny klasse og kall den for eksempel Theme.

public class Theme {
    private static int sTheme;

    public final static int THEME_1 = 0; //Default
    public final static int THEME_2 = 1;
   

    public static void changeToTheme(Activity activity, int theme) {
        sTheme = theme;
        activity.finish();
        activity.startActivity(new Intent(activity, activity.getClass()));
        activity.overridePendingTransition(android.R.anim.fade_in,
                android.R.anim.fade_out);
    }

    public static void onActivityCreateSetTheme(Activity activity) {
        switch (sTheme) {
            default:
            case THEME_1:
                activity.setTheme(R.style.Theme1);
                break;
            case THEME_2:
                activity.setTheme(R.style.Theme2);
                break;
        }
        }
    }
activity.setTheme(R.style.Theme1) & activity.setTheme(R.style.Theme2);

Her refererer vi til navnet på vår style i theme.xml.

Nå kan vi gå tilbake til MainActivity og legge inn funksjoner i onClick og switch metoden.

@Override
public void onClick(View v)
{
    // TODO Auto-generated method stub
    switch (v.getId())
    {
        case R.id.theme1:
            Theme.changeToTheme(this, Theme.THEME_1);
            break;
        case R.id.theme2:
            Theme.changeToTheme(this, Theme.THEME_2);
            break;
        case R.id.nextActivity:
           
    }
}

Funksjonen her blir altså
Navnet på klassen –> Theme + Funksjonen i Theme klassen –> changeToTheme (this, + navnet på klassen og variablene som vi initialisert i Theme klassen, THEME_1 og THEME_2). Under case R.id.nextactivity. Der legger dere til funksjonen;

Intent intent = new Intent(this, SecondActivity.class);
startActivity(intent);
finish();

Det siste som återstår nå er at vid hver klasse, under onCreate metoden, legger til denne linja.

Theme.onActivityCreateSetTheme(this);

Som er den andre funksjonen som er satt i Theme klassen. Det som er viktig å huske på er at denne linja defineres FØR setContentView(R.layout.main_activity).

Ikke glem theme og activity i AndroidManifest.xml. Ellers kommer ikke noe til å fungere.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="your_package_name" >

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/Theme1" > Her satt jeg Theme1 som default
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".SecondActivity"
            android:parentActivityName=".MainActivity"
            android:label="@string/app_name" >
        </activity>

Da tror jeg det var alt 🙂 Happy Coding som vi sier 😀