Android Layout Bild mit Text

[RungetSvohu]

Hallo,

eigentlich klingt das, was ich gerne hätte, ganz einfach. Dennoch bekomme ich es nicht hin. Ich möchte das RelativeLayout einer Activity in XML schreiben. Die Activity soll wie folgt aufgebaut sein: Oben wird eine Grafik angezeigt. Diese soll so skaliert werden, dass sie die ganze Screenbreite füllt. Darunter ein langer Text. Da der Text eventuell zu lang ist, um komplett angezeigt werden zu können, sollte alles zusammen scrollbar sein (nicht nur der Text für sich, sondern auch die Grafik soll oben verschwinden, wenn man sich den Text nach oben schiebt). Könnt ihr mir helfen?

Vielen Dank!

 

[dzim]

ScrollView
-> LinearLayout (layout_width + _height = matchParent)
-> ImageView (layout_width = matchParent, layout_height = wrapContent) + TextView (layout_width = matchParent, layout_height = wrapContent)


Das sollte es tun...

 

[RungetSvohu]

Ich habe es jetzt erstmal ohne ScrollView probiert, aber es entsteht genau das Problem, welches ich schon vorher hatte, als ich für mich alleine probierte. Hier aber erstmal der Code:

<?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" >
       
     <ImageView
        android:id="@+id/img"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/img1" />

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="@string/help_app_text" />
    
     
</LinearLayout>

Das Problem ist folgendes: Das Bild wird vertikal auf dem Screen zentriert. Dadurch entsteht über und unter dem Bild viel Freiraum, aber kein Text ist zu sehen.

 

[dzim]

Moin moin.

Hier mal mein (funktionierendes) Beispiel...

Text:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.

XML:

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >
        
        <ImageView
            android:id="@+id/img" 
            android:padding="5dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/example" />
        
        <TextView
            android:id="@+id/text" 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:text="@string/lorem_ipsum" />
        
    </LinearLayout>
    
</ScrollView>

Ergebnis:
Würde dir gerne das Bild zeigen, weiß aber gerade nicht, wie ich das hier anhängen kann...

#edit: da ist er, der Anhang

 

[RungetSvohu]

Vielen Dank erstmal für deine Hilfe. Dieses Beispiel läuft bei mir. Wenn ich genügend weit nach unten scrolle, komme ich auch irgendwann zum Text. Jedoch habe ich sowohl über der Grafik als auch unter der Grafik viel freien Leerraum. Ich weiß nun aber auch, womit das zusammen hängt. Vielleicht hilft uns diese Erkenntnis bei der Lösung des Problems:
Die Grafik, die ich verwende, hat eine recht hohe Auflösung. Sie muss von der App verkleinert werden, damit sie komplett auf das Display passt. Die ImageView jedoch nimmt nicht die Höhe der verkleinerten Grafik an, sondern die der ursprünglichen. Daher entsteht über und unter der Grafik so viel Leerraum (die ImageView versucht die Grafik ja innerhalb der ImageView auch vertikal zu zentrieren). Wenn ich eine Grafik nehme, die nicht verkleinert werden muss, kommt der Text direkt unter der Grafik.
Ist es mit dieser Erkenntnis nun leicht, das Problem zu lösen? Ich will nämlich aus Qualitätsgründen mit der größeren Auflösung arbeiten. Außerdem müsste ich ja sonst für jede Handyauflösung eine eigene Grafik bereitstellen.

 

[dzim]

Zusätzlich hat es ja noch das Padding um den ImageView herum - aber nur 5dp... Wie genau scalst du das Bild? Wie setzt du es in den ImageView? Im xml immer das src- und nicht das background-Attribut verwenden!

Im Code sollte eigentlich so etwas wie

iconDown.getLayoutParams().height = size;
iconDown.getLayoutParams().width = size;
iconDown.setImageResource(R.drawable.your_drawable);
// oder iconDown.setImageDrawable(drawable); // für ein Drawable-Object

funktionieren. Ich habe auf diese Art ein 32px-Icon auf eine fixe Größe 16 oder 32 Pixel angepasst (abhängig von der GUI - Phone/Tablet/...).

