Set ImageView at the center of the screen - android

My problem is may be trivial for other people, but for me I can't make it work. I have layout xml as follow.
<?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"
>
<LinearLayout android:id="#+id/tracker_container"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="vertical"
/>
<ImageView
android:id="#+id/mainImageView"
android:contentDescription="#string/display"
android:layout_gravity="center"
android:layout_width="400dp"
android:layout_height="300dp"
android:opacity="translucent"
/>
</LinearLayout>
How can I make the ImageView is at the center of the whole screen?
Thanks

Try this--
<?xml version="1.0" encoding="utf-8"?>
<RelativeLaout 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"
>
<RelativeLayout android:id="#+id/tracker_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
/>
<ImageView
android:id="#+id/mainImageView"
android:contentDescription="#string/display"
android:layout_centerInParent="true"
android:layout_width="400dp"
android:layout_height="300dp"
android:opacity="translucent"
/>
</RelativeLayout>

You can use a RelativeLayout as the parent and use layout_centerInParent:
<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">
<LinearLayout android:id="#+id/tracker_container"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="vertical" />
<ImageView
android:id="#+id/mainImageView"
android:contentDescription="#string/display"
android:layout_centerInParent="true"
android:layout_width="400dp"
android:layout_height="300dp"
android:opacity="translucent" />
</RelativeLayout>
I'm not sure what that LinearLayout is for but I have kept it in there. Perhaps you are populating it programmatically and it's pushing your ImageView down. RelativeLayout ensures it will always be central to the parent, regardless of other view elements.

Related

Android FrameLayout Views Overlapping not Working

I Have the following layout and I need the favorite image to placed on the upper right corner of the itemImage using FrameLayout
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
tools:context=".ItemDetails"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="20dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/itemdimage"
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="fitEnd"
tools:srcCompat="#mipmap/ic_launcher"
/>
<ImageView
android:id="#+id/favorite"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="end"
android:layout_margin="10dp"
tools:srcCompat="#mipmap/ic_launcher_round"
android:elevation="10dp"/>
</FrameLayout>
But the favorite image is never show ?? what is wrong with my layout
Any help will be much appreciated
Maybe this layout will work. I changed tools:srcCompat to android:src. tools: attributes are only visible in AndroidStudio, they are removed from the build.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="20dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/itemdimage"
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="fitEnd"
android:src="#mipmap/ic_launcher"/>
<ImageView
android:id="#+id/favorite"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="end"
android:layout_margin="10dp"
android:elevation="10dp"
android:src="#mipmap/ic_launcher_round" />
</FrameLayout>
</LinearLayout>
</ScrollView>
The result is this :

Android how to fill parent but leave some space

The title isn't good but i didn't know how else to describe
I have a relative layout with 2 elements, some container and a button at bottom.
I want the container fill all the space in the relativelayout leaving just the space enough to put the button
here is an example:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout //i'm using linearlayout as an example, it could be anything here
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/b3"
android:gravity="center"
android:orientation="vertical">
</LinearLayout>
<Button
android:id="#+id/b3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="asdasdasdasdasdasdasdasd" />
</RelativeLayout>
here is how i want it look like
The red means the relavitive layout, the green the linear layout, and the yellow means the button...
how can i make it?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#color/red"
android:padding="5dp"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/b"
android:background="#color/green">
</LinearLayout>
<Button
android:id="#+id/b"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="this is the button"
android:background="#color/yellow"/>
</RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignTop="#+id/b3"
android:layout_margin="4dp"
android:background="#color/colorPrimary"
android:gravity="center"
android:orientation="vertical">
</LinearLayout>
<Button
android:id="#+id/b3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="asdasdasdasdasdasdasdasd" />
</RelativeLayout>
This should give you something close to what you want:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout //i'm using linearlayout as an example, it could be anything here
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="3"
android:gravity="center"
android:orientation="vertical">
</LinearLayout>
<Button
android:id="#+id/b3"
android:layout_width="wrap_content"
android:layout_height="0px"
android:layout_weight="1"
android:text="asdasdasdasdasdasdasdasd" />
</LinearLayout>

Place a button in Relative layout below the custom zoomview

I want to place a Relative layout below the custom Zoomview. I don't want the content of Relative Layout to get Zoom. I want a button to be placed at center of that relative layout.
Here is my XML:
<?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="wrap_content"
android:orientation="horizontal"
android:background="#drawable/images">
<com.example.acer.myapplication.ZoomView
android:id="#+id/iop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="#string/twentyfive" />
</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="wrap_content"
android:orientation="vertical"
android:background="#drawable/images">
<com.example.acer.myapplication.ZoomView
android:id="#+id/iop"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:text="#string/twentyfive" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_centerInParent="true"
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</LinearLayout>
Never tested code, but hopefully it will work.
Try this -
<?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="wrap_content"
android:orientation="vertical"
android:background="#drawable/images">
<com.example.acer.myapplication.ZoomView
android:id="#+id/iop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="#string/twentyfive" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:layout_centerHorizontal="true"/> //Or use android:layout_centerInParent="true"
</RelativeLayout>
</LinearLayout>

Vertical and horizontal center

I am able to center my image horizontal, but not vertical.. any idea's what might cause this? It should be in the center of the screen. I have also tried android:layout_gravity="center_vertical" but doesn't seem to do the trick...
<?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="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/splash"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/splash" />
</LinearLayout>
A LinearLayout does not allow this behavior. Try a RelativeLayout instead.
<?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="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/splash"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/splash" />
</RelativeLayout>
Why do you need a LinearLayout at all? You can just use the ImageView with the scaleType=center
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/splash"
android:src="#drawable/splash"
android:scaleType="center" />
That's your whole xml...
You will have to use RelativeLayout for such behavior. I can't think of a good way to do it with LinearLayout. Additionally, you can try the Graphical Layout (depends on the editor you are using).
I used two images in invisible mode just for create space.
Try this:
<LinearLayout 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"
android:orientation="vertical" >
<ImageView
android:id="#+id/fake"
android:layout_width="wrap_content"
android:layout_height="200dp"
android:src="#drawable/splash"
android:visibility="invisible" />
<ImageView
android:id="#+id/splash"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/splash" />
<ImageView
android:id="#+id/fake"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/splash"
android:visibility="invisible" />
</LinearLayout>

Relative layout wrap width and height according to background image

The problem which i am facing is very strange relative layout is not warping width and height according to image.it is showing relativelayout on full screen as you can see Image
Code:
<?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="#drawable/img_bg_wood">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/nine_man_morris" >
</RelativeLayout>
</RelativeLayout>
I solve the issue when i place ImageView in relative layout it works perfect as you can see Image.
Code:
<?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="#drawable/img_bg_wood">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/nine_man_morris" />
</RelativeLayout>
</RelativeLayout>
But the problem is i don't want to use imageview because it is still shows RelativeLayout in full screen. i want to wrap relativelayout according to image just like the above code showing.
// try this
<?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="#drawable/img_bg_wood">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/nine_man_morris"
android:gravity="center">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
</RelativeLayout>
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#A0000000"
android:clickable="true"
android:focusable="true">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<!-- The Background Image -->
<ImageView
android:layout_width="wrap_content"
android:scaleType="fitXY"
android:layout_centerInParent="true"
android:id="#+id/background_image"
android:layout_height="wrap_content"
android:src="#drawable/bg_pic"
/>
<!-- The view group containd around the image -->
<LinearLayout
android:orientation="vertical"
android:layout_alignBottom="#id/background_image"
android:layout_alignLeft="#id/background_image"
android:layout_alignRight="#id/background_image"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
This should solve your problem

Categories

Resources