Android - TextView does not appear at all - android

I want each TextView appear under each ImageButton but the TextView in my case does not appear at all and I don't understand why. Thank you for helping.
This is my activity.xml :
<ImageView
android:id="#+id/imageView1"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center"
android:src="#drawable/logo" />
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/imageButtonProjet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="25dp"
android:layout_marginLeft="25dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:src="#drawable/projet" />
<ImageButton
android:id="#+id/imageButtonWorkitem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="25dp"
android:layout_marginLeft="25dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:src="#drawable/workitem" />
<ImageButton
android:id="#+id/imageButtonUser"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="25dp"
android:layout_marginLeft="25dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:src="#drawable/user" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageButtonProjet"
android:layout_marginLeft="32dp"
android:text="Projects"
android:textColor="#color/text_color" >
</TextView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageButtonWorkitem"
android:layout_marginLeft="62dp"
android:text="WorkItem"
android:textColor="#color/text_color" >
</TextView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageButtonUser"
android:layout_marginBottom="28dp"
android:layout_marginLeft="65dp"
android:text="Users"
android:textColor="#color/text_color" >
</TextView>
</LinearLayout>
I would greatly appreciate your help.Thanks in advance


layout_below works only for relative layouts.If you still want to do using LinearLayout then here is how.You are just using one LinearLayout that has a horizontal orientation. All this does it arrange the items horizontally and so the textviews go out of the screen. You need a 2 child LinearLayouts that has orientation set to horizontal and the parent with orientation vertical.
<ImageView
android:id="#+id/imageView1"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center"
android:src="#drawable/logo" />
<LinearLayout
android:id="#+id/linearLayout_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/imageButtonProjet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="25dp"
android:layout_marginLeft="25dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:src="#drawable/projet" />
<ImageButton
android:id="#+id/imageButtonWorkitem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="25dp"
android:layout_marginLeft="25dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:src="#drawable/workitem" />
<ImageButton
android:id="#+id/imageButtonUser"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="25dp"
android:layout_marginLeft="25dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:src="#drawable/user" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="32dp"
android:text="Projects"
android:textColor="#color/text_color" >
</TextView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="62dp"
android:text="WorkItem"
android:textColor="#color/text_color" >
</TextView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="28dp"
android:layout_marginLeft="65dp"
android:text="Users"
android:textColor="#color/text_color" >
</TextView>
</LinearLayout>
</LinearLayout>


android:layout_below
Doesn't apply to LinearLayout. You should be using RelativeLayout to force items to appear in positions in relation to each other.
Depending on where you want your ImageButtons to appear, you might need to add something like
<ImageButton
android:id="#+id/imageButtonWorkitem"
android:layout_below="#id/imageButtonWorkitem"
or
<ImageButton
android:id="#+id/imageButtonWorkitem"
android:layout_toRightOf="#id/imageButtonWorkitem"


You need to alternate between your imageviews within the linear layout. Also, you might not be seeing the textviews at all because the overall layout might be too tall.
<ImageView
android:id="#+id/imageView1"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center"
android:src="#drawable/logo" />
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/imageButtonProjet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="25dp"
android:layout_marginLeft="25dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:src="#drawable/projet" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageButtonProjet"
android:layout_marginLeft="32dp"
android:text="Projects"
android:textColor="#color/text_color" >
</TextView>
<ImageButton
android:id="#+id/imageButtonWorkitem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="25dp"
android:layout_marginLeft="25dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:src="#drawable/workitem" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageButtonWorkitem"
android:layout_marginLeft="62dp"
android:text="WorkItem"
android:textColor="#color/text_color" >
</TextView>
<ImageButton
android:id="#+id/imageButtonUser"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="25dp"
android:layout_marginLeft="25dp"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:src="#drawable/user" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageButtonUser"
android:layout_marginBottom="28dp"
android:layout_marginLeft="65dp"
android:text="Users"
android:textColor="#color/text_color" >
</TextView>
</LinearLayout>

Related

Table layout xml for leaderboard template - Android

