Im quite new to android I have an Image view and a seekbar,the user is allowed to load image which is displayed in the image view,the seek bar should be just below the image view.I have the following code in Main.xml
<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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="148dp"
android:src="#drawable/ic_launcher" />
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView1"
android:layout_marginTop="95dp"
/>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignRight="#+id/imageView1"
android:layout_marginRight="30dp"
android:layout_marginTop="78dp"
android:text="TextView" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="31dp"
android:text="Button"
android:onClick="clickme"
/>
</RelativeLayout>
The problems is when i load an Image of different size the seekbar is covered by the image view.I think i should resize the image or set some property of the imageview like 'Strech' in C# so that a proper layout is maintained.Can some one show me the right path
android:layout_width="wrap_content"
android:layout_height="wrap_content"
These properties in your imageview is causing the imageview to enlarge.
use android:adjustViewBounds
Change the alignment of the image view as above the seekbar, something like this:
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="148dp"
android:layout_above="#+id/seekBar1"
android:src="#drawable/ic_launcher" />
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_above="#+id/textView1"
android:layout_marginTop="95dp"
/>
In this way you force the image view to be always above the seek bar.
Simple solution using LinearLayout:
<?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="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:layout_gravity="center"
android:text="TextView"/>
<ImageView
android:id="#+id/imageView1"
android:layout_width="256dp"
android:layout_height="256dp"
android:layout_marginTop="20dp"
android:layout_gravity="center"
android:src="#drawable/ic_launcher"/>
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_gravity="center"
/>
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="31dp"
android:layout_gravity="center"
android:text="Button"
android:onClick="clickme"
/>
</LinearLayout>
Note the android:layout_gravity="center", and that I added a dummy View with a layout_weight so that it fills up the space above the Button; so the Button stays at the bottom.
UPDATE: updated the individual margins
the easiest way will be:
<Seekbar android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_below="#+id/YouImageViewID"/>
Jus try RelativeLayout, here is partial code
<RelativeLayout
android:layout_width="100dp"
android:layout_height="100dp"
android:gravity="center"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:src="#drawable/androidbiancheng"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/icon"
/>
<ProgressBar
android:id="#+id/progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
/>
</RelativeLayout>
Related
I have tried placing image(imageBottom) below scroll view(scrollView) but it is overlapping left bottom corner of scroll view.
I have also tried attribute layout_below in imageview but this trick dint worked.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/myLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.rohitkumar.androidtutorial.MainActivity">
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/imageIcon"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="#string/TextString"
android:textSize="32sp" />
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/textView1"
android:layout_marginBottom="30dp"
android:layout_marginTop="10dp">
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/longText"
android:textSize="20sp" />
</ScrollView>
<ImageView
android:id="#+id/imageIcon"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:contentDescription=""
app:srcCompat="#drawable/course1" />
<ImageView
android:id="#+id/imageBottom"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:contentDescription="#string/course_image"
android:src="#drawable/image_1" />
</RelativeLayout>
Create a relative layout and place the textview and image icon within it:
<RelativeLayout
android:id="#+id/rl1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
>
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/imageIcon"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="#string/TextString"
android:textSize="32sp" />
<ImageView
android:id="#+id/imageIcon"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:contentDescription=""
app:srcCompat="#drawable/course1" />
</RelativeLayout
Add android:layout_above="#+id/imageBottom" and android:layout_below="#+id/rl1"in your scrollview
You want to scroll only textview than you dont need any scroll view,you can make textview scroll like this:
Just set the
android:maxLines = "AN_INTEGER"
android:scrollbars = "vertical"
properties of your TextView in your layout's xml file.
Then use:
yourTextView.setMovementMethod(new ScrollingMovementMethod());
in your code.
And Add android:layout_above="#+id/imageBottom" to your textView and android:layout_below="#+id/textView1" remove scroll view layout
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_centerHorizontal="true"
android:layout_above="#+id/imageBottom"
android:gravity="center"
android:text="#string/TextString"
android:textSize="32sp" />
Try this out.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/myLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
>
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/imageIcon"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="hi"
android:textSize="32sp" />
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_above="#+id/imageBottom"
android:layout_below="#+id/textView1"
android:layout_marginBottom="30dp"
android:layout_marginTop="10dp">
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""
android:textSize="20sp" />
</ScrollView>
<ImageView
android:id="#+id/imageBottom"
android:layout_alignParentBottom="true"
android:layout_width="100dp"
android:layout_height="100dp"
/>
<ImageView
android:id="#+id/imageIcon"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:contentDescription=""
/>
</RelativeLayout>
#Rohit Kumar you just add this line in scroll view android:layout_above="#+id/imageBottom"and android:layout_below="#+id/textView1"
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/myLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.rohitkumar.androidtutorial.MainActivity">
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/imageIcon"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="Title"
android:textSize="32sp" />
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/imageBottom"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/textView1"
android:layout_marginBottom="30dp"
android:layout_marginTop="10dp">
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="this is a simple paragraph that is meant to be nice and easy to type which is why there will be mommas no periods or any capital letters so i guess this means that it cannot really be considered a paragraph but just a series of run on sentences this should help you get faster at typing as im trying not to use too many difficult words in it although i think that i might start making it hard by including some more difficult letters I'm typing pretty quickly so forgive me for any mistakes i think that i will not just tell you a story about the time i went to the zoo and found"
android:textSize="20sp" />
</ScrollView>
<ImageView
android:id="#+id/imageIcon"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:contentDescription="test"
app:srcCompat="#mipmap/ic_launcher" />
<ImageView
android:id="#+id/imageBottom"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:src="#mipmap/ic_launcher" />
</RelativeLayout>
Currently my listview design looks like
But I want to make it look like below image
Where image will be on right hand side, title in Bold and Subtitle just below it. What changes do I need to make in my layout, Below is my code. Thanks in
advance.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="4dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/ivImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:src="#drawable/ic_launcher"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tom Cruise"
android:textColor="#166CED"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</LinearLayout>
<TextView
android:id="#+id/tvDescriptionn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#009A57"
android:text="Description" />
</LinearLayout>
For better result to manage your view use relativelayout.
You can manage your layout as example give below-
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="4dp"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
card_view:cardBackgroundColor="#color/grey">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="5dp"
android:src="#drawable/arrow"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/arrow"
android:orientation="vertical" >
<TextView
android:id="#+id/tvName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Murdochs needed counselling after hacking scandle says magazine"
android:textColor="#166CED"
android:padding="5dp"
android:textAppearance="?android:attr/textAppearanceLarge" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/tvSubtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/ivImage"
android:padding="5dp"
android:text="NEW YORK:The British phone hacking scandle"
android:textColor="#000"
android:textAppearance="?android:attr/textAppearanceSmall" />
<ImageView
android:id="#+id/ivImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:src="#drawable/ic_launcher"/>
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
I would suggest you to use relative layout . this will make your layout more flexible to edit. I have suggested a layout below , give it a try .
<?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">
<TextView
android:id="#+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:gravity="center_horizontal"
android:text="Tom Cruse"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#166CED" />
<ImageView
android:id="#+id/ivImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_below="#+id/tvName"
android:layout_margin="5dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/tvDescriptionn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="#+id/tvName"
android:layout_margin="10dp"
android:layout_toLeftOf="#+id/ivImage"
android:text="Description"
android:textColor="#009A57" />
</RelativeLayout>
Please do accept this answer if it worked for you.
You have to use flowTextView jar to your project. Here you can find the jar:
https://github.com/deano2390/FlowTextView
Inside LinearLayout, place textview at the top to show the title. Make height wrap_content and width match_parent.
Below this, add linearlayout which contains textview and image. set orientation horizontal to inner liner layout.
For better placing you can always used relative layout. for example
<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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.testlayout.MainActivity" >
<TextView
android:id="#+id/titleText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
<TextView
android:id="#+id/descriptionText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/titleText"
android:text="description"/>
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/titleText"
android:layout_toLeftOf="#+id/rightArrow"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/rightArrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/titleText"
android:src="#drawable/ic_launcher"
android:layout_alignParentEnd="true" />
</RelativeLayout>
I am currently making a band app for some work I have and have made a card view which will show the band members along with an image this works fine but after I created it I wanted to add stuff outside the card view and once I add for example an image view the card view and its contents disappears. Any ideas?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.package.test.band.MainActivity"
tools:showIn="#layout/app_bar_main"
android:orientation="horizontal">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/menu_bg_banner" />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="150dp"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
>
<TextView
android:id="#+id/member1_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Member 1"
android:layout_alignParentTop="true"
android:textSize="30sp"
/>
<TextView
android:id="#+id/member1_job"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Guitar and Vocals"
android:layout_marginTop="40dp"
android:layout_below="#+id/member1_name"
android:layout_alignParentTop="true"
android:textSize="20sp"
/>
<ImageView
android:id="#+id/content_memeber1"
android:layout_toRightOf="#+id/member1_name"
android:scaleType="centerInside"
android:src="#drawable/content_member1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:layout_marginTop="115dp"
>
<TextView
android:id="#+id/member2_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="member2"
android:layout_alignParentTop="true"
android:textSize="30sp"
/>
<TextView
android:id="#+id/member2_job"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bass"
android:layout_marginTop="40dp"
android:layout_below="#+id/member2_name"
android:layout_alignParentTop="true"
android:textSize="20sp"
/>
<ImageView
android:id="#+id/content_member2"
android:layout_toRightOf="#+id/member2_name"
android:scaleType="centerInside"
android:src="#drawable/content_member2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:layout_marginTop="225dp"
>
<TextView
android:id="#+id/member3_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="member3"
android:layout_alignParentTop="true"
android:textSize="30sp"
/>
<TextView
android:id="#+id/member3_job"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Drummer"
android:layout_marginTop="40dp"
android:layout_below="#+id/member3_name"
android:layout_alignParentTop="true"
android:textSize="20sp"
/>
<ImageView
android:id="#+id/content_member3"
android:layout_toRightOf="#+id/member3_name"
android:scaleType="centerInside"
android:src="#drawable/content_member3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
</RelativeLayout>
your linearlayout orientation is horizontal and you make your image match parent width so automatically the cardview will be outside the screen
I am currently working on a sample application using android studio. I need to design diamond shaped buttons and view them as follows (Screenshots attached). But I don't have an idea how to make this kind of thing with android.
There are be four diamond shaped buttons, and they are be aligned as according to the following screenshot.
Screenshot:
Here is sample code adjust margins according to devices you can use imageView instead buttons
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/firstRow"
android:rotation="-30"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:text="Button 2"
android:id="#+id/button2" />
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:text="Button 1"
android:id="#+id/button1"/>
</LinearLayout>
<LinearLayout
android:id="#+id/secondRow"
android:layout_below="#+id/firstRow"
android:rotation="-30"
android:layout_marginTop="24dp"
android:layout_marginLeft="68dp"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:text="Button 4"
android:id="#+id/button4" />
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:text="Button 3"
android:id="#+id/button3"/>
</LinearLayout>
</RelativeLayout>
The easiest way is use .png archives on ImageButtons and display them on a RelativeLayout. You can change positions and adjust them as you wish. If you set the android:background="#android:color/transparent" you can set your form, by playing with the margins (android:layout_marginRight="", android:layout_marginTop="", etc.)
With that I got this:
This is the code I used; it's only necessary .xml, without programmatic changes:
<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"
android:background="#android:color/holo_purple"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="39dp"
android:background="#android:color/transparent"
android:contentDescription="#string/im"
android:src="#drawable/diamond" />
<ImageButton
android:id="#+id/ImageButton03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageButton1"
android:layout_centerVertical="true"
android:background="#android:color/transparent"
android:contentDescription="#string/im"
android:src="#drawable/diamond" />
<ImageButton
android:id="#+id/ImageButton04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/ImageButton03"
android:layout_below="#+id/imageButton1"
android:layout_marginRight="55dp"
android:layout_marginTop="47dp"
android:background="#android:color/transparent"
android:contentDescription="#string/im"
android:src="#drawable/diamond" />
<ImageButton
android:id="#+id/ImageButton02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/ImageButton03"
android:layout_alignRight="#+id/ImageButton04"
android:layout_marginBottom="66dp"
android:layout_marginRight="5dp"
android:background="#android:color/transparent"
android:contentDescription="#string/im"
android:src="#drawable/diamond" /></RelativeLayout>
Hope it helps.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/splash2"
tools:context="com.example.sv.myfoodapplication.view.SplashActivity">
<LinearLayout
android:id="#+id/sp_breakfast"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_above="#+id/sp_desert"
android:layout_alignStart="#+id/sp_vegetable"
android:layout_marginBottom="43dp"
android:orientation="vertical"
android:gravity="center"
android:background="#drawable/shape_diamond">
</LinearLayout>
<LinearLayout
android:id="#+id/sp_meat"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignBottom="#+id/sp_vegetable"
android:layout_alignStart="#+id/sp_desert"
android:layout_marginBottom="80dp"
android:orientation="vertical"
android:gravity="center"
android:background="#drawable/shape_diamond" >
</LinearLayout>
<LinearLayout
android:id="#+id/sp_vegetable"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignBottom="#+id/sp_desert"
android:layout_alignParentStart="true"
android:layout_marginBottom="83dp"
android:layout_marginStart="19dp"
android:orientation="vertical"
android:gravity="center"
android:background="#drawable/shape_diamond" >
</LinearLayout>
<LinearLayout
android:id="#+id/sp_desert"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp"
android:orientation="vertical"
android:gravity="center"
android:background="#drawable/shape_diamond">
</LinearLayout>
</RelativeLayout>
I have this layout file:
<?xml version="1.0" encoding="utf-8"?>
<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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<RelativeLayout
android:id="#+id/visual_compass_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_margin="0dp"
android:padding="0dp" >
<ImageView
android:id="#+id/visual_compass"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:contentDescription="#string/visual_compass"
android:scaleType="fitCenter"
android:src="#drawable/compass_1000x1000_white" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/visual_compass_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/visual_compass_value_default"
android:textColor="#ddd"
android:textSize="#dimen/visual_compass_value_text_size" />
<TextView
android:id="#+id/visual_compass_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/measured_bearing"
android:textColor="#aaa"
android:textSize="#dimen/visual_compass_info_text_size" />
</LinearLayout>
</RelativeLayout>
<View
android:id="#+id/placeholder"
android:layout_width="25dp"
android:layout_height="match_parent"
android:layout_toRightOf="#+id/visual_compass_container"
android:visibility="visible"
android:background="#android:color/darker_gray" />
<LinearLayout
android:id="#+id/advanced_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/placeholder"
android:background="#dfff"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingLeft="30dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
android:visibility="visible" >
<TextView
android:id="#+id/advanced_measured"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="#string/measured_bearing_default"
android:textSize="#dimen/advanced_measured_text_size_land" />
<TextView
android:id="#+id/advanced_latitude"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="#string/latitude_default"
android:textIsSelectable="true"
android:textSize="#dimen/advanced_info_text_size_land" />
<TextView
android:id="#+id/advanced_longitude"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="#string/longitude_default"
android:textIsSelectable="true"
android:textSize="#dimen/advanced_info_text_size_land" />
<TextView
android:id="#+id/advanced_altitude"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="#string/longitude_default"
android:textIsSelectable="true"
android:textSize="#dimen/advanced_info_text_size_land" />
<TextView
android:id="#+id/advanced_accuracy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="#string/accuracy_default"
android:textIsSelectable="true"
android:textSize="#dimen/advanced_info_text_size_land" />
<TextView
android:id="#+id/advanced_declination"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="#string/declination_default"
android:textIsSelectable="true"
android:textSize="#dimen/advanced_info_text_size_land" />
<TextView
android:id="#+id/advanced_inclination"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:text="#string/inclination_default"
android:textIsSelectable="true"
android:textSize="#dimen/advanced_info_text_size_land" />
</LinearLayout>
</RelativeLayout>
And the result (API level 17, Galaxy S3) is this:
The Result http://xml.pfweb.eu/a.png
As you can see above, I didn't set any margins or paddings... So why is there an empty space between the placeholder view (dark grey) and the compass rose image?
That's a big problem because it causes the '46°' not the center correctly.
I am unuable to see why the relative layout doesn't wrap it's content, however to have the text in the center you could do following:
<ImageView
android:id="#+id/visual_compass"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:contentDescription="#string/visual_compass"
android:scaleType="fitCenter"
android:src="#drawable/compass_1000x1000_white" />
So instead of having the compass image in top left corner using:
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
you would simply center it. I know it's not ideal, but it's the only solution I see at the moment.
EDIT: I didn't figure out what exactly causes the problem, but it has something to do with the enclosing Relative layout. As soon as I change the layout to Linear the problem disappear. In fact horizontal LinearLayout is probably the best option here as you stack your items from left to right.
Here's final look: