CODEWITHSUNDEEP
androidbuttonscrollview
Ronandroid
Ronandroid

Reputation: 53

Android design : a scrollview 3 button below

I'm trying to create a design (and i'm pretty bad at this -__- ) where I will have a scrollview and a set of 3 buttons, horizontally aligned ALWAYS at the bottom of the screen (I mean the scrollview should be ABOVE my layout with my button and may scroll, but the button have to ALWAYS be displayed/visible)

I have already tried several solution, the last one I used is this , but it doesn't succeeded :(

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
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"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<RelativeLayout
    android:id="@+id/header"
    android:layout_alignParentTop="true"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
</RelativeLayout>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/scroll"
    android:layout_above="@+id/footer"
    android:layout_below="@+id/header">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/imageView1"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Chargement en cours"
            android:id="@+id/TNom"
            android:layout_below="@+id/imageView1"
            android:layout_centerHorizontal="true" />
    </RelativeLayout>
</ScrollView>
<RelativeLayout
    android:id="@+id/footer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    android:layout_alignParentBottom="true">

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="+"
    android:id="@+id/Bplus"
    android:onClick="onClickSuivant"
    android:layout_toLeftOf="@+id/Begale"
    android:layout_toStartOf="@+id/Begale" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="="
    android:id="@+id/Begale"
    android:onClick="onClickSuivant"
    android:layout_centerHorizontal="true" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="-"
    android:id="@+id/Bmoins"
    android:onClick="onClickSuivant"
    android:layout_toRightOf="@+id/Begale"
    android:layout_toEndOf="@+id/Begale" />
</RelativeLayout>

NB : I have no need of the "header" part ... but the last code I found have it and it seems to be exactly I need.... seemed only -__- :(

And I have 2 questions on this design (while i'm asking, I ask everything :p )

1/ How may I force the size of the Image I will be downloading into ImageView1 to a "maximum" height (I mean my picture will be portrait OR landscape... let say 10*15 and 15*10 ... how may i forced them to be 10*6.666 instead of 15*10 <= It's an example... I don't know the image size I will have, but I know I want them at the same height every time, width may change according to the ratio)

2/why Lint is writing this part in red....

android:textAppearance="?android:attr/textAppearanceLarge"

Thx in advance to everyone who stops here and give me hints :) (and sorry for my english)

EDIT : I have found some answer !! I used RELATIVELayout instead of LINEARLayout, which is recommended to do what I wanted ...

Si here is the "new" template (for reference if anyone is interested), where I still have problem

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:orientation="vertical">
<ScrollView
    android:layout_width="match_parent"
    android:id="@+id/scroll"
    android:layout_height="0dp"
    android:layout_weight="1">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/imageView1"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Chargement en cours"
            android:id="@+id/TNom"
            android:layout_below="@+id/imageView1"
            android:layout_centerHorizontal="true" />
    </LinearLayout>
</ScrollView>

<LinearLayout
    android:id="@+id/footer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="+"
        android:id="@+id/Bplus"
        android:onClick="onClickSuivant"
        android:layout_toLeftOf="@+id/Begale"
        android:layout_toStartOf="@+id/Begale" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="="
        android:id="@+id/Begale"
        android:onClick="onClickSuivant"
        android:layout_centerHorizontal="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="-"
        android:id="@+id/Bmoins"
        android:onClick="onClickSuivant"
        android:layout_toRightOf="@+id/Begale"
        android:layout_toEndOf="@+id/Begale" />
</LinearLayout>

With the previous design, button were well aligned and take all the screen (match_parent) ... with this one, they are located at the bottom left ... As android:layout_centerHorizontal="true" is made for RelativeLayout, problem come from this... how may i change it ?

Upvotes: 0

Views: 67

Answers (1)

Taisa
Taisa

Reputation: 26

Try using android:gravity="center" in your LinearLayout (which encapsulates the buttons) or android:layout_gravity="center" in Button elements. I believe the first option will be enough.

EDIT: regarding Lint warning message, I believe it's related to this line: android:text="Chargement en cours"

It's discouraged to use hard-coded strings. Try replacing it by android:text="@string/my_string_id" and define such string in your strings.xml file.

Upvotes: 1

Related Questions