Hy!
I want to have have a layout like this:
The problem is i don't know what to use:
Gridview?
TableLayout?
LinearLayout with PictureViews?
The Pictures should be oriented in the middle of the screen(horicontal & vertikal)
Please add some code example in your answers.
thx
one way can do this type of layout
<?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:orientation="vertical" android:gravity="center_horizontal|center_vertical">
<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content">
<ImageView android:layout_width="150dp" android:layout_height="150dp"
android:layout_weight="1" android:background="#drawable/bg_img"
android:layout_margin="5dp"/>
<ImageView android:layout_width="150dp" android:layout_height="150dp"
android:layout_weight="1" android:background="#drawable/bg_img"
android:layout_margin="5dp"/>
</LinearLayout>
<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content">
<ImageView android:layout_width="150dp" android:layout_height="150dp"
android:layout_weight="1" android:background="#drawable/bg_img"
android:layout_margin="5dp"/>
<ImageView android:layout_width="150dp" android:layout_height="150dp"
android:layout_weight="1" android:background="#drawable/bg_img"
android:layout_margin="5dp"/>
</LinearLayout>
</LinearLayout>
i used this image download from here, image is too big but this was test only you can use your images just replace the background src in imageview in each or as per your requirement.
and you get the result like this way
Please use below linearlayout with Imageview..Main trick is hot use weight in linearlayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout android:id="#+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1">
<ImageView android:id="#+id/imageView1" android:layout_width="fill_parent" android:layout_weight="1" android:layout_height="fill_parent" android:background="#drawable/icon"></ImageView>
<ImageView android:id="#+id/imageView2" android:layout_weight="1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#drawable/icon"></ImageView>
</LinearLayout>
<LinearLayout android:id="#+id/linearLayout2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1">
<ImageView android:id="#+id/imageView3" android:layout_width="fill_parent" android:layout_weight="1" android:layout_height="fill_parent" android:background="#drawable/icon"></ImageView>
<ImageView android:id="#+id/imageView4" android:layout_width="fill_parent" android:layout_weight="1" android:layout_height="fill_parent" android:background="#drawable/icon"></ImageView>
</LinearLayout>
</LinearLayout>
Related
I doing a project where I have to display arrow on a map which is a picture. The base map will will stretch or compressed when different screen is used. However the position of arrow still remain the same. Is that any way to make the arrow follow the map ?
Image 1 is when i use a smaller screen while image 2 is when i use a larger scrren
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context="com.example.window8.rescape.Escape"
android:id="#+id/main"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/background"
android:background="#drawable/basebase" />
<ImageView
android:layout_width="50dp"
android:layout_height="60dp"
android:id="#+id/pointer"
android:layout_gravity="bottom"
android:background="#drawable/pointer"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="198dp" />
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:id="#+id/imageView2"
android:background="#drawable/arrow4"
android:layout_marginLeft="68px" />
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:id="#+id/imageView"
android:background="#drawable/arrow2"
android:layout_marginLeft="80px" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"></LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"></LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"></LinearLayout>
</LinearLayout>
</RelativeLayout>
For the LinearLayout that contains the arrows add 2 LinearLayouts. one before the 1st arrows and another one between the arrows. Also, add weight sum to the parent LinearLayout as follow:
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:layout_weightSum="100">
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_weight="10"
android:layout_height="fill_parent"/>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:id="#+id/imageView2"
android:background="#drawable/arrow4"
android:layout_marginLeft="68px" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_weight="10"
android:layout_height="fill_parent"/>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:id="#+id/imageView"
android:background="#drawable/arrow2"
android:layout_marginLeft="80px" />
</LinearLayout>
Now, you need to play with the weight values for the 2 linear layouts until you find the desired ones.
Put your arrows inside a FrameLayout and add a layout_gravity attributes to them:
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:id="#+id/imageView2"
android:background="#drawable/arrow4"
android:layout_marginLeft="68px"
android:layout_gravity="top|left" />
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:id="#+id/imageView"
android:background="#drawable/arrow2"
android:layout_marginRight="68px"
android:layout_gravity="top|right" />
</FrameLayout>
I have already seen the same question but the answer did not held me that much. I am new to android app development and I have the following problem. From the two linear layouts only the first one displays. Can anyone help? Thank you in advance!
<?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:orientation="vertical"
android:background="#drawable/home"
tools:context="dmst.allamoda.Login"
android:weightSum="1">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/linearLayout1"
android:background="#drawable/rectangle"
android:gravity="top|right">
<Button
android:background="#drawable/mybutton"
android:layout_width="100dp"
android:layout_height="100dp"
android:text="#string/button_home"
android:id="#+id/home"
android:textColor="#ffffd1"
android:onClick="signupControl"
android:layout_gravity="center"/>
<Button
android:background="#drawable/mybutton"
android:layout_width="100dp"
android:layout_height="100dp"
android:text="#string/button_profile"
android:id="#+id/profile"
android:textColor="#ffffd1"
android:onClick="signupControl"
android:layout_gravity="center"/>
<ImageView
android:id="#+id/logo_image"
android:background="#drawable/allamodalogo"
android:layout_width="160dp"
android:layout_height="100dp"
android:scaleType="fitXY"
android:gravity="right"
android:adjustViewBounds="true"
android:maxHeight="50dp"
android:maxWidth="50dp"
android:minHeight="50dp"
android:minWidth="50dp"
android:layout_gravity="right"/>
</LinearLayout>
<LinearLayout
android:layout_marginTop="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/linearLayout2"
android:background="#drawable/post">
</LinearLayout>
</LinearLayout>
replace your second linear layout with this code below
<LinearLayout
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp"
android:orientation="vertical"
android:id="#+id/linearLayout2"
android:background="#drawable/post">
I have a layout in which one of the inside doesn't come in center, It happens only in few resolution devices, whereas in few it comes perfectly in center. Below is code and screenshot
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:gravity="center"
android:src="#drawable/thank" android:paddingTop="10dip"
android:paddingBottom="10dip"/>
Code :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="#+id/splash_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:gravity="center" android:orientation="vertical"
android:background="#drawable/background">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:gravity="center_horizontal"
android:src="#drawable/logo" android:paddingTop="10dip"
android:paddingBottom="10dip" />
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:gravity="center"
android:src="#drawable/thank" android:paddingTop="10dip"
android:paddingBottom="10dip"/>
<com.teleca.sam.ui.Copyright
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:gravity="bottom|center"/>
</RelativeLayout>
</LinearLayout>
If you are using a LinearLayout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_launcher" />
</LinearLayout>
If you are using a RelativeLayout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/ic_launcher"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
because your ImageView is in a RelativeLayout, you should use
android:layout_centerInParent="true"
instead of
android:gravity="center"
in your ImageView tag
RelativeLayout may be the reason for this. Try Linear Layout instead.
I would like to place two images in the respective image views so they occupy the entire screen. So far I have only gotten here :( (To add the device being tested I use an S3)
<?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="vertical" >
<ImageView
android:id="#+id/white"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:onClick="onClick"
android:src="#drawable/up" />
<ImageView
android:id="#+id/blue"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:src="#drawable/blue"
android:onClick="onClick"
android:layout_below="#id/white"/>
</RelativeLayout>
The images are 1080 X 1920 and scaled to screen. The problem is either the image below is scaled improperly or they dont connect properly. I have a black area on the top and bottom
I am sorry but the Images are not of the same size.
You can achieve this by adding weightSum. Replace this 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"
tools:context=".MainActivity1" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="1" >
<ImageView
android:id="#+id/white"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight=".5"
android:onClick="onClick"
android:src="#drawable/up" />
<ImageView
android:id="#+id/blue"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_below="#id/white"
android:layout_weight=".5"
android:onClick="onClick"
android:src="#drawable/blue" />
</LinearLayout>
</RelativeLayout>
it would look like as:
for more help.please add comments.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="2" >
<ImageView
android:id="#+id/white"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:onClick="onClick"
android:src="#drawable/up" />
<ImageView
android:id="#+id/blue"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:onClick="onClick"
android:src="#drawable/blue" />
</LinearLayout>
You should use a LinearLayout with layout_weight set:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/white"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:onClick="onClick"
android:src="#drawable/up" />
<ImageView
android:id="#+id/blue"
android:layout_height="0dp"
android:layout_width="fill_parent"
android:layout_weight="1"
android:src="#drawable/blue"
android:onClick="onClick"
android:layout_below="#id/white"/>
</LinearLayout>
For the scaling issue, I'd recommend looking into scaleType
I'm having a very hard time getting the 2 buttons in the 2nd child linearlayout to display as I want them to... I want them centered, on the same row but they appear left-aligned and on the same row. Can anyone help me with this?
<?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:background="#color/black"
android:orientation="vertical">
<LinearLayout
android:id="#+id/splash"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/imageLogo1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:cropToPadding="true"
android:scaleType="fitXY"
android:src="#drawable/isi_logo"
android:paddingLeft="50sp"
android:paddingRight="50sp"
android:paddingTop="20sp"/>
<ImageView
android:id="#+id/imageLogo2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:cropToPadding="true"
android:scaleType="fitXY"
android:src="#drawable/sa_logo"
android:paddingLeft="100sp"
android:paddingRight="100sp"
android:paddingBottom="20sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center">
<Button
android:id="#+id/buttonScores"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:width="100sp"
android:text="#string/scores"/>
<Button
android:id="#+id/buttonStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:width="100sp"
android:text="#string/test"/>
</LinearLayout>
</LinearLayout>
Try using android:gravity="center" instead of android:layout_gravity="center"