Geek Answers Handbook

Android: how to make a GroupBox widget?

Android doesn't seem to offer such a useful widget. However, my screen requires the following:

Design example

In addition, interaction design requires that such fields be displayed and hidden depending on other data.

Of course, I could build such a box from separate elements in my XML layout (for example, from a form and text above it), but then controlling their visibility turns to hell ...

So, it is clear that a container is needed here, as a relative layout. Such a container can have children in an XML layout and can be displayed and hidden with a simple call to setVisibility (...).

Can someone give me advice on how to do this, please?

+4
source share
2 answers

I don’t think there is one, but I hacked everything I needed manually ... not the same as I know, but I thought that I would share "@ drawable / divider" - this is a square gray image with a size of 2 pixels. Creates the illusion of boxes around controls.

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ScrollView android:id="@+id/ScrollView01" android:layout_height="fill_parent" android:layout_width="fill_parent"> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/linLayout02"> <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" > <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/divider" android:layout_width="fill_parent" android:layout_height="wrap_content" android:scaleType="fitXY"/> </TableRow> <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/tableRow1" android:visibility="gone"> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/image_folder" android:minWidth="100px" android:visibility="gone"></TextView> <EditText android:text="..." android:layout_height="wrap_content" android:layout_weight="1" android:layout_width="fill_parent" android:id="@+id/txtImageFolder" android:enabled="false" android:visibility="gone"></EditText> </TableRow> <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/tableRow2"> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="left"> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" android:scaleType="fitXY"/> <CheckBox android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/cbDisplayText" android:text="@string/text_below_images"></CheckBox> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="right"> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" android:scaleType="fitXY"/> </LinearLayout> </LinearLayout> </TableRow> <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/tableRow3" > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="left"> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" android:scaleType="fitXY"/> <TextView android:id="@+id/tvLocale" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/locale" android:minWidth="100px"></TextView> <Spinner android:id="@+id/cboLocales" android:layout_width="wrap_content" android:layout_height="wrap_content" android:minWidth="100px"></Spinner> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="right"> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" android:scaleType="fitXY"/> </LinearLayout> </LinearLayout> </TableRow> <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/tableRow3_1" > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="left"> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" android:scaleType="fitXY"/> <TextView android:id="@+id/tvPitch" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/pitch" android:minWidth="100px"></TextView> <SeekBar android:minWidth="100px" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/barPitch" android:max="200" ></SeekBar> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="right"> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" android:scaleType="fitXY"/> </LinearLayout> </LinearLayout> </TableRow> <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/tableRow3_2" > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="left"> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" android:scaleType="fitXY"/> <TextView android:id="@+id/tvLocale" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/speed" android:minWidth="100px"></TextView> <SeekBar android:minWidth="100px" android:layout_width="wrap_content" android:id="@+id/barSpeed" android:layout_height="wrap_content" android:max="200"></SeekBar> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="right"> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" android:scaleType="fitXY"/> </LinearLayout> </LinearLayout> </TableRow> <TableRow android:layout_width="fill_parent" android:id="@+id/tableRow4" android:layout_height="wrap_content" > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="left"> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" android:scaleType="fitXY"/> <Button android:minWidth="100px" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/btnSave" android:text="@string/save"></Button> <Button android:minWidth="100px" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/btnCancel" android:text="@string/cancel"></Button> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="right"> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" android:scaleType="fitXY"/> </LinearLayout> </LinearLayout> </TableRow> <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" > <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/divider" android:layout_width="fill_parent" android:layout_height="wrap_content" android:scaleType="fitXY" android:paddingLeft="5dp" android:paddingRight="5dp" android:paddingBottom="2dp" android:paddingTop="2dp" /> </TableRow> <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="2px"> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/divider" android:layout_width="fill_parent" android:layout_height="wrap_content" android:scaleType="fitXY" android:paddingLeft="5dp" android:paddingRight="5dp" android:paddingBottom="2dp" android:paddingTop="2dp" /> </TableRow> <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="left"> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" android:scaleType="fitXY"/> <TextView android:text="@string/download_msg" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="right"> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" android:scaleType="fitXY"/> </LinearLayout> </LinearLayout> </TableRow> <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="left"> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" android:scaleType="fitXY"/> <TextView android:text="Step 1: Download and Install eSpeak:" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView> <Button android:minWidth="80px" android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/btneSpeak" android:text="@string/eSpeak"></Button> <ProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/barESpeak" android:visibility="gone"></ProgressBar> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="right"> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" android:scaleType="fitXY"/> </LinearLayout> </LinearLayout> </TableRow> <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="left"> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" android:scaleType="fitXY"/> <TextView android:text="Step 2: Download and Install Languages:" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView> <Button android:minWidth="80px" android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/btnLanguages" android:text="@string/languages"></Button> <ProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/barLanguages" android:visibility="gone"></ProgressBar> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="right"> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" android:scaleType="fitXY"/> </LinearLayout> </LinearLayout> </TableRow> <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="left"> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" android:scaleType="fitXY"/> <TextView android:text="Step 3: Reboot the device:" android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView> <Button android:minWidth="80px" android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="@+id/btnReboot" android:text="Reboot"></Button> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="right"> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" android:scaleType="fitXY"/> </LinearLayout> </LinearLayout> </TableRow> <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content" android:layout_width="fill_parent" android:gravity="left"> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" android:scaleType="fitXY"/> <TextView android:text="Note: If Text to speech still fails repeat Step 2 and reboot again." android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="right"> <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/divider" android:layout_width="wrap_content" android:layout_height="fill_parent" android:scaleType="fitXY"/> </LinearLayout> </LinearLayout> </TableRow> <TableRow android:layout_width="fill_parent" android:layout_height="wrap_content" > <ImageView xmlns:android="http://schemas.android.com/apk/res/android" android:background="@drawable/divider" android:layout_width="fill_parent" android:layout_height="wrap_content" android:scaleType="fitXY" android:paddingLeft="5dp" android:paddingRight="5dp" android:paddingBottom="2dp" android:paddingTop="2dp" /> </TableRow> </LinearLayout> </ScrollView> </LinearLayout>
+2
source

Store this in your file name called "selector_fieldset_background.xml"

 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <solid android:color="#FFFFFF" /> <stroke android:width="1dip" android:color="#4fa5d5" /> </shape>

And this is in your layout:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginTop="13dp" android:background="@drawable/selector_fieldset_background" android:orientation="vertical" > </LinearLayout> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:background="@color/white" android:paddingLeft="20dp" android:paddingRight="20dp" android:text="Order Information" android:textAppearance="?android:attr/textAppearanceLarge"/> </RelativeLayout>

This will create the Group component, as shown in your image.

0
source

More articles:


All Articles