Develop Reference

specify layout width of cardview to fit all phone screen sizes

need some advice here!
Basically, I want my card view to be like the 2nd pic but without specifying a specific width size, as specifying a specific size will cause the layout to look differently to in other phones.
What I have tried:
1) tried wrap_content, but the sizes of the card view will be different depending on the contents inside it. Some will be long until it's overlaying the index panel, then some will be short. Also, it is definitely not match_parent because the index panel will overlay the cardview.
2) specify a specific number (315dp) for the width. It looked great on my actual phone, but not on other emulators.
3) added "android:layout_toStartOf="#+id/recycler_search" to my card view layout, but there is no effect.
Perhaps I could just demonstrate using my phone, but that will not be efficient isn't it?
As such, anyone knows how I could overcome this? Any help is greatly appreciated!
Here are my codes:
card view layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="315dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardCornerRadius="10dp"
app:cardBackgroundColor="#f5f0f0"
app:cardElevation="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_margin="5dp">
<LinearLayout
android:orientation="vertical"
android:layout_weight="9"
android:layout_width="0dp"
android:layout_height="wrap_content">
<TextView
android:id="#+id/keyword"
android:layout_marginLeft="10dp"
android:gravity="center_vertical|start"
android:textAllCaps="true"
android:textStyle="bold"
android:textColor="#000000"
android:textSize="15dp"
android:text="Baggage Management Interface Device
(BMID) Testing 123"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/codeHeader"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:gravity="center_vertical|start"
android:textStyle="bold"
android:textColor="#a8000000"
android:text="Code:"
android:textSize="13dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/acronym"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:gravity="center_vertical|start"
android:textStyle="italic"
android:textColor="#a8000000"
android:text="GST"
android:textSize="13dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<!--<LinearLayout-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content">-->
<!--<TextView-->
<!--android:id="#+id/ruleHeader"-->
<!--android:layout_marginLeft="10dp"-->
<!--android:layout_marginTop="5dp"-->
<!--android:gravity="center_vertical|start"-->
<!--android:textStyle="bold"-->
<!--android:textColor="#a8000000"-->
<!--android:text="Desc:"-->
<!--android:textSize="13dp"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content" />-->
<!--<TextView-->
<!--android:id="#+id/description"-->
<!--android:layout_marginLeft="5dp"-->
<!--android:layout_marginTop="5dp"-->
<!--android:gravity="center_vertical|start"-->
<!--android:textColor="#a8000000"-->
<!--android:text="If none are set then 'GST' is
set to NULL"-->
<!--android:textSize="13dp"-->
<!--android:maxLines="2"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content" />-->
<!--</LinearLayout>-->
<!--<LinearLayout-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content">-->
<!--<TextView-->
<!--android:id="#+id/relatedKeyword"-->
<!--android:layout_marginLeft="10dp"-->
<!--android:layout_marginTop="5dp"-->
<!--android:gravity="center_vertical|start"-->
<!--android:textColor="#a8000000"-->
<!--android:text="Related Keyword:"-->
<!--android:textSize="12sp"-->
<!--android:textStyle="bold"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content" />-->
<!--<TextView-->
<!--android:id="#+id/relatedKeyword1"-->
<!--android:clickable="true"-->
<!--android:layout_marginLeft="5dp"-->
<!--android:layout_marginTop="5dp"-->
<!--android:textColor="#a8000000"-->
<!--android:text="Keyword 1,"-->
<!--android:textSize="12sp"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"/>-->
<!--<TextView-->
<!--android:id="#+id/relatedKeyword2"-->
<!--android:clickable="true"-->
<!--android:layout_marginLeft="5dp"-->
<!--android:layout_marginTop="5dp"-->
<!--android:textColor="#a8000000"-->
<!--android:text="Keyword 2,"-->
<!--android:textSize="12sp"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"/>-->
<!--<TextView-->
<!--android:id="#+id/relatedKeyword3"-->
<!--android:clickable="true"-->
<!--android:layout_marginLeft="5dp"-->
<!--android:layout_marginTop="5dp"-->
<!--android:textColor="#a8000000"-->
<!--android:text="Keyword 3"-->
<!--android:textSize="12sp"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"/>-->
<!--</LinearLayout>-->
<TextView
android:id="#+id/tv_rules_read_more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:textStyle="bold"
android:textSize="14sp"
android:clickable="true"
android:padding="5dp"
android:textColor="#android:color/holo_blue_dark"
android:text="#string/read_more"/>
</LinearLayout>
</LinearLayout>
main layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
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"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".KnowledgeActivity"
android:background="#drawable/bokeh10"
android:id="#+id/drawerLayout">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ImageView
android:id="#+id/drawable_header"
android:layout_width="match_parent"
android:layout_height="70dp"
android:src="#drawable/bg_login"/>
<com.mancj.materialsearchbar.MaterialSearchBar
android:id="#+id/search_bar"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:mt_speechMode="false"
app:mt_hint="Search" />
<in.myinnos.alphabetsindexfastscrollrecycler.IndexFastScrollRecyclerView
android:id="#+id/recycler_search"
android:layout_below="#+id/search_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:setIndexBarColor="#ffffff"
app:setIndexBarTextColor="#000000"/>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nvNavView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:menu="#menu/navigation_menu"
android:layout_gravity="start">
</android.support.design.widget.NavigationView>
Edit: For everyone asking why not match_parent
This is how it looked like! The index panel is covering some parts of the card view. You may say it's just a little bit, but I have more card views with longer title.