I'm trying to create a layout for a user leader-board but I don't know how to make every "row" equal in proportion.
Here's the list of users:
And this is the code of the child layout (that populates a recyclerview):
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/topUsersLeaderboardItem_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="12"
android:orientation="horizontal"
android:paddingBottom="#dimen/margin_extra_small"
android:paddingTop="#dimen/margin_extra_small">
<TextView
android:id="#+id/topUsersLeaderboardItem_position"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:paddingStart="#dimen/margin_small"
android:textColor="#color/colorBlack"
android:layout_weight="2"
android:layout_gravity="center_vertical"
android:textSize="#dimen/font_size_small"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="8">
<RelativeLayout
android:id="#+id/topUsersLeaderboardItem_layoutPicUser"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical">
<ImageView
android:id="#+id/topUsersLeaderboardItem_userIcon"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
android:src="#drawable/circular_profile"
app:srcCompat="#drawable/circular_profile" />
<TextView
android:id="#+id/topUsersLeaderboardItem_userInitial"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center_vertical|center_horizontal|center"
android:text="U"
android:textSize="#dimen/font_size_medium"/>
</RelativeLayout>
<TextView
android:id="#+id/topUsersLeaderboardItem_username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_centerVertical="true"
android:gravity="center_vertical|center_horizontal"
android:text="uername"
android:textColor="#color/colorBlack"
android:layout_marginStart="8dp"
android:layout_toEndOf="#+id/topUsersLeaderboardItem_layoutPicUser"
android:textSize="#dimen/font_size_small"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/topUsersLeaderboardItem_scoreLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="2"
android:gravity="end">
<TextView
android:id="#+id/topUsersLeaderboardItem_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:text="150"
android:textSize="#dimen/font_size_small"
android:textColor="#color/colorBlack" />
<ImageView
android:id="#+id/topUsersLeaderboardItem_starImage"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentEnd="false"
android:layout_centerVertical="true"
android:layout_marginEnd="#dimen/margin_small"
android:layout_toEndOf="#+id/topUsersLeaderboardItem_score"
android:src="#drawable/ic_star_yellow_24dp"
app:srcCompat="#drawable/ic_star_yellow_24dp" />
</RelativeLayout>
As you can see from the picture, the space taken by the numbers on the left increases when I would like it to be fixed. Is there a way to make this sort of "table layout"? Thanks everybody!

Actually, it is because of android:layout_width="wrap_content"
of first TextView, give it some predefined value like android:layout_width="10dp". Don't forget to remove gravity from TextView.

please use this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/topUsersLeaderboardItem_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="12"
android:orientation="horizontal"
android:paddingBottom="#dimen/margin_extra_small"
android:paddingTop="#dimen/margin_extra_small">
<TextView
android:id="#+id/topUsersLeaderboardItem_position"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="0"
android:paddingStart="#dimen/margin_small"
android:textColor="#color/colorBlack"
android:layout_weight="2"
android:layout_gravity="center_vertical"
android:textSize="#dimen/font_size_small"/>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="8">
<RelativeLayout
android:id="#+id/topUsersLeaderboardItem_layoutPicUser"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical">
<ImageView
android:id="#+id/topUsersLeaderboardItem_userIcon"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
android:src="#drawable/circular_profile"
app:srcCompat="#drawable/circular_profile" />
<TextView
android:id="#+id/topUsersLeaderboardItem_userInitial"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center_vertical|center_horizontal|center"
android:text="U"
android:textSize="#dimen/font_size_medium"/>
</RelativeLayout>
<TextView
android:id="#+id/topUsersLeaderboardItem_username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_centerVertical="true"
android:gravity="center_vertical|center_horizontal"
android:text="uername"
android:textColor="#color/colorBlack"
android:layout_marginStart="8dp"
android:layout_toEndOf="#+id/topUsersLeaderboardItem_layoutPicUser"
android:textSize="#dimen/font_size_small"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/topUsersLeaderboardItem_scoreLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="2">
<TextView
android:id="#+id/topUsersLeaderboardItem_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:text="150"
android:textSize="#dimen/font_size_small"
android:textColor="#color/colorBlack" />
<ImageView
android:id="#+id/topUsersLeaderboardItem_starImage"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentEnd="false"
android:layout_centerVertical="true"
android:layout_marginEnd="#dimen/margin_small"
android:layout_toEndOf="#+id/topUsersLeaderboardItem_score"
android:src="#drawable/ic_star_yellow_24dp"
app:srcCompat="#drawable/ic_star_yellow_24dp" />
</RelativeLayout>

