Android Button Place Image in center and text at bottom

Android Button Place Image in center and text at bottom - android

I want to place Image in the center and text just below it in a button, I tried to set android:gravity but could not set it properly,here is the image attached:
below is my xml:
<?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"
android:paddingLeft="10.0dip"
android:paddingTop="10.0dip"
android:paddingRight="10.0dip"
android:paddingBottom="10.0dip"
android:background="#drawable/background_img"
>
<LinearLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:paddingLeft="10.0dip"
android:paddingTop="10.0dip"
android:paddingRight="10.0dip"
android:paddingBottom="10.0dip"
>
<Button
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:id="#+id/button_listen"
android:text="#string/listen"
android:drawableTop="#drawable/listen_btn"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_gravity="center"
/>
<Button
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:id="#+id/button_gallery"
android:text="#string/gallery"
android:drawableTop="#drawable/gallery_btn"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_gravity="center"
/>
</LinearLayout>
<LinearLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:paddingLeft="10.0dip"
android:paddingTop="10.0dip"
android:paddingRight="10.0dip"
android:paddingBottom="10.0dip"
>
<Button
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:id="#+id/button_play"
android:text="#string/play"
android:drawableTop="#drawable/play_btn"
android:layout_marginLeft="10dp"
android:layout_gravity="center"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
/>
<Button
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:id="#+id/button_find"
android:text="#string/find"
android:drawableTop="#drawable/test_btn"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_gravity="center"
/>
</LinearLayout>
</LinearLayout>
What is the proper way to center the image and text below it?
Many thanks in advance.

Try this its work for me
<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"
tools:context=".MainActivity" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="151dp"
android:onClick="onClick"
android:drawableTop="#drawable/ic_launcher"
android:text="Button" />
</RelativeLayout>

Try change the button to LinearLayout and use same onclicklistener on fakebutton
<LinearLayout
android:id="#+id/fakeButton"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center_vertical|center_horizontal"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon_big_evento" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/menu_about" />
</LinearLayout>

I followed DjHacktorReborn comments and made the layout, here is the freezed one
<?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:background="#drawable/background_img"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:weightSum="10" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="4.1"
android:orientation="vertical" >
</LinearLayout>
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2"
android:orientation="horizontal"
android:stretchColumns="*" >
<TableRow android:layout_weight="1" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/button_listen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:background="#drawable/main_list"
android:paddingTop="90dp"
android:text="#string/listen"
android:textStyle="bold"
android:textColor="#FFFFFF" />
<ImageView
android:id="#+id/main_icon_content_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/listen_btn" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/button_gallery"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/main_list"
android:paddingTop="90dp"
android:text="#string/gallery"
android:textStyle="bold"
android:textColor="#FFFFFF" />
<ImageView
android:id="#+id/main_icon_schedule_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/gallery_btn" />
</RelativeLayout>
</TableRow>
<TableRow android:layout_weight="1" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/button_play"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/main_list"
android:ellipsize="marquee"
android:paddingTop="90dp"
android:text="#string/play"
android:textStyle="bold"
android:textColor="#FFFFFF"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/play_btn" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/button_find"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/main_list"
android:paddingTop="90dp"
android:text="#string/find"
android:textStyle="bold"
android:textColor="#FFFFFF" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/test_btn" />
</RelativeLayout>
</TableRow>
</TableLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="4.1"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
</LinearLayout>
Here is the updated result
Thanks for the suggestions

Related

Unable to align text to right of imageview android layout xml

I am trying to create layout like below in android:
But my problem is I am unable to add textbelow the image or on the right hand side of imageview. If I wrap ImageView and textview in a LinearLayout the then the whole view shrinks. Should I be using TableLayout?
My current layout xml is like below:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_below="#id/my_recycler_view"
android:layout_margin="30dp">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="300dp"
android:orientation="vertical"
android:layout_weight="1"
>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/vwImageAndClassroom"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
>
<ImageView
android:id="#+id/img_room"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/coverimage_contentdescription"
android:scaleType="fitCenter"
android:src="#drawable/comm_book_icon"
/>
<TextView
android:id="#+id/tv_emp_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:textSize="12dp"
android:textStyle="bold"
android:textAllCaps="true"
android:layout_below="#id/img_room"
android:layout_marginBottom="20dp"
android:gravity="center_horizontal"
android:text="TEXT 1"
/>
</RelativeLayout>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="300dp"
android:orientation="vertical"
android:layout_weight="1"
>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/vwImageAndClassroom2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
>
<ImageView
android:id="#+id/img_room2"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/coverimage_contentdescription"
android:scaleType="fitCenter"
android:src="#drawable/visitor_book_icon"
/>
<TextView
android:id="#+id/tv_emp_name2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:textSize="12dp"
android:textStyle="bold"
android:textAllCaps="true"
android:layout_below="#id/img_room2"
android:layout_marginBottom="20dp"
android:gravity="center_horizontal"
android:text="TEXT 2"
/>
</RelativeLayout>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="300dp"
android:orientation="vertical"
android:layout_weight="1"
>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/vwImageAndClassroom3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
>
<ImageView
android:id="#+id/img_room3"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/coverimage_contentdescription"
android:scaleType="fitCenter"
android:src="#drawable/visitor_book_icon"
/>
<TextView
android:id="#+id/tv_emp_name3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical"
android:textSize="12dp"
android:textStyle="bold"
android:textAllCaps="true"
android:layout_below="#id/img_room3"
android:layout_marginBottom="20dp"
android:gravity="center_horizontal"
android:text="TEXT 3"
/>
</RelativeLayout>
</LinearLayout>
</LinearLayout>

