I'm trying to get the button to the bottom the layout, and it just won't work...
The button is displaying it self on the image that should be above it.
Here is the xml code:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:layout_gravity="center"
>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="28dp"
android:layout_marginTop="32dp" />
<TextView
android:id="#+id/txtAppName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView1"
android:layout_marginLeft="22dp"
android:layout_toRightOf="#+id/imageView1"
android:text=""
android:textSize="36px"
android:textStyle="bold" />
<TextView
android:id="#+id/txtAppAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtAppName"
android:layout_below="#+id/txtAppName"
android:layout_marginTop="5px"
android:text=""
android:textSize="24px"
android:textStyle="normal" />
<TextView
android:id="#+id/txtAppDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView1"
android:layout_below="#+id/imageView1"
android:layout_marginTop="20dp"
android:maxHeight="350px"
android:text=""
android:width="600px"
android:maxLines="10"
android:scrollbars = "vertical"
/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtAppDesc"
android:layout_below="#+id/txtAppDesc"
android:layout_marginTop="30dp" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView2"
android:layout_toRightOf="#+id/imageView2" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView3"
android:layout_toRightOf="#+id/imageView3"
android:visibility="visible" />
<Button
android:id="#+id/btnInstall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_alignBottom="#+id/imageview4"
android:text="Download & Install" />
</RelativeLayout>
</ScrollView>
And the result is:
Thanx upfront.
You used android:layout_alignBottom="#+id/imageview4"
This means you align the bottom of your button with the bottom of your image.
You have to use android:layout_below="#+id/imageview4"
EDIT: I don't say this is the best solution, because of multiple layouts (for optimisation...) but this should work:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:layout_gravity="center"
>
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="28dp"
android:layout_marginTop="32dp"/>
<TextView
android:id="#+id/txtAppName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView1"
android:layout_marginLeft="22dp"
android:layout_toRightOf="#+id/imageView1"
android:text=""
android:textSize="36px"
android:textStyle="bold"/>
<TextView
android:id="#+id/txtAppAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtAppName"
android:layout_below="#+id/txtAppName"
android:layout_marginTop="5px"
android:text=""
android:textSize="24px"
android:textStyle="normal"/>
<TextView
android:id="#+id/txtAppDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView1"
android:layout_below="#+id/imageView1"
android:layout_marginTop="20dp"
android:maxHeight="350px"
android:text=""
android:width="600px"
android:maxLines="10"
android:scrollbars="vertical"
/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtAppDesc"
android:layout_below="#+id/txtAppDesc"
android:layout_marginTop="30dp"/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView2"
android:layout_toRightOf="#+id/imageView2"/>
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView3"
android:layout_toRightOf="#+id/imageView3"
android:visibility="visible"/>
</RelativeLayout>
<Button
android:id="#+id/btnInstall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Download & Install"/>
</LinearLayout>
</ScrollView>
I added a linear layout in which I put the content, and the button.
Hope this will work.
Do you just want the image that the button is over to shrink in order to make room for it? If so, you need to put the Imageview that contains that image as the very last item in your relative layout. It's going to allocate space for everything but the image, and then give the remaining space to the image, which is why it needs to be last.
Also, I suggest giving your imageViews more informative names than "imageView#", since it's kind of difficult to tell which is which.
You might want to wrap you images in a HorizontalScrollView to maintain full height and width of all your images. I changed a lot of the ViewGroups' widths and heights to accommodate the HorizontalScrollView, finally I set the Button below the images:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fillViewport="true" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="28dp"
android:layout_marginTop="32dp" />
<TextView
android:id="#+id/txtAppName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView1"
android:layout_marginLeft="22dp"
android:layout_toRightOf="#+id/imageView1"
android:text=""
android:textSize="36px"
android:textStyle="bold" />
<TextView
android:id="#+id/txtAppAuthor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/txtAppName"
android:layout_below="#+id/txtAppName"
android:layout_marginTop="5px"
android:text=""
android:textSize="24px"
android:textStyle="normal" />
<TextView
android:id="#+id/txtAppDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView1"
android:layout_below="#+id/imageView1"
android:layout_marginTop="20dp"
android:maxHeight="350px"
android:maxLines="10"
android:scrollbars="vertical"
android:text=""
android:width="600px" />
<HorizontalScrollView
android:id="#+id/images"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/txtAppDesc"
android:layout_marginTop="30dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</HorizontalScrollView>
<Button
android:id="#+id/btnInstall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/images"
android:layout_centerHorizontal="true"
android:text="Download & Install" />
</RelativeLayout>
</ScrollView>
Understand that nesting a HorizontalScrollView inside a ScrollView (or vica versa) does not create a smooth scrolling effect in the x & y directions simultaneously. But you can create this effect as discussed here: Scrollview vertical and horizontal in android.
Related
I have the circle icon , it build up by one text view and one image view .
I want text and image can overlap , so i use relativeLayout.
When i run the app , i found it's align out of my control from different screen size.
Is there any better way to design the layout ?
I set the layout like this:
<LinearLayout 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"
android:orientation="vertical"
tools:context=".PageFragment.ActivityHomePage">
<LinearLayout
android:layout_width="300dp"
android:layout_height="wrap_content"
android:padding="15dp"
android:orientation="vertical">
<TextView
android:id="#+id/activityHpEduin"
android:textSize="15dp"
android:textColor="#66CDAA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="test" />
<TextView
android:id="#+id/activityHpTitle"
android:layout_marginTop="5dp"
android:textSize="20dp"
android:textColor="#android:color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="test" />
<TextView
android:textSize="18dp"
android:layout_marginTop="5dp"
android:textColor="#6666ff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7.16.2016-2/12.2017"
android:id="#+id/activityHpDate" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:paddingTop="20dp"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/circleNews"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/btn_news" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="24dp"
android:layout_marginTop="70dp"
android:textColor="#android:color/white"
android:gravity="center"
android:text="#string/circleNews" />
<ImageView
android:id="#+id/circleActivityContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_toRightOf="#+id/circleNews"
android:src="#drawable/btn_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="140dp"
android:layout_marginTop="70dp"
android:gravity="center"
android:textColor="#android:color/white"
android:text="#string/circleActivityContent" />
<ImageView
android:id="#+id/circleSignUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="5dp"
android:layout_toRightOf="#+id/circleActivityContent"
android:src="#drawable/btn_apply" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="252dp"
android:layout_marginTop="70dp"
android:gravity="center"
android:textColor="#android:color/white"
android:text="#string/circleSignUp" />
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="20dp"
android:paddingLeft="15dp"
android:paddingRight="15dp">
<ImageView
android:id="#+id/circlePresenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/btn_speakers" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="70dp"
android:gravity="center"
android:textColor="#android:color/white"
android:text="#string/circlePresenter" />
<ImageView
android:id="#+id/circleHotel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_toRightOf="#+id/circlePresenter"
android:src="#drawable/btn_accommodation" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="138dp"
android:layout_marginTop="70dp"
android:gravity="center"
android:textColor="#android:color/white"
android:text="#string/circleHotel" />
<ImageView
android:id="#+id/circleTransportation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="5dp"
android:layout_toRightOf="#+id/circleHotel"
android:src="#drawable/btn_traffic" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="252dp"
android:layout_marginTop="70dp"
android:gravity="center"
android:textColor="#android:color/white"
android:text="#string/circleTransportation" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="20dp"
android:paddingLeft="15dp"
android:paddingRight="15dp">
<ImageView
android:id="#+id/circleSponsor"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="117dp"
android:src="#drawable/btn_sponsors" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="146dp"
android:layout_marginTop="70dp"
android:textColor="#android:color/white"
android:gravity="center"
android:text="#string/circleSponsor" />
</RelativeLayout>
</LinearLayout>
Try this sample code it is similar to what you want.
First here is the xml file code here i have a imageview and below it a text together they are in relative layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageView3"
android:layout_width="110dp"
android:layout_height="110dp"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:layout_weight="1"
android:src="#drawable/user_icon" />
<TextView
android:id="#+id/tv_email"
android:layout_width="200dp"
android:layout_height="45dp"
android:layout_alignStart="#+id/imageView3"
android:layout_below="#+id/imageView3"
android:layout_gravity="center_horizontal"
android:textColor="#color/White"
android:textSize="18sp" />
</RelativeLayout>
The output is like below:
another answer with new requirement:
xml code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="119dp"
android:layout_marginTop="50dp">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:background="#drawable/banner_bg" />
<TextView
android:id="#+id/textView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fontFamily="#string/font_family_universal"
android:gravity="center"
android:padding="20dp"
android:text="hello world"
android:textAlignment="center"
android:textColor="#color/white"
android:textSize="25dp"
android:textStyle="normal"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
screenshot of above code:
Remember its a sample code change background path accordingly and other properties.Here there is image and above it there is textview as required.
try to bring your textview on front like this
tv_shimmer_tv_gooffline.bringToFront();
Use SDP. It help me more for such designing to support multiple screen sizes.
SDP - a scalable size unit.
An android SDK that provides a new size unit - sdp (scalable dp). This size unit scales with the screen size. It can help Android developers with supporting multiple screens.
for text views please refer to ssp which is based on the sp size unit for texts.
https://github.com/intuit/sdp
Im trying to make a text view to align to the left border of another imageview in a RelativeLayout, but I'm having trouble and I cannot achieve this. Can anyone tell me how can I achieve this?
Here is my current XML layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:orientation="vertical" >
<ImageView
android:id="#+id/main_item_bg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:contentDescription="#string/app_name"
android:scaleType="fitXY" />
<RelativeLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/blackalha"
android:gravity="center_vertical"
android:orientation="horizontal"
android:weightSum="100" >
<TextView
android:id="#+id/main_item_cont"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/main_item_nmb"
android:paddingLeft="5dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/white" />
<ImageView
android:id="#+id/main_item_ic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#color/app_purple"
android:src="#drawable/bacal" />
<TextView
android:id="#+id/main_item_nmb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/main_item_ic"
android:background="#drawable/saric"
android:gravity="center"
android:textColor="#333333" />
</RelativeLayout>
<TextView
android:id="#+id/main_item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/main_item_bg"
android:layout_margin="5dp"
android:maxWidth="200dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/white" />
</RelativeLayout>
Try this
<?xml version="1.0" encoding="utf-8"?>
<ImageView
android:id="#+id/main_item_bg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:contentDescription="#string/app_name"
android:scaleType="fitXY" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="80dip"
android:gravity="center"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<TextView
android:id="#+id/main_item_cont"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:gravity="center"
android:paddingLeft="5dp"
android:text="dsgffdufsdfdfsdfdsfsdfsdfdsfdf"
android:inputType="textMultiLine"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/white" />
<ImageView
android:id="#+id/main_item_ic"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="5dip"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/main_item_cont"
android:background="#android:color/black"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/main_item_nmb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/main_item_cont"
android:layout_toRightOf="#+id/main_item_cont"
android:background="#android:color/white"
android:text="10"
android:textColor="#android:color/white" />
</RelativeLayout>
<TextView
android:id="#+id/main_item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/main_item_bg"
android:layout_margin="5dp"
android:maxWidth="200dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/white" />
As #Salauyou mentioned, try with android:layout_alignLeft because it "Makes the left edge of this view match the left edge of the given anchor view ID"
and android:layout_toLeftOf means "Positions the right edge of this view to the left of the given anchor view ID."
Now, this is what I achieved:
I used this picture in drawable-mdpi (as the badge) - note the trick of the dual background:
and the standard launcher icon, since I didn't have a wine glass icon handy.
This is my layout:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:layout_margin="0dp"
android:padding="0dp"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="0dp"
android:padding="4dp"
>
<TextView
android:id="#+id/txtIcon"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_alignParentRight="true"
android:gravity="center"
android:padding="4dp"
android:background="#6b2339"
android:drawableRight="#drawable/ic_launcher"
/>
<TextView
android:id="#+id/txtBadge"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_toLeftOf="#id/txtIcon"
android:gravity="center"
android:padding="4dp"
android:background="#drawable/wines_crossing_badge"
android:text="8"
android:textColor="#312c23"
android:textSize="16sp"
/>
<TextView
android:id="#+id/txtDesc"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/txtBadge"
android:background="#312c23"
android:gravity="left|center_vertical"
android:padding="4dp"
android:text="Available Androids in stock for rental"
android:textColor="#fff"
android:textSize="16sp"
/>
</RelativeLayout>
</RelativeLayout>
I want to center align my imageview with the above textview here's an image of what I'm getting.
I need something like this in a relative layout
<TextView
android:id="#+id/strength"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/hero_class"
android:textColor="#0095FF"
android:text="Strength"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/agility"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/hero_class"
android:layout_centerHorizontal="true"
android:text="Agility"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#0095FF" />
<TextView
android:id="#+id/intl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/agility"
android:layout_alignBottom="#+id/agility"
android:layout_alignParentRight="true"
android:text="Intelligence"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#0095FF" />
<ImageView
android:id="#+id/img_int"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/img_str"
android:src="#drawable/intelligence" />
<ImageView
android:id="#+id/img_agi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/img_int"
android:layout_centerHorizontal="true"
android:src="#drawable/agility" />
<ImageView
android:id="#+id/img_str"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/strength"
android:layout_alignParentLeft="true"
android:src="#drawable/strength" />
This is what i have done but the problem is that i can have the middle imageview centered align but the left and right one are with align to the most right and most left not in the center of above textview
In layout.xml you can use this for each Text+Image:
<TextView ...
android:text="The Text"
android:drawableBottom="#drawable/icon1" />
You could repeat it into an LinearLayout with the horizontal orientation
You can make three Relative Views each containing a Textview and Imageview posited one below the other with the ImageView in the cater of the parent Relative View.
Finally put these three within an outer Relative View to position them as you like.
Try to create three linear layouts with orietation vertical,
Each linear layout will contain textview and imageview with gravity center
You can use LinearLayout as parent Layout having android:orientation="horizontal".
and then use three LinearLayout each contains TextView and ImageView having android:orientation="vertical".
See below code-
<?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="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/strength"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/hero_class"
android:textColor="#0095FF"
android:text="Strength"
android:textAppearance="?android:attr/textAppearanceMedium" />
<ImageView
android:id="#+id/img_agi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/img_int"
android:layout_centerHorizontal="true"
android:src="#drawable/agility" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
TextView ImageView
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
TextView ImageView
</LinearLayout>
</LinearLayout>
Hope this helps:
<?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="match_parent"
android:background="#android:color/black" >
<RelativeLayout
android:id="#+id/reltive1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" >
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="TEXT VIEW"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/img1"
android:layout_width="60dp"
android:layout_height="80dp"
android:layout_below="#id/text1"
android:layout_centerHorizontal="true"
android:background="#android:color/white" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/reltive1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" >
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="TEXT VIEW"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/img2"
android:layout_width="60dp"
android:layout_height="80dp"
android:layout_below="#id/text2"
android:layout_centerHorizontal="true"
android:background="#android:color/white" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/reltive1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" >
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="TEXT VIEW"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/img3"
android:layout_width="60dp"
android:layout_height="80dp"
android:layout_below="#id/text3"
android:layout_centerHorizontal="true"
android:background="#android:color/white" />
</RelativeLayout>
</RelativeLayout>
This is what you want...
<LinearLayout
android:id="#+id/linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="TextView" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:id="#+id/linear2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imgView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imgView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imgView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
</LinearLayout>
Check if your ImageView is centered on your layout with this attribute:
android:layout_centerHorizontal="true"
For your TextView, it needs a reference to be aligned above it and also be centered.
So you need this:
android:layout_alignParentEnd="#+id/imageView"
android:layout_alignParentRight="#+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:gravity="center"
Create GridView adapter and your done.
I am trying to reduce the space between 2 columns, have tried using negative margins, but did not work. Is there a way to bring the 2 elements in the image closer ?
<?xml version="1.0" encoding="utf-8"?>
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:useDefaultMargins="true"
android:alignmentMode="alignBounds"
android:columnOrderPreserved="false"
android:layout_gravity="center"
android:orientation="horizontal"
android:stretchMode="columnWidth"
android:background="#color/orange"
android:textSize="12sp"
android:columnCount="8">
<ImageButton
android:id="#+id/settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="1"
android:layout_gravity="left"
android:src="#drawable/settings" />
<TextView
android:id="#+id/currentCityName"
android:layout_column="2"
android:textSize="22sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="City name"
android:layout_columnSpan="4"
android:layout_gravity="center_horizontal"
/>
<ImageButton
android:id="#+id/refresh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="7"
android:layout_columnSpan="1"
android:layout_gravity="right"
android:src="#drawable/reload" />
<ImageView
android:id="#+id/currentWeatherImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="8"
android:layout_rowSpan="3"
android:layout_gravity="center_horizontal"
android:src="#drawable/cloud" />
<ImageView
android:id="#+id/humidityIcon"
android:layout_width="20dp"
android:paddingTop="10dp"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:layout_marginRight="0dp"
android:layout_gravity="left"
android:background="#000000"
android:src="#drawable/humidity" />
<TextView
android:id="#+id/humidity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
android:paddingTop="10dp"
android:paddingLeft="0dp"
android:layout_marginLeft="0dp"
android:layout_gravity="left"
android:background="#FFFFFF"
/>
<TextView
android:id="#+id/temperature"
android:layout_columnSpan="4"
android:layout_rowSpan="2"
android:textSize="49sp"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp"
android:layout_gravity="center_horizontal"/>
<ImageView
android:id="#+id/windSpeedIcon"
android:layout_width="30dp"
android:layout_marginRight="1dp"
android:paddingRight="1dp"
android:layout_gravity="right"
android:src="#drawable/wind" />
<TextView
android:id="#+id/windSpeed"
android:textSize="12sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
/>
<!-- android:layout_width="40dp" -->
<TextView
android:id="#+id/precipitationIcon"
android:textSize="28sp"
android:layout_width="40dp"
/>
<TextView
android:id="#+id/precipitation"
android:layout_column="0"
android:textSize="13sp"
android:layout_width="40dp"
/>
<TextView
android:id="#+id/windDirection16Point"
android:textSize="13sp"
android:layout_width="80dp"
android:layout_columnSpan="2"
/>
<TextView
android:id="#+id/weatherDescription"
android:layout_gravity="center_horizontal"
android:layout_row="7"
android:layout_columnSpan="8"/>
<TextView
android:id="#+id/section_label"
android:layout_margin="5dp"
android:layout_columnSpan="8" />
<EditText
android:minLines="4"
android:maxLines="4"
android:id="#+id/edit"
android:layout_columnSpan="8"/>
I suggest implementing the entire view using a RelativeLayout, should be the best solution for the entire view.
You are tackling the wrong problem – you are asking how to reduce the space between columns in a grid layout, but maybe you should’t have used such a layout in the first place!
What you should have been using for your specific layout, is a combination of relative positioning and compound drawables (here, with android:drawableStart).
<?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="80dp"
android:background="#d89018"
android:paddingBottom="4dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="4dp"
>
<TextView
android:id="#+id/temperature"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:text="25 ℃"
android:textColor="#fff"
android:textSize="49sp"
/>
<TextView
android:id="#+id/humidity"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:drawableStart="#drawable/humidity"
android:gravity="center_vertical"
android:text="83 %"
android:textColor="#fff"
/>
<TextView
android:id="#+id/windSpeed"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:drawableStart="#drawable/wind"
android:gravity="center_vertical"
android:text="19 km/h"
android:textColor="#fff"
/>
<TextView
android:id="#+id/precipitation"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:drawableStart="#drawable/precipitation"
android:gravity="center_vertical"
android:text="0.1 mm"
android:textColor="#fff"
/>
<TextView
android:id="#+id/windDirection16Point"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignLeft="#id/windSpeed"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:drawableStart="#drawable/windDirection"
android:gravity="center_vertical"
android:text="NNW"
android:textColor="#fff"
/>
</RelativeLayout>
Not only this layout is simpler, you also let Android take care of all the spacing for you. To change the spacing between the compound drawable and the text, use android:drawablePadding in the layout’s code above; in Java code, that would be TextView.setCompoundDrawablePadding).
Icons used for the sample: water, windsock, rainy-weather and wind-rose.
I think what's happening is that your Views are being stretched because they are trying to match the width of another view in their columns.
Try decreasing the columnSpan of your Views or separate your layout into two separate GridLayouts.
Or, consider using a different layout altogether. I would recommend RelativeLayout here instead of GridLayout, but I don't know how this fits into a larger window.
try this:
<?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="100dp">
<LinearLayout
android:id="#+id/col1"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2.4"
>
<LinearLayout
android:id="#+id/col1_row1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="83%"/>
</LinearLayout>
<LinearLayout
android:id="#+id/col1_row2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1.0mm"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/col2"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2.0"
android:gravity="center"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="25'"
android:textSize="50dp"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/col3"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2.4"
>
<LinearLayout
android:id="#+id/col3_row1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="19Km"/>
</LinearLayout>
<LinearLayout
android:id="#+id/col3_row2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="NNW"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
I think you should change usedefaultMargins to false and give your own margins to the elements.
android:useDefaultMargins="false";
Hai all I am new in android programming.....
For my application I am using image button and it successfully
installed on the device. But when I rotate the screen all the button
position get changed... and I need all the button placed at centre
of the screen.... And here is my code....
<TextView
android:id="#+id/testText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFCC99"
android:textSize="24dp" />
<ImageButton
android:id="#+id/up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="124dp"
android:layout_marginTop="80dp"
android:src="#drawable/up" />
<ImageButton
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_below="#+id/up"
android:layout_marginRight="200dp"
android:layout_marginTop="150dp"
android:src="#drawable/left" />
<ImageButton
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_below="#+id/up"
android:layout_marginRight="50dp"
android:layout_marginTop="150dp"
android:src="#drawable/right" />
<ImageButton
android:id="#+id/down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/up"
android:layout_alignParentRight="true"
android:layout_marginRight="124dp"
android:layout_marginTop="80dp"
android:src="#drawable/down" />
Please help............
Set android:gravity to center.
The following layout will do for you:
<?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:gravity="center"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cool Button" />
</LinearLayout>
There are other ways to do it.
1. Using relative layout
2. Using 2 layouts : 1 one for portrait and and 1 for landscape.
You have to put all your widgets in a single container (LinearLayout) and center it. For that you can use the gravity attribute.
You can check this page:
http://developer.android.com/guide/topics/ui/layout/linear.html
I've made some modifications to your code. Please check whether this is the desired one.
<?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"
android:gravity="center_horizontal"
android:orientation="vertical" >
<TextView
android:id="#+id/testText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center_horizontal"
android:text="Sample text"
android:textColor="#FFCC99"
android:textSize="24dp" />
<ImageButton
android:id="#+id/up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/up" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageButton
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_gravity="left"
android:src="#drawable/left" />
<ImageButton
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="right"
android:src="#drawable/right" />
</RelativeLayout>
<ImageButton
android:id="#+id/down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/down" />
</LinearLayout>