How to fully fill the image button with images?

I have these image buttons, the image for the image button are store in the
drawable file. However, i just cannot fill the image button with the image.
There will still be some empty space left which make it not that beautiful.
Is there any way to make the image button fully fill with image? Here shows
my image button xml code.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView01"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/RelativeLayout01"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/LinearLayout01"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="#drawable/homepage"
android:layout_marginLeft="80dp"/>
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="85dp"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/buttonSignUP"
android:layout_gravity="right"
android:layout_marginLeft="40dp"/>
</LinearLayout>
<SearchView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/searchView"
android:layout_below="#+id/viewFlipper"
android:layout_alignParentStart="true"
android:text="Search a product"
android:layout_alignParentEnd="true"
android:layout_marginTop="20dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Featured promotion"
android:id="#+id/textView"
android:layout_below="#+id/searchView"
android:layout_alignParentStart="true"
android:layout_marginTop="20dp" />
<ViewFlipper
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/view_flipper"
android:layout_alignEnd="#+id/imageButton2"
android:layout_marginTop="20dp">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="#drawable/banner5" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="#drawable/banner6" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="#drawable/banner7" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="#drawable/banner8" />
</RelativeLayout>
</ViewFlipper>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Categories"
android:id="#+id/textView2"
android:layout_below="#+id/textView"
android:layout_marginTop="40dp" />
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp">
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton"
android:layout_below="#+id/textView2"
android:src="#drawable/fashion"
android:layout_toStartOf="#+id/imageButton3" />
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton2"
android:layout_alignParentEnd="true"
android:layout_below="#+id/textView2"
android:src="#drawable/book"
android:layout_above="#+id/imageButton5"
android:layout_gravity="center_vertical"
android:layout_marginLeft="40dp"/>
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp">
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton3"
android:src="#drawable/sport"
android:layout_alignTop="#+id/imageButton2"
android:layout_centerHorizontal="true"
android:layout_alignBottom="#+id/imageButton2"
android:layout_gravity="center_vertical" />
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton4"
android:layout_below="#+id/imageButton"
android:layout_alignParentStart="true"
android:src="#drawable/healthcare"
android:layout_marginLeft="40dp"/>
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp">
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton5"
android:layout_alignTop="#+id/imageButton4"
android:layout_alignEnd="#+id/imageButton2"
android:src="#drawable/computer"
android:layout_alignBottom="#+id/imageButton4"
android:layout_alignStart="#+id/imageButton2" />
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton6"
android:layout_alignBottom="#+id/imageButton4"
android:src="#drawable/phone"
android:layout_alignTop="#+id/imageButton4"
android:layout_alignEnd="#+id/imageButton3"
android:layout_toEndOf="#+id/imageButton4"
android:layout_marginLeft="40dp"/>
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp">
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton7"
android:src="#drawable/stationary"
android:layout_below="#+id/imageButton4"
android:layout_alignParentStart="true" />
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton8"
android:src="#drawable/others"
android:layout_below="#+id/imageButton5"
android:layout_alignStart="#+id/imageButton6"
android:layout_alignEnd="#+id/imageButton6"
android:layout_marginLeft="40dp"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</ScrollView>

Yes you can use android:scaleType="fitXY"
OR
android:scaleType="fitCenter"
For eg.
<ImageButton
android:id="#+id/imageButton"
android:layout_width="120dp"
android:layout_height="100dp"
android:layout_below="#+id/textView2"
android:adjustViewBounds="true"
android:background="#null"
android:src="#drawable/fashion"
android:scaleType="fitCenter" />

Well you can use the android:scaleType attribute to fill the ImageButton. I generally use fitXY or fitCenter to cover the ImageButton with the image. To remove gray background, use android:background="#null". For example -
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton2"
android:layout_alignParentEnd="true"
android:layout_below="#+id/textView2"
android:src="#drawable/book"
android:layout_above="#+id/imageButton5"
android:layout_gravity="center_vertical"
android:layout_marginLeft="40dp"
android:scaleType="fitXY"
android:background="#null" />

Add ScaleType
android:scaleType="fitXY"
and Background as null to remove grey background
android:background="#null"