Hope this will help you and you will find your solutions from this xml code. I just modify some of your code
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:src="#android:drawable/ic_search_category_default"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This Right side text 1"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:src="#android:drawable/ic_search_category_default"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This Right side text 1"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:src="#android:drawable/ic_search_category_default"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This Right side text 1"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="This is under layout text"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="This is under layout text"/>
</LinearLayout>
</LinearLayout>

Have placeholder views where text is not required.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/next_green" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/next_green" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/next_green" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="text"/>
</LinearLayout>
</LinearLayout>

I did exactly what you want
Open image
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="#android:drawable/btn_dialog" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView3"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="#android:drawable/btn_dialog" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="#android:drawable/btn_dialog" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/textView5"
android:layout_width="match_parent"
android:layout_height="15dp"
android:text="Some text" />
<TextView
android:id="#+id/textView6"
android:layout_width="match_parent"
android:layout_height="15dp"
android:text="Some text" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/textView7"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Some text"
app:srcCompat="#android:drawable/btn_dialog" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/textView8"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Some text"
app:srcCompat="#android:drawable/btn_dialog" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/textView9"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Some text"
app:srcCompat="#android:drawable/btn_dialog" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

Divide Screen into Four Equal Parts using Relative Layout

I currently have code that allows me to divide the screen into four equal parts, with an image button in each part. However, the code uses linear layouts which brings up the suggestion "nested weights are bad for performance". How can I make my layout using relative layouts?
Below is the code, and here is a picture of the intended format
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:orientation="horizontal"
android:background="#ff191919">
<ToggleButton
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff414141"
android:layout_weight="1.0"
android:text="Plane"
android:layout_margin="5dp"
android:textSize="20sp"
android:onClick="airplaneClicked"/>
<ImageButton
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff414141"
android:layout_weight="1.0"
android:layout_margin="5dp"
android:scaleType="fitCenter"
android:src="#drawable/ic_brightness"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:orientation="horizontal"
android:background="#ff191919">01
<ImageButton
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff414141"
android:layout_weight="1.0"
android:layout_margin="5dp"
android:scaleType="fitCenter"
android:src="#drawable/ic_sound" />
<ImageButton
android:id="#+id/settingsbutton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff414141"
android:layout_weight="1.0"
android:layout_margin="5dp"
android:scaleType="fitCenter"
android:src="#drawable/settings2"/>
</LinearLayout>
</LinearLayout>

Using below xml:
<?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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#242425"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textColor="#d5d5d5" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#d5d5d5"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#d5d5d5"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#242425"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textColor="#d5d5d5" />
</LinearLayout>
</LinearLayout>

Try this code for your RelativeLayout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/r1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/r3"
android:layout_width="match_parent"
android:layout_height="225dp"
android:layout_marginBottom="10dp"
android:layout_alignParentTop="true" >
<ImageButton
android:id="#+id/i1"
android:layout_width="150dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/i2"
android:layout_width="150dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#drawable/ic_launcher" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/r2"
android:layout_width="match_parent"
android:layout_height="225dp"
android:layout_alignParentBottom="true"
android:layout_below="#+id/r3" >
<ImageButton
android:id="#+id/i3"
android:layout_width="150dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/i4"
android:layout_width="150dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#drawable/ic_launcher" />
</RelativeLayout>
</RelativeLayout>

Try this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0">
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_green_light"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:orientation="horizontal" >
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_blue_light"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/holo_red_light"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>

Android map with custom layout

I' am trying to achieve sth like this:
But the ListView is overlaps my bottom bar. What is the best way to prevent such a behaviour? As you can see in the picture there is a map under bottom bar. This bottom bar is like target/destination window in Google Maps app.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<com.google.android.gms.maps.MapView
android:id="#+id/map"
tools:layout="#layout/fragmentMap"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:orientation="vertical">
<EditText
android:id="#+id/mapEditT"
android:layout_width="fill_parent"
android:layout_height="53dp"
android:layout_alignParentTop="true"
android:gravity="center|left"
android:paddingLeft="2dp"
android:paddingRight="0dp"/>
<ListView
android:id="#+id/listVi"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="vertical">
<ImageButton
android:id="#+id/draweR"
android:layout_width="wrap_content"
android:src="#drawable/draweR"/>
<LinearLayout
android:id="#+id/infoBox"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="40dp"
android:alpha="0.1"
android:background="#android:color/black"
android:orientation="horizontal">
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:text="Info"
/>
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_toRightOf="#id/text2"
android:text="Info/>
</LinearLayout>
</LinearLayout>
</FrameLayout>

