Apps für Android programmieren leicht gemacht!
TextView scrollbar machen

TextView scrollbar machen

TextViews sind ein großes und vor allem wichtiges Element in der Programmierung einer App, aber was machen wir, wenn der Text größer als der sichtbare Bereich des Smartphones ist?
Wir wollen in diesem Artikel ein TextView scrollbar machen, damit der Nutzer dann den Text nach oben/unten oder links/rechts scrollen kann.

 

Ausgangslage:

Unsere Ausgangslage sieht in etwa so aus:

<?xml version="1.0" encoding="utf-8"?>
<!--
  ~ Copyright 2016 www.droid-lernen.de
  ~
  ~ Licensed under the Apache License, Version 2.0 (the „License“);
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~ http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an „AS IS“ BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textfeld"
        android:text="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.   Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur" />

</RelativeLayout>

Wir haben hier ein Layout mit einem RelativeLayout.
In diesem ist ein TextView namens „textfeld“ zu finden, welches einen 500 Wörter langen Lorem Ipsum Fülltext enthält.
Dieses TextView wird auf einem Smartphone auf jeden Fall die Displaygröße überschreiten und ist bisher nicht scrollbar.

 

TextView horizontal scrollbar machen:

Um ein TextView scrollbar zu machen müssen wir es lediglich in den Tag „<HorizontalScrollView>“ einbinden. So können wir es horizontal, also nach links/recht scrollbar machen. Der Text wird ohne manuelle Zeilenumbrüche auf einer Zeile angezeigt. Wichtig ist hierbei, dass das ScrollView in der Breite „match_parent“ oder „fill_parent“ bekommt und in der Höhe „wrap_content“. Das TextView sollte die selben Breiten- und Höhenangaben bekommen.

<?xml version="1.0" encoding="utf-8"?>
<!--
  ~ Copyright 2016 www.droid-lernen.de
  ~
  ~ Licensed under the Apache License, Version 2.0 (the „License“);
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~ http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an „AS IS“ BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

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

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/horizontalScrollView" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textfeld"
            android:text="Lorem ipsum [...]" />

    </HorizontalScrollView>

</RelativeLayout>

 

TextView vertikal scrollbar machen:

Um ein TextView scrollbar zu machen müssen wir es lediglich in den Tag „<ScrollView>“ einbinden. So können wir es vertikal, also nach oben/unten scrollbar machen. Der Text wird auch ohne manuelle Zeilenumbrüche am rechten Bildschirmrand gebrochen.

<?xml version="1.0" encoding="utf-8"?>
<!--
  ~ Copyright 2016 www.droid-lernen.de
  ~
  ~ Licensed under the Apache License, Version 2.0 (the „License“);
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~ http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an „AS IS“ BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

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

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/horizontalScrollView" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textfeld"
            android:text="Lorem ipsum [...]" />

    </ScrollView>

</RelativeLayout>

 

Java Programmierung:

Schlussendlich haben wir nun ein TextView welches sich scrollen lässt. Ob nun horizontal oder vertikal hängt natürlich von der App selber und dem Verwendungszweck ab.
Wollen wir nun dem TextView einen neuen Text zuweise, dann machen wir dies genau so, als wäre das TextView nicht in einem ScrollView.

TextView textfeld = (TextView) findViewById(R.id.textfeld);

textfeld.setText(" Anderer Text ");

 

Marvin

Ich bin 23 Jahre jung und studiere zurzeit Wirtschaftsinformatik an der Georg-August-Universität in Göttingen. Ich bin ein Mensch, der sich neben der Programmierung noch für tausend andere Dinge interessiert, die mal mehr und mal weniger verrückt sind. Vor allem aber bin ich Feuer und Flamme mit der Programmierung von eigenen kleinen Apps und Programmen, die mein Leben bereichern.

2 Kommentare

*Pflichtfeld

    • Hallo Pankraz01,

      du kannst ein Relative- oder Linearlayout in das ScrollView packen und anschließend die verschiedensten und vor allem auch mehrere TextViews in diese Relative- oder Linearlayouts setzen.

      Gruß,
      Marvin