Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android bottom button bar & scroll view with dialog theme

I am trying to display an Android activity with:

  • a dialog theme;
  • a title fixed at the top of the dialog;
  • a button bar fixed at the bottom of the dialog;
  • a scroll view in the middle.

The layout I have written fulfills these criteria, except that the dialog always fills the full screen (see vertical screenshot at the bottom).

This is my layout:

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

    <TextView android:id="@+id/header"
    android:layout_width="fill_parent" android:layout_height="wrap_content"
    android:layout_marginLeft="10dp" android:layout_marginRight="10dp"
    android:layout_marginTop="10dp" android:layout_marginBottom="10dp"
    android:gravity="center_vertical"
        android:textSize="18dip" android:textColor="#ffffff"
        android:text="Sample Layout" />

    <LinearLayout android:id="@+id/controls" android:orientation="horizontal"
    android:layout_width="fill_parent" android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    style="@android:style/ButtonBar">
        <Button android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_weight="1" android:text="Yes" />
        <Button android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_weight="1" android:text="No" />
    </LinearLayout>

    <ScrollView android:id="@+id/test" android:layout_below="@id/header"
    android:layout_above="@id/controls"
    android:layout_width="fill_parent" android:layout_height="wrap_content"
    android:layout_marginBottom="5dp" android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp">
        <TextView android:layout_width="fill_parent" android:layout_height="wrap_content"
        android:text="Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. Integer dui odio, convallis vitae suscipit eu,
        tincidunt non mi. Vestibulum faucibus pretium purus vel adipiscing.
        Morbi mattis molestie risus vitae vehicula. [...]" />
    </ScrollView>

</RelativeLayout>

In addition, the activity is styled with @android:style/Theme.Dialog and android:windowNoTitle.

I'm not sure I understand why this layout expands to fill the whole screen. None of the views have a layout height set to fill_parent; the parent layout isn't set to fill_parent either.

Does anyone know if what I want to do is possible, and if yes how to do it?

My current layout in horizontal mode

Layout in horizontal mode.

My current layout in vertical mode

Layout in vertical mode.

like image 676
Alpha Hydrae Avatar asked Mar 11 '11 14:03

Alpha Hydrae


People also ask

What is the bottom bar on Android called?

The Navigation bar is the menu that appears on the bottom of your screen - it's the foundation of navigating your device.

What is the bottom bar on apps called?

As the name depicts, the navigation bar is designed and placed at the extreme bottom of the app. As per standard, it usually covers the entire horizontal space, running from left to right, at the bottom of an app screen.


1 Answers

I have an Activity that is very similar to yours. I did it some time ago so I don't really remember why I did this and that, but I think I achieve what you're trying to do. Here is my code:

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/info_root"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_gravity="bottom"
android:background="@color/color2">

<LinearLayout 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@color/color1">

    <TextView
        android:id="@+id/infos_titre"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="12dip"
        android:textSize="20dip"
        android:textColor="@color/color2"
        android:gravity="center"
        android:background="@color/color1">
    </TextView>

</LinearLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1">

    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:id="@+id/infos_LL"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:gravity="center_vertical">

            <TextView
                android:id="@+id/infos_text"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:textSize="16dip"
                android:padding="4dip"
                android:textColor="@color/color1"
                android:lineSpacingMultiplier="1.1"
                android:autoLink="web">
            </TextView>
        </LinearLayout>
    </ScrollView>
</LinearLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@color/color1"
    android:paddingTop="6dip">

    <Button
        android:id="@+id/infos_remarquebutton"
        android:text="Faire une remarque"
        android:drawableLeft="@drawable/happy"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:textColor="@color/buttontext_color">
    </Button>
    <Button
        android:id="@+id/infos_partagerbutton"
        android:text="Partager"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/ic_menu_share"
        android:layout_weight="1"
        android:textColor="@color/buttontext_color">
    </Button>
</LinearLayout>

Don't be disturbed by the Frenglish namings...

So, I think the main trick was to put the ScrollView inside a LinearLayout. I also gave a weight of 1 to that LinearLayout (I don't remember why...). Also, the top Layout is a LinearLayout, and not a Relative Layout as in your code, but I don't think it would change anything, although I'm not familiar with RelativeLayouts.

Hope it helps!

like image 85
Arthur Avatar answered Sep 28 '22 07:09

Arthur