you can use android:scaleType="fitXY"

Horizontal LinearLayout with HorizontalScrollView. ImageView after ScrollView gone

I have a Horizontal LinearLayout that have ImageView arrow left, HorizontalScrollView and ImageView arrow right. HorizontalScrollView have some ImageViews and I think it pushes the right arrow off the screen.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/arrowLeft
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/arrowLeft"
android:layout_marginTop="30dp"
android:layout_marginLeft="20dp"/>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="55dp"
android:layout_marginTop="20dp"
android:scrollbars="none">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/buttonToDoor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_todoor" />
<ImageView
android:id="#+id/buttonWomen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_women" />
<ImageView
android:id="#+id/buttonCommerce"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_commerce" />
<ImageView
android:id="#+id/buttonPause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_pause" />
<ImageView
android:id="#+id/buttonTrunk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_trunk" />
<ImageView
android:id="#+id/buttonSnack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_snack" />
<ImageView
android:id="#+id/buttonSmoke"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_smoke" />
<ImageView
android:id="#+id/buttonWifi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_wifi" />
<ImageView
android:id="#+id/buttonPackage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_package" />
</LinearLayout>
</HorizontalScrollView>
<ImageView
android:id="#+id/arrowRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/rightArrow"
android:layout_marginTop="30dp"/>
</LinearLayout>
Image:
How could I show the right arrow?

Change the width of the HorizontalScrollView to 0dip and add to the attribute weight with value of 1
<HorizontalScrollView
android:layout_width="0dip"
android?layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="55dp"
android:layout_marginTop="20dp"
android:scrollbars="none">
This will make it fill all space available not ocuppied by other views (the arrows)

You can also achieve it by using Relative layout as a parent layout instead of Linear Layout , update your code as following:-
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/arrowLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/arrowLeft"
android:layout_marginTop="30dp"
android:layout_marginLeft="20dp"/>
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/arrowLeft"
android:layout_toLeftOf="#+id/arrowRight"
android:layout_marginTop="20dp"
android:scrollbars="none">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/buttonToDoor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_todoor" />
<ImageView
android:id="#+id/buttonWomen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_women" />
<ImageView
android:id="#+id/buttonCommerce"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_commerce" />
<ImageView
android:id="#+id/buttonPause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_pause" />
<ImageView
android:id="#+id/buttonTrunk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_trunk" />
<ImageView
android:id="#+id/buttonSnack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_snack" />
<ImageView
android:id="#+id/buttonSmoke"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_smoke" />
<ImageView
android:id="#+id/buttonWifi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_wifi" />
<ImageView
android:id="#+id/buttonPackage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/button_package" />
</LinearLayout>
</HorizontalScrollView>
<ImageView
android:id="#+id/arrowRight"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/arrowLeft"
android:layout_marginTop="30dp"
android:layout_marginRight="20dp"/>
</RelativeLayout>

You can use simply weight-property of xml...
just paste this code in your 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="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/arrowLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/arrowLeft" />
<HorizontalScrollView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scrollbars="none" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/buttonToDoor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/buttonWomen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/buttonCommerce"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/buttonPause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/buttonTrunk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/buttonSnack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/buttonSmoke"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/buttonWifi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/buttonPackage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</HorizontalScrollView>
<ImageView
android:id="#+id/arrowRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/rightArrow" />
</LinearLayout>
</LinearLayout>

Android how to design the xml about the UI

I need to design the xml about below layout.
I try to use RelativeLayout to design, but I don't know
how to adjust the imageVivew3 in RelativeLayout.
Have anyone can teach me how to adjust the xml?
or have you nice xml design about this layout?
thank you very much.
my xml is below:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relative_bg"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView1"
android:layout_centerHorizontal="true"
android:visibility="visible"
android:layout_margin="0dp"/>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:visibility="visible"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"/>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView3"
android:visibility="visible"
android:layout_centerVertical="true"
android:layout_below="#+id/imageView3"
android:layout_alignParentRight="true"
/>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView4"
android:layout_alignTop="#+id/textView1"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="txt1"
android:id="#+id/textView1"
android:textColor="#color/white"
android:textSize="#dimen/common_size_large"
android:layout_below="#+id/imageView3"
android:layout_alignParentRight="true"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="txt2"
android:id="#+id/textView2"
android:textColor="#color/white"
android:layout_below="#+id/textView1"
android:layout_alignParentRight="true"
/>
</RelativeLayout>

