Develop Reference

android programming auto margin as in css

I am very new to android programming.I have learned css and I want to make margin 0 auto like in css.This is my code:
<?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="com.example.qwe.androidtutorial_1.Layout">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="300dp"
android:layout_height="400dp"
android:orientation="vertical"
android:layout_marginLeft="0dp"
android:gravity="center_horizontal"
android:layout_gravity="center">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/alici"
android:visibility="visible"
android:gravity="center"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/konu"
android:visibility="visible"
android:gravity="center" />
</LinearLayout>
</RelativeLayout>
This is how my design looks like => IMAGE 1
I want to design like this =>IMAGE 2
I want to make this using margin 0 auto(as in css) which makes linearlayout perfectly vertically center in relativelayout.How can I make this?

set
android:gravity="center_horizontal"
in Main RelativeLayout.

You can use below 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:gravity="center_horizontal">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="300dp"
android:layout_height="400dp"
android:layout_marginTop="20dp"
android:orientation="vertical">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/alici"
android:visibility="visible"
android:gravity="center"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/konu"
android:visibility="visible"
android:gravity="center" />
</LinearLayout>
</RelativeLayout>
If it is useful, please vote.

How to bring ImageView over the CardView? Please see details

I'm developing an app and I have made the below shown layout:
There is a CircleImageView and a CardView.
Here's the XML code:
<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: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.playrapp.playr.Profile"
tools:showIn="#layout/activity_profile">
<android.support.v7.widget.CardView
android:id="#+id/profileCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
app:contentPadding="10dp">
</android.support.v7.widget.CardView>
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/userImageProfile"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginTop="50dp"
android:src="#mipmap/ic_launcher"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
Here, the CardView is over the ImageView. I want ImageView to be over the CardView. How can I do that?
Please let me know.

Elevation of CardView is more higher than CircleImageView. So, you have to set higher elevation to CircleImageView to show it over CardVew.
Set CardView elevation as app:cardElevation="4dp" and set CircleImageView elevation as android:elevation="8dp"
Here is the working XML code. Try this:
<?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: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">
<android.support.v7.widget.CardView
android:id="#+id/profileCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="16dp"
app:cardCornerRadius="4dp"
app:cardElevation="4dp"
app:cardUseCompatPadding="false" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_marginTop="75dp"
android:padding="24dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hammad Nasir"
android:textSize="32sp"
android:textColor="#727272"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="\#hammadnasir"
android:textSize="24sp"
android:textColor="#727272" />
</LinearLayout>
</android.support.v7.widget.CardView>
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/userImageProfile"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginTop="75dp"
android:layout_centerHorizontal="true"
android:src="#mipmap/ic_launcher"
android:elevation="8dp" />
</RelativeLayout>
OUTPUT:
Hope this will help~

The CardView has an elevation set by default set app:elevation="0dp"in the xml file.

CardView -> app:cardElevation ="4dp"
ImageView -> android:translationZ="6dp"

Dynamically adjust position of Button in Android Studio

I have a Button in Linear Layout when I see in the Design view of Activity xml ,it looks like it is perfectly positioned but when I see in GenyMotoin avd it is farly placed from what I expected.
How to dynamically adjust the position of button on different screen sizes?
My xml 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="com.xxx.MainScreen"
android:background="#b6b6b6">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<TextView
android:layout_width="match_parent"
android:layout_height="263dp"
android:id="#+id/textView"
android:textSize="50dp" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="264dp">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Next Act"
android:id="#+id/button"
android:layout_marginTop="100dp"
android:layout_marginLeft="20dp" />
</LinearLayout>
</RelativeLayout>

Use Linear Layout for the outermost layout.

It's not clear what your trying to achieve but If you want to position your views at the center on all devices. Try to use RelativeLayout instead of 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:background="#b6b6b6"
android:padding="#dimen/activity_vertical_margin"
android:weightSum="2"
android:orientation="vertical"
tools:context="com.offtogeek.motivatemyself.MainScreen">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:gravity="left"
android:textSize="50dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:text="Next Quote" />
</RelativeLayout>
</LinearLayout>

Android Relative Layout with sticky footer

