I have 5 buttons on tab widget, 2 from left and 2 from right are the same size as background of tabwidget. The central button needs to be twice higher than tabwidget.
if I put all buttons into tabhost, tabhost's size rises equels to the biggest button (central button).
How to prevent it?
I want to make something like this. The background height of tabbar needs to be equel to red square's height.
Yes, you can do this by following Xml code -
center_tab_indicator.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dip"
android:layout_height="65dip"
android:layout_weight="1"
android:orientation="vertical"
android:background="#drawable/center_tab_indicator"
android:padding="5dp">
<ImageView android:id="#+id/icon"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/camera"
android:scaleType="center"/>
</RelativeLayout>
tab_indicator.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dip"
android:layout_height="55dip"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginTop="10sp"
android:background="#drawable/tab_indicator"
android:padding="5dp">
<ImageView android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/icon" />
<TextView android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
style="?android:attr/tabWidgetStyle"
/>
</RelativeLayout>
By use of above two XML You can get your desired output. For more, have a look at here You will get an out put like below -
Have a look at that. There will be sample project also available. Hope it helps you.
Related
I am trying to design a layout ( basically a splash screen ) which shows the App logo in almost middle of the screen and the company tagline under the logo on the start of the App. While working in Android Studio the design of layout looks like this. I positioned it 200dp downwards from the top.
As you can see, logo is right in the middle of the screen.
But when i run the app on my emulator the screen appears like this.The logo is not at the exact position where i wanted it.
I want my logo at the same relative position, no matter how big the screen size is.
Assume if logo is positioned at 200dp at 1000dp long screen. i want it at 400dp position on a 2000dp screen size.
Simulator : 5.0.0 API-21 768 X 1280
What are the possible solutions ??
Following image contains both outputs.
Follow this Link for the image
Here is the XML code :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f84343"
android:weightSum="1">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/AppIcon"
android:src="#drawable/unnamed"
android:layout_marginTop="200dp"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/simpler_better_faster"
android:id="#+id/textView"
android:layout_gravity="center_horizontal"
android:layout_below="#+id/AppIcon"
android:layout_centerInParent="true"
android:layout_marginTop="50dp"
android:textColor="#ffffff"
android:textSize="20dp" />
</RelativeLayout>
You don't need to use a <RelativeLayout> to achieve that. Below is the code using a <LinearLayout>. The key here is android:gravity="center" in the <LinearLayout> element:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f84343"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:id="#+id/AppIcon"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/unnamed"/>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="#string/simpler_better_faster"
android:textColor="#ffffff"
android:textSize="20dp"/>
</LinearLayout>
[EDIT]
OP - But if i go on using more widgets to the screen i might need to
position them relative to each other. how to overcome that with
Relative layout
Well, technically you can still add more widgets in their required order. But, if you really want to use a <RelativeLayout>, you can use something like:
<?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="#f84343"
android:gravity="center_vertical">
<ImageView
android:id="#+id/AppIcon"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:src="#drawable/unnamed"/>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_below="#id/AppIcon"
android:text="#string/simpler_better_faster"
android:textColor="#ffffff"
android:layout_centerHorizontal="true"
android:textSize="20dp"/>
</RelativeLayout>
It looks like you've mixed up some RelativeLayout/LinearLayout attributes.
If you want to use RelativeLayout remove and modify some attributes.
Something like this instead
<?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="#f84343">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/AppIcon"
android:src="#drawable/unnamed"
android:layout_centerInParent="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/simpler_better_faster"
android:layout_below="#id/AppIcon"
android:id="#+id/textView"
android:layout_marginTop="50dp"
android:textColor="#ffffff"
android:textSize="20dp" />
</RelativeLayout>
Simplify it all down into a TextView if you ask me
<?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="#f84343" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/simpler_better_faster"
android:drawableTop="#drawable/arrow_right_fill_dark" />
</RelativeLayout>
This gets rid of the ImageView all together, the change being the drawableTop attribute that provides a drawable, centered above the text.
I´m trying to code my first android-app. I read a lot, but I have problems with the layout.
What is wrong in both xml?
For a better understanding, I have made a picture:
My XML for main.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"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2.5"
android:contentDescription="#string/upload"
android:scaleType="fitCenter"
android:visibility="visible" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/btnShoot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:text="#string/shoot_again" />
</LinearLayout>
</LinearLayout>
for main.xml in the folder layout-land, If i switch to the landscape-Mode the app crashes:
<?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"
android:orientation="horizontal" >
<Button
android:id="#+id/btnShoot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:text="#string/shoot" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/upload"
android:scaleType="fitCenter"
android:visibility="visible" />
</LinearLayout>
Okay, just looking at your XML, there are a few issues:
Portrait XML:
< ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2.5"
Here, you've set both a weight and a height - in a LinearLayout you can't have both. Either you set the height yourself, or you give it a height of 0dp and a weight, then let the LinearLayout assign the height. As for why it's rotated, the image itself might be rotated in your resources.
Horizontal XML:
Your root LinearLayout still needs to have a vertical orientation
Your ImageView needs to be declared above your Button
What's happening is that a) it's horizontal, b) your button is getting put on first, and c) your button has a android:layout_width="match_parent", which means the ImageView has nowhere to be put, as your Button is already taking up all of the space on screen (can you see why this is case?)
Make these changes, then update your question as appropriate, as I think that your problems will have changed
I'm making a layout (XML file) in Android that has two child views (one on the right side of the screen and one on the left). I want the view on the right to take up a pre-determined space (in dp) and have the view on the left take up all the remaining space up to a limit, at which point it will stop expanding and the two layouts will just move further apart as the screen gets larger.
The odd thing is this would be very easy if I wanted the view on the right side to be the one that expands, and the view on the left to be the one that takes up a preset space. If you set each view to the width you want (in a horizontal linear layout) Android will automatically shrink the one on the left in the event that both views don't fit.
I would like to do this in one layout file; this layout is already designed for displays between sw512dp-land and sw765dp-land.
The code below would work if I could find a way to make Android shrink the layout on the left (when layouts both cannot fit at the size specified). But by default the system will shrink the layout on the right first.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<RelativeLayout
android:id="#+id/left"
android:layout_width="150dip"
android:layout_height="fill_parent"
android:background="#color/red" >
</RelativeLayout>
<LinearLayout
android:id="#+id/right"
android:layout_width="100dip"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#color/green" >
</LinearLayout>
This code (from #Lokesh) would work if I didn't need the layout on the left to stop expanding at a certain point.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/left"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_toLeftOf="#+id/right"
android:background="#color/red" >
</LinearLayout>
<LinearLayout
android:id="#+id/right"
android:layout_width="100dip"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#color/green" >
</LinearLayout>
It would also be nice to know if anyone thinks this isn't possible so I can resort to doing it pragmatically or changing my approach to the layout.
Thanks!
This works for me. I've set the right layout to 100dip, change as per your needs.
<?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="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/left"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_toLeftOf="#+id/right"
android:background="#color/red" >
</LinearLayout>
<LinearLayout
android:id="#+id/right"
android:layout_width="100dip"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#color/green" >
</LinearLayout>
</RelativeLayout>
EDIT 1: I used the background color just to distinctly show the layouts. Not necessary at all. :)
EDIT 2: If you want a way to expand the left layout upto only a limit then try this -
<?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="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/left"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_toLeftOf="#+id/right">
<LinearLayout
android:id="#+id/inner"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#color/yellow">
<TextView
android:id="#+id/myTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This will expand only to a limit"
android:maxWidth="300dip"
android:textAppearance="?android:attr/textAppearanceLarge"
android:background="#color/red" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/right"
android:layout_width="100dip"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#color/green" >
</LinearLayout>
</RelativeLayout>
Here you need to place your widgets in inner layout and this is what it looks like in different screens.
3.1in HVGA
5.2in QVGA
Colors used : red(#FFFF00), yellow(#FFFFFF00), green(#FF00FF00).
I am looking for a way to place a button on a specific spot with the help of XML.
I want the button in question to be placed in the middle of the screen, only abit down.
This I would like to be working even when changing screen densities.
I have tried using android:layout_marginLeft="10dp", but it doesnt show up at the same position when i lower the densities from 240 till 120. It says on androids dev page that dp should be used and will scale with the screen, which in this case doesnt seem to be.
Got the following code atm for the button:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/yowie_meny_utan_knappar">
<Button
android:id="#+id/Button04"
android:layout_width="100dp"
android:layout_height="73dp"
android:layout_gravity="center"
android:layout_marginTop="200dp"
android:layout_marginLeft="50dp"
android:background="#drawable/play_button"
>
</Button>
Check out the below code which places the button exactly at the middle of the screen :
<?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="fill_parent"
>
<Button
android:layout_centerInParent="true"
android:text="Button" android:id="#+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>
</RelativeLayout>
If I still want the Button to be a little bit down from the middle, the one good way I know is to use an empty text view as a reference point for the button.
<?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="fill_parent"
>
<TextView android:layout_centerInParent="true" android:layout_width="wrap_content" android:id="#+id/textView1"
android:layout_height="wrap_content" android:text=" " ></TextView>
<Button
android:layout_marginTop="5dip"
android:layout_centerHorizontal="true"
android:text="Button" android:layout_below="#id/textView1" android:id="#+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>
</RelativeLayout>
Change the value of android:layout_marginTop="5dip" to your convenience.
I have made layout for custom dialog, it has inside two imageview. I want to show both Imageview when dialog appear. and i want to hide the main layout of my xml file I have used "#00000000" as background:color, but it is not working.
Is there any way to do the same?
Thanks.
Here is my layout. I have taken screen shot please have a look i want to hide the border which are showing in image.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent" android:layout_width="fill_parent"
android:orientation="vertical" android:background="#00000000">
<LinearLayout android:id="#+id/linearLayout1"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
<ImageView android:id="#+id/img_closeimage" android:src="#drawable/product_zoom_close"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:clickable="true"></ImageView>
</LinearLayout>
<LinearLayout android:id="#+id/linearLayout2"
android:layout_marginLeft="25dip" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_marginTop="-5dip" android:layout_marginBottom="20dip" android:layout_marginRight="20dip">
<ImageView android:id="#+id/img_ProductZoom" android:src="#drawable/index"
android:layout_width="wrap_content" android:layout_height="wrap_content"
></ImageView>
</LinearLayout>
</LinearLayout>
image description here
Adinias comment is correct, your layout has quite some redundancy. You also say that you only want to show an imageview, but your layout contains two imageviews. If you only want to show one imageview, then your layout should look like this:
<?xml version="1.0" encoding="utf-8"?>
<ImageView android:id="#+id/img_ProductZoom" android:src="#drawable/index"
android:layout_width="wrap_content" android:layout_height="wrap_content"
/>
If you want to show two ImageViews, use this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent" android:layout_width="fill_parent"
android:orientation="vertical" android:background="#00000000">
<ImageView android:id="#+id/img_closeimage" android:src="#drawable/product_zoom_close"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:clickable="true"/>
<ImageView android:id="#+id/img_ProductZoom" android:src="#drawable/index"
android:layout_width="wrap_content" android:layout_height="wrap_content"
/>
</LinearLayout>
Your current layout looks the way it does because you have specified the layout to take as much space as possible with android:layout_height="fill_parent" and android:layout_width="fill_parent". Try to use wrap_content as height and width instead.