Mit

public static int getDipsFromPixel(Context context, float pixels) {
	// Get the screen's density scale
	final float scale = context.getResources().getDisplayMetrics().density;
	// Convert the dps to pixels, based on density scale
	return (int) (pixels * scale + 0.5f);
}

kannst du dir das ganze auch in das dp-Format umrechnen - jedenfalls hab ich das mal so verstanden...

 

[RungetSvohu]

Ich benutze derzeit genau dein Layout und im Code steht dann nur:

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

Das Bild ist in Wirklichkeit breiter als das Handy. Er skaliert das Bild dann automatisch so weit runter, dass die neue Breite des Bildes + Padding der Breite des Handys entspricht. Die Höhe des Bildes passt er auch entsprechend an, nur eben nicht die Höhe der ImageView. Ich denke, wenn du das ganze (jetzt so du dir schon die Mühe gemacht hast und ein Testprojekt für mich anlegtest) selbst mal mit einem entsprechend großen Bild probierst, wirst du genau das gleiche Verhalten bemerken können.

 

[dzim]

Schick mir einfach dein Bild.

Und: Ich habe das Layout nur kurz meine bestehende App integriert... kein Code. Und wenn würde ich ihn eh nur kurz ausprobieren, hier posten und wieder löschen - so wie ich es schon mit dem Layout gemacht hab! Ich löse ja nicht dein Problem, sondern versuche dir nur Tipps zu geben, wie du es selbst lösen kannst - ich werde also keine Test-App schreiben, ausprobieren und dir das fix und fertige Ergebnis liefern... ;-)

 

[RungetSvohu]

Das klappt mit jedem Bild, das breiter als das Handy ist. Aber wenn du gerne ein spezielles hättest, nimm das hier: http://upload.wikimedia.org/wikiped...jpg/1280px-Common_Redshank_Tringa_totanus.jpg

Nimm genau deinen xml-Code und du wirst sowas wie im Anhang bekommen.

 

[dzim]

Ich hab Eclipse jetzt schon aus, aber sieht das auch so aus, wenn du es auf einem Telefon ausprobierst?

 

[RungetSvohu]

Ja, auf meinem Handy sieht es genau so aus.

 

[dzim]

So mein Freund. Ich will ja jetzt nicht "pesky" sein, aber 2 min ausprobieren im visuellen Editor haben mir folgendes gezeigt: Per Default wird anscheinend der Scale Type "fitCenter" ('android:scaleType="fitCenter"') oder "centerInside" verwendet. Das ist nicht schlimm und cropen oder stretchen willst du das nicht. Unter Verwendung von 'android:adjustViewBounds="true"' erhalte ich im Editor genau das Ergebnis, was du brauchst.
Nur mal so als Randkritik: Kennst du das Trial-and-Error-Prinzip? Man kann vieles per Suchmaschine versuchen zu lösen (was zugegebenermaßen nicht immer funktioniert), aber man kann auch einfach mal "ausprobieren".

Das hier ist zu dem Thema meine letzte Hilfestellung und ich hoffe, dass du nach der Starthilfe, die ich dir gegeben hatte, das nächste mal auch selbst in der Lage bist einfach mal zu probieren, bis es klappt - kann so schwer nicht sein - ich korrigiere: ist so schwer nicht!

 

[RungetSvohu]

Ich danke dir vielmals für deine Hilfe und Mühe. "android:scaleType" war tatsächlich das Zauberwort. Der Grund, warum ich das druch Probieren nicht selbst hinbekommen habe, war folgender: Erst im Laufe des Threads ist mir klar geworden, dass die ImageView einfach zu groß angezeigt wird und dadurch der Text soweit unten steht. Ich selbst hatte vorab die Sache nämlich noch ohne ScrollView implementiert. Und da war dann einfach gar kein Text zu sehen. Ich dachte also, aus irgendwelchen komischen Gründen kann man hinter einer ImageView keinen Text mehr sehen. Das fand ich äußerst merkwürdig und fing dann an, hier zu fragen. Wie dem auch sei, nun freue ich mich, dass das Problem gelöst ist. Vielen Dank!

 

[dzim]

Büddeschön