Use LinearLayout or RelativeLayout as top most parent instead of FrameLayout.
Here is the code snippet using LinearLayout.
<?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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</ListView>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageButton
android:id="#+id/draweR"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="left|center_vertical"
android:src="#drawable/draweR"/>
<com.google.android.gms.maps.MapView
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout="#layout/fragmentMap" />
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="100" >
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_weight="75" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_weight="25" />
</LinearLayout>
</LinearLayout>

You can mess around with the margins. I got it to look like the image you wanted.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<com.google.android.gms.maps.MapView
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout="#layout/fragmentMap" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:orientation="vertical"
android:paddingBottom="160dp" >
<EditText
android:id="#+id/mapEditT"
android:layout_width="fill_parent"
android:layout_height="53dp"
android:layout_alignParentTop="true"
android:gravity="center|left"
android:paddingLeft="2dp"
android:paddingRight="0dp" />
<ListView
android:id="#+id/listVi"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="vertical" >
<ImageButton
android:id="#+id/draweR"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/draweR" />
<LinearLayout
android:id="#+id/infoBox"
android:layout_width="match_parent"
android:layout_height="100dp"
android:alpha="0.1"
android:background="#android:color/black"
android:orientation="horizontal" >
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:text="Info" />
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_toRightOf="#id/text2"
android:text="Info" />
</LinearLayout>
</LinearLayout>

expandableListView listeners not working using a particular layout

ExpandableListView does not work using the following layout. OnGroupClickListener is never called when user clicks.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
android:focusable="false">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:focusable="false"
>
<ImageView
android:id="#+id/buttons_group_rowIV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/radar_settings_gafas_led_off" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:orientation="vertical" >
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#android:color/darker_gray" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="fill_vertical"
android:weightSum="10" >
<TextView
android:id="#+id/buttons_group_row_TV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="9"
android:text="#string/interiorLED"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Switch
android:id="#+id/buttons_group_row_SW"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
But if I use the following layout all works fine. The only difference is the Switch Widget, that now is a ImageView:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
>
<ImageView
android:id="#+id/buttons_group_rowIV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:src="#drawable/radar_settings_gafas_led_off" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:orientation="vertical" >
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#android:color/darker_gray" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="fill_vertical"
android:weightSum="10" >
<TextView
android:id="#+id/buttons_group_row_TV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="9"
android:text="#string/interiorLED"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageView
android:id="#+id/buttons_group_noSW_rowIV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:padding="5dp"
android:src="#drawable/radar_settings_gafas_led_off" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

Alignment problems in XML

I'm Trying to get the buttons to go under the white box. In the java file I am adding a special view to the id:ViewLayout. I have tried putting the buttons after the Framelayout, but they dont appear on screen....
<TextView
android:id="#+id/tvClock"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="12:00"
android:textColor="#android:color/white"
android:textSize="100dp" />
<FrameLayout
android:id="#+id/Container"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:id="#+id/ViewLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</RelativeLayout>
<Button
android:id="#+id/bUnlock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Unlock" />
<Button
android:id="#+id/bPin"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="PIN" />
</FrameLayout>
Thanks!

Try this one.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/black"
android:orientation="vertical" >
<TextView
android:id="#+id/tvClock"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="12:00"
android:textColor="#android:color/white"
android:textSize="100dp" />
<LinearLayout
android:id="#+id/Container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.58" >
<LinearLayout
android:id="#+id/ViewLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>

<TextView
android:id="#+id/tvClock"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="12:00"
android:textColor="#android:color/white"
android:textSize="100dp" />
<RelativeLayout
android:id="#+id/Container"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:id="#+id/ViewLayout"
android:layout_width="match_parent"
android:layout_height="100dp" >
</RelativeLayout>
<Button
android:id="#+id/bUnlock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Unlock"
android:layout_below="#id/ViewLayout"
/>
<Button
android:id="#+id/bPin"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="PIN"
android:layout_below="#id/bUnlock"/>
</RelativeLayout>
Try RelativeLayout instead of framelayout.

This may help you:
<TextView
android:id="#+id/tvClock"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:gravity="center"
android:text="12:00"
android:textColor="#android:color/white"
android:textSize="100dp"
android:layout_weight="2" />
<LinearLayout
android:id="#+id/Container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="1">
<RelativeLayout
android:id="#+id/ViewLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:id="#+id/bUnlock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Unlock" />
<Button
android:id="#+id/bPin"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="PIN" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Android Button Place Image in center and text at bottom - android

Related

Unable to align text to right of imageview android layout xml

Divide Screen into Four Equal Parts using Relative Layout

Android map with custom layout

expandableListView listeners not working using a particular layout

Alignment problems in XML

Categories

Resources