Someone posted a solution and I don't know why it got deleted! I followed his solution and my issue is magically solved when I did little changes to my codes!
The OP's solution was to follow this gitHub (https://github.com/intuit/sdp/tree/master/sdp-android/src/main/res) and change the 351dp to 351sdp.
So here are the steps I did to somewhat solve my concern.
Create a new Value Resource File under the values folder
Name the file as positive_sdp
Follow exactly like what was written in the GitHub. The positive_sdp file should contain the relevant dimension you want your widget, drawable or anything to be. So in my positive_sdp xml file, I had these:
<dimen name="_315sdp">315.00dp</dimen>
<dimen name="_80sdp">80.00dp</dimen>
<dimen name="_250sdp">250.00dp</dimen>
I saved the file as usual.
At first, I forgot to change my 351dp to 'dimen/_27sdp', but when I run my app on 4 different phones (2 emulators & 2 actual phones), I realised that the width of my cardview is right before the index panel like how I wanted it to be. However, before this, if I stick to 351dp and run my app on the same 4 emulators, the width of my cardview was everywhere!
In conclusion, I believed my issue got solved by just creating the positive_sdp file.
I hope everyone can benefit from this!

Position Of Views in Android vs iOS?

I am new to Android development. I have been working in iOS since long. As in iOS when we want to put VIEW on xib on some exact position, we simply put it there, drag it up to that point.
For example say Two buttons at lower area in iOS, which look like below
As, I simply want them in middle, I will put them their. as below
Now same thing in Android environment, I go for following code,
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/db1_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/myAwesomeTextView"
android:layout_width="wrap_content"
android:layout_height="1dip"
android:layout_centerInParent="true"
android:text="Veer Suthar" />
<TextView
android:id="#+id/myAwesomeTextView1"
android:layout_width="wrap_content"
android:layout_height="100dip"
android:layout_below="#id/myAwesomeTextView"
android:layout_centerInParent="true" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/myAwesomeTextView1"
android:gravity="center_vertical"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center"
android:onClick="buttonPressed"
android:text="Button One" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center"
android:onClick="buttonPressed"
android:text="Button Two" />
</LinearLayout>
</RelativeLayout>
It shows Activity Screen, like below
Now If I want to drag buttons, using GRAPHICAL LAYOUT, I can't move them as I want, and for spacing to put them into lower area, I need to put extra TextView .
Is there any better way to organise Android Activity GUI properly, like iOS?

I'll give you a brief example, since Android graphical layout is not as smooth as XCode.
To accomplish what you need, centering the two buttons in the screen, you can use a XML code like 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" >
<LinearLayout
android:id="#+id/layout_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_centerInParent="true">
<Button
android:id="#+id/button_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button One"/>
<Button
android:id="#+id/button_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button Two"/>
</LinearLayout>
</RelativeLayout>
The trick is to use android:layout_centerInParent="true" for the only component that you want to be centered in the screen all other components can use that one for reference to be placed in the screen.
For example
<TextView
android:id="#+id/myAwesomeTextView1"
android:layout_width="wrap_content"
android:layout_height="100dip"
android:layout_above="#+id/layout_center"
android:text="Veer Suthar"/>
This is one way for doing this, you can always find a better and more comprehensible way to do things.
Hope this helped.

Add this to your LinearLayout:
android:layout_alignParentBottom = "true"
Childs in a RelativeLayout can be "glued" to a particular position relative to the parent layout or to other elements in the same layout using the xml tags listed here: http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html

aligning 2 imageViews in a RelativeLayout

I have a problem with aligning 2 imageviews in a RelativeLayout:
these 2 images need to be close to eatch other without space. Like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background_portrait"
android:orientation="vertical" >
<!-- header -->
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/desc"
android:src="#drawable/header" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/dia1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/desc"
android:src="#drawable/dia1" />
<ImageView
android:id="#+id/dia2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/dia1"
android:contentDescription="#string/desc"
android:src="#drawable/dia2" />
</RelativeLayout>
What am I doing wrong?
UPDATE
dia1 is:
dia2 is:

From the 1st picture you posted, it seems the bottom image has a great deal of transparent "padding" (not actual padding, just transparent image pixels between the visible part and the upper limit).
In my opinion, you should combine RelativeLayout with cropped versions of your upper and lower images.
Otherwise, consider checking this SO thread about overlapping images.

Your question doesn't explain much about the problem. So you can add a single image. I mean merge the 2 images before and use it as 1.

Making the gridView center in Android

<?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"
android:background="#FFFFFF"
android:layout_gravity="center_horizontal"
android:padding="5dip" >
<GridView
android:id="#+id/homeGridView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:columnWidth="160dip"
android:adjustViewBounds="true"
android:layout_gravity="center_horizontal"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:numColumns="2"
android:stretchMode="none"/>
</RelativeLayout>
I have been breaking my head on how to make the gridView center horizonal and vertical. I have also attached my screen-shot for the same.
Below is my image code.
<?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"
android:layout_gravity="center_horizontal"
android:padding="5dip" >
<ImageView
android:id="#+id/grid_item_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_centerHorizontal="true">
</ImageView>
</RelativeLayout>

Well if you don't want to use TableLayout (as you says in your precedent post), dealing with GridView is pretty complicated (i've lost a lot of times on this).
The only idea i have his to force your GridView to have an exact width, that is the sum of your 2 views: 160dip * 2.
android:layout_width="320dip"
Feel free to add 10dip or more for padding.
N.B.: i'm not sure if this is the best way and if this is proper for every device. Try it and let me know ;) .

Use these 2 tags inside ur gridview see if it works
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"

Setting a graphic to the bottom center of the phone

Hello can any one help me, I am trying to get a graphic to be at the bottom of the screen and centered using LinearLayout. I would rather use the Bitmap method, because this is for a game. Thanks

Not sure what you mean by bitmap method but this will do what you ask:
<?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="horizontal"
android:gravity="center_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
android:layout_gravity="bottom"
/>
</LinearLayout>