Try to LinearLayout instead of RelativeLayout..
And also use android:layout_weight atttribute ...code sample are given below... put this
code to your xml.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#android:color/white"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight=".75"
android:layout_marginTop="5dp"
>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="2"
android:layout_gravity="center"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/gerder"
android:textSize="12sp"
android:textStyle="bold"
android:contentDescription="#string/app_name"
android:layout_gravity="center"
android:paddingLeft="10dp"
android:gravity="center"
android:textColor="#android:color/black"
android:fontFamily="#string/providerFontFamily"
/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<RadioGroup
android:id="#+id/radioGender"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginLeft="5dp"
>
<RadioButton
android:id="#+id/radioMale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/providerGenderMale"
android:checked="true" />
<RadioButton
android:id="#+id/radioFemale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/providerGenderFemale" />
</RadioGroup>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="2"
android:layout_gravity="center"
>
<TextView
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#string/providerFontFamily"
android:text="#string/age_range"
android:gravity="left"
android:textSize="12sp"
android:textStyle="bold"
android:textColor="#android:color/black"
android:layout_gravity="center"
/>
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:layout_marginRight="15dp"
android:prompt="#string/country_prompt"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>

Android center bottom numberpickers

I'm trying to create two number pickers in android. However i try to center them both at the bottom. I tried to mix up relative and linear layout, but i was not able to fix it.
The images shows how the buttons are placed at the moment. The red squares show how i want the buttons to be displayed.
Hope you can help 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="com.pvdl.ndwatch.NDwatchActivity$PlaceholderFragment" >
<ImageView
android:id="#+id/background"
android:layout_width="wrap_content"
android:layout_height="300dp"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:scaleType="centerCrop"
android:src="#drawable/background" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/nd_text"
android:textColor="#color/red"
android:textStyle="bold" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:src="#drawable/ic_launcher" />
<View
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_marginLeft="150dp"
android:layout_marginTop="90dp"
android:background="#00ABCC" />
<TextView
android:id="#+id/title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:layout_marginTop="20dp"
android:text="#string/title"
android:textColor="#404041"
android:textSize="60sp" />
<TextView
android:id="#+id/title2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="200dp"
android:layout_marginTop="30dp"
android:text="#string/title2"
android:textColor="#404041"
android:textSize="50sp" />
<RelativeLayout
android:id="#+id/frame"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_centerHorizontal="true" >
</RelativeLayout>
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="270dp"
android:layout_height="270dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#android:color/transparent"
android:indeterminate="false"
android:max="100"
android:progress="0"
android:progressDrawable="#drawable/circular_progress_bar" />
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignBottom="#+id/background"
android:layout_centerHorizontal="true"
android:layout_marginBottom="60dp"
android:background="#android:color/transparent"
android:onClick="onNDstart"
android:scaleType="fitXY"
android:src="#drawable/custom_button" />
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/imageButton1"
android:layout_centerHorizontal="true"
android:layout_marginBottom="15dp"
android:background="#android:color/transparent"
android:text="Chronometer"
android:textColor="#000000"
android:textSize="70sp"
android:textStyle="bold" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/background"
android:layout_marginBottom="40dp"
android:layout_centerHorizontal="true"
android:text="#string/start"
android:textColor="#color/red"
android:textStyle="bold" />
<NumberPicker
android:id="#+id/numberPicker2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_weight="1"
android:entries="#array/shutter_times"
/>
<NumberPicker
android:id="#+id/numberPicker1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_weight="1"
android:entries="#array/nd_values"
android:gravity="bottom" />
</RelativeLayout>

Change your xml to this:
<RelativeLayout ...>
....
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:weightSum="2" >
<NumberPicker
android:id="#+id/numberPicker2"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:entries="#array/shutter_times" />
<NumberPicker
android:id="#+id/numberPicker1"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:entries="#array/nd_values" />
</LinearLayout>
</RelativeLayout>
If you want a space between the buttons just add a paddingRight to the left button and the same value to the paddingLeft of the right button.
Hope this helps.

Categories

Resources