I'm relatively new to Android development and I'm having a hard time putting together a certain interface. I've looked through many similar questions but none of them give me the answer i'm looking for.
I want to put together an XML interface like the following:
I want a LinearLayout that acts like a sticky footer that will contain two Buttons. This part will always align to the bottom and and will always be 60dp high. The RelativeLayout would then be on top of the footer, but it's height should scale depending on the screen size.
I've tried the following:
<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=".DartboardActivity">
<RelativeLayout
android:id="#+id/game_layout"
android:layout_width="match_parent"
android:layout_height="506dp"
android:background="#drawable/background"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<ImageView
android:id="#+id/Dartboard"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/desc_dartboard"
android:src="#drawable/dartboard" />
<hhs.week3.dartboard.VerticalSeekBar
android:id="#+id/seekBarVertical"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_gravity="bottom"
android:thumb="#drawable/thumbhorizontal"
android:layout_marginBottom="40dp" />
<SeekBar
android:id="#+id/seekBarHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:thumb="#drawable/thumbhorizontal" />
</RelativeLayout>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#333">
<Button
android:id="#+id/fire"
style="#style/button"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:text="#string/fire" />
<Button
android:id="#+id/settings"
style="#style/button"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:text="#string/settings" />
</LinearLayout>
</LinearLayout>
I got it working half decently, but it requires me to give the RelativeLayout bit a fixed height, making it look right on my phone, but not on others.
How do I best approach this?

Use the LinearLayout layout_weight mechanism to assign all remaining space to your RelativeLayout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
... />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
... />
</LinearLayout>

Try following code
<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:orientation="vertical"
tools:context=".DartboardActivity" >
<RelativeLayout
android:id="#+id/game_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/buttons"
android:layout_alignParentTop="true"
android:background="#drawable/ic_launcher"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin" >
</RelativeLayout>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:background="#333"
android:orientation="vertical" >
</LinearLayout>
</RelativeLayout>
I removed LinearLayout and replaced with RelativeLayout. This will allow you to set your LinearLayout stick to bottom.

I was able to achieve the same result by using below code. Basically, the parent layout is one Linear layout and the first child element is a scrollview so it can squeeze its content when the keyboard is shown. Also note the use of the android:layout_height="0dp" and android:layout_weight="1" used with the scrollview
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/wrap"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ScrollView
android:id="#+id/wrap2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
</LinearLayout>
</ScrollView>
<FrameLayout
android:id="#+id/buttonsPanel"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#333" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="action buttons" />
</FrameLayout>
</LinearLayout>

Try 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=".DartboardActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_weight="1"
android:background="#drawable/background"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<ImageView
android:id="#+id/Dartboard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/desc_dartboard"
android:src="#drawable/dartboard"
android:adjustViewBounds="true"/>
<hhs.week3.dartboard.VerticalSeekBar
android:layout_marginTop="10dp"
android:id="#+id/seekBarVertical"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:thumb="#drawable/thumbhorizontal"/>
<SeekBar
android:id="#+id/seekBarHorizontal"
android:layout_width="match_parent"
android:layout_marginTop="10dp"
android:layout_height="wrap_content"
android:thumb="#drawable/thumbhorizontal" />
</LinearLayout>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#333333">
<Button
android:id="#+id/fire"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="#string/fire"/>
<Button
android:id="#+id/settings"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="#string/settings"/>
</LinearLayout>
</LinearLayout>

stick LinearLayour ( horizontal ) to the buttom without any space

Sorry, i've completed my question very much, so I reasked that and deleted prev post...
I'm using LinearLayout ( with 4 ImageButtons in a raw ) in a RelativeLayout in my project and I have used android:layout_alignParentBottom="true" for it ( linear ) to stick to the buttom of RelativeLayout, but my problem is the space between LinearLayout's ImageButtons and the corners of the screen. I want to remove them to make my ImageButtons be like a menu bar on the bottom of the screen. Is it possible for anyone to help me please ? THANK YOU ! :)
<?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=".HomeActivity">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="TXT"
android:textAppearance="?android:attr/textAppearanceLarge" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:weightSum="4" >
<ImageButton
android:id="#+id/calibrate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/1" />
<ImageButton
android:id="#+id/chart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/2" />
<ImageButton
android:id="#+id/guidance"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/3" />
<ImageButton
android:id="#+id/info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable4" />
</LinearLayout>
</RelativeLayout>
and the result is something like this : Picture http://uploadtak.com/images/c6645_1311.png!
1

Remove the padding on your RelativeLAyout
From:
<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=".HomeActivity">
To:
<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" >