How to design buttons? - java

Does anyone know if there is a possible way to design the android buttons like this:

I'd say these are regular buttons with transparent background and icons set through drawableTop attribute. So an xml for such a button would look like:
<Button android:drawableTop="#drawable/icon" android:background="#android:color/transparent"/>

Try this
<Button android:drawableTop="#drawable/icon" android:background="#android:color/transparent"/>
ALso you can design this type of bottom bar using Tab in android
Click here
Also you can design this type of button using radio button
Click here

For that i think need to create the custom view for tab and call in tabhost
http://joshclemm.com/blog/?p=136
Thank you

okay
--take one layout and aligng it ALIGNPARENTBOTTOM = TRUE
now set background of that Layout to THIS BLACK
-- now take five button in that Layout Horizontal
now take images like these Transparent and set it to the buttons
-- also get Images for HOVER action
and set it on click of that particular button
(use layout_weight for setting equall sizes of button)
Have Fun!!

I have done same thing in one of my app. Here I am giving the xml code for 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="60dp"
android:background="#000"
android:gravity="center_vertical">
<LinearLayout
android:layout_width="60dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/reviewLayout"
android:gravity="center_horizontal"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/reviews"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Review"
android:textColor="#FFF"/>
</LinearLayout>
<LinearLayout
android:layout_width="60dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/nearbyLayout"
android:layout_toRightOf="#id/reviewLayout"
android:gravity="center_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:src="#drawable/nearby"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nearby"
android:textColor="#FFF"/>
</LinearLayout>
<LinearLayout
android:layout_width="60dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/searchLayout"
android:layout_toRightOf="#id/nearbyLayout"
android:gravity="center_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:src="#drawable/search"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Search"
android:textColor="#FFF"/>
</LinearLayout>
<LinearLayout
android:layout_width="75dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/bookmarkLayout"
android:layout_toRightOf="#id/searchLayout"
android:gravity="center_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:src="#drawable/bookmarks"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bookmarks"
android:textColor="#FFF"/>
</LinearLayout>
<LinearLayout
android:layout_width="60dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/settingsLayout"
android:layout_toRightOf="#id/bookmarkLayout"
android:gravity="center_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:src="#drawable/settings"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textColor="#FFF"/>
</LinearLayout>
</RelativeLayout>
Use this layout where you want using include tag, and call it in your Activity.
Here I am giving the code to include this in Activity.
private LinearLayout reviewLay,nearbyLay, searchLay, bookmarkLay, settingLay;
reviewLay = (LinearLayout)findViewById(R.id.reviewLayout);
nearbyLay = (LinearLayout)findViewById(R.id.nearbyLayout);
searchLay = (LinearLayout)findViewById(R.id.searchLayout);
bookmarkLay = (LinearLayout)findViewById(R.id.bookmarkLayout);
settingLay = (LinearLayout)findViewById(R.id.settingsLayout);
reviewLay.setOnClickListener(this);
nearbyLay.setOnClickListener(this);
searchLay.setOnClickListener(this);
bookmarkLay.setOnClickListener(this);
settingLay.setOnClickListener(this);
btEdit.setOnClickListener(this);
Here I have used a layout instead of button and I am setting onclicklistener for each layout. Now override onclick method and do what you want with each layout

Related

How can i make a Button in android appear in a fixed position and always in front of all other views?

I know the code might not be well formatted but I want the button (last tag) to always appear in front
of all other views if the description is long the button disappears.
I'm using scrollView and if any long text appears but this makes the button go down the screen.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center|bottom"
android:orientation="vertical">
<Button
android:layout_gravity="bottom|end"
android:id="#+id/cart_button"
android:layout_width="250dp"
android:layout_height="55dp"
android:layout_marginBottom="10dp"
android:iconTint="#color/black"
android:elevation="6dp"
android:text="ADD TO CART"
android:textAppearance="?attr/textAppearanceButton"
android:textColor="#28022E"
android:textSize="20sp"
app:backgroundTint="#F6F2FA"
app:elevation="10dp"
app:rippleColor="#FFF"
app:shapeAppearance="?attr/shapeAppearanceSmallComponent"
app:strokeColor="#0000"
app:strokeWidth="10dp" />
</RelativeLayout>
Take your button out of scrollview.
something like :
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
// content that you wants to scroll
</ScrollView>
<Button alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>

Align button at the bottom 1/3 of the screen

I'm trying to align a button not right at the bottom of the screen but at a slight distance above the bottom line. How can I do that? I've tried centering the button vertically and horizontally and it works, but I need to either move the button a little below the center or a little above the bottom line.
I need to move the "PLAY" button a little lower on the screen. Additionally, I also need to scale the button down a bit, to like 80% of its current size. How can I do that?
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="acevix.gladiators3.MainActivity">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="#drawable/splash"
android:id="#+id/imageView"
android:scaleType="centerCrop"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:adjustViewBounds="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginBottom="50dp"
android:id="#+id/button3"
android:background="#drawable/play" />
</RelativeLayout>
Use this codes,
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="30dp"
Try this;
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="30dp"/>
</RelativeLayout>
Update Code
Use this : android:layout_below
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/logo"
android:layout_width="200dp"
android:layout_height="80dp"
android:layout_centerInParent="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/logo"
android:layout_centerInParent="true"
android:layout_marginTop="30dp" />
</RelativeLayout>
For different screen resolutions you can use
intuit/sdp
add this line to your gradle file
compile 'com.intuit.sdp:sdp-android:1.0.3'

Change height of a custom actionbar using java

I am stuck in an issue. I'm a junior android developer. I want to change the height of my custom action bar on a click event. But I'm not able to find a way
how to change actionbar's height. I saw other related posts, but didnt find exactly what I need.
I want to toggle a hidden layout part of action bar, upon click event. The height of action should fit to the content size each time.
<?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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_gravity="center"
android:background="#drawable/header_bg"
android:orientation="horizontal"
android:padding="5dp"
android:visibility="visible"
android:weightSum="5" >
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2.69"
android:src="#drawable/header_image" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.4"
android:contentDescription="Seperator"
android:src="#drawable/header_seperator" />
<ImageView
android:id="#+id/iv_show_searchbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.8"
android:contentDescription="search"
android:src="#drawable/header_search" />
<ImageView
android:id="#+id/iv_hidesearchbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.8"
android:contentDescription="search"
android:src="#drawable/header_search_active"
android:visibility="gone" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.4"
android:contentDescription="Seperator"
android:src="#drawable/header_seperator" />
<ImageView
android:id="#+id/iv_header_navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.6"
android:contentDescription="navigation"
android:src="#drawable/header_navigation" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="57dp"
android:background="#F0F0F0"
android:orientation="horizontal"
android:padding="4dp"
android:weightSum="5"
android:visibility="gone" >
<EditText
android:id="#+id/editText1"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_marginRight="10dp"
android:layout_weight="3"
android:background="#drawable/fields"
android:ems="10"
android:hint="Keyword"
android:padding="15dp"
android:textSize="20sp" >
<requestFocus />
</EditText>
<Spinner
android:id="#+id/spinner1"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="2.0"
android:background="#drawable/header_language"
android:paddingLeft="10dp"
android:paddingRight="10dp" />
</LinearLayout>
</LinearLayout>
On a click event, i want to toggle the second inner linear layout. Is It possible? or should i use fragments in activity?
If what you mean is that you want make the 2nd LinearLayout (the one that has visibility:"gone") be visible on a click event. You have first to set an id for that layout and do something like this:
LinearLayout yourLinearLayout =(LinearLayout)findViewById(R.id.yourLinearLayoutId);
and inside your click event
yourLinearLayout.setVisibility(View.Visible);
that will make your layout appear and because the father has layout_height="wrap_content" it will fit to the size of the child when it is visible.

ImageView on top of Button

I'm trying to put a small ImageView on top of a button, but somehow it stays under it. I don't understand why as this sort of layout work perfectly with other views.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background_white_clickable"
android:text="#string/book_now"
android:id="#+id/but_book_now"
/>
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:id="#+id/img_bookmark"
android:src="#drawable/ic_action_bookmark_full"
android:layout_marginRight="15dp"
android:layout_marginEnd="15dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
I've tried with different background for the button, but the image can be seen only when it is transparent. I also tried to replace the ImageView with a colored View, still doesn't work.
Any idea? Thx
EDIT:
There is a confusion in answers I get, I mean to make the ImageView on top of the Button in its Z-order, not y-axis.
EDIT 2 :
I don't want to use an image button, the image is just a "pin" on the button that will appear/disappear.
I don't want to use a drawable on the button, I need to place it where I want exactly.
Using FrameLayout instead of RelativeLayout doesn't change anything.
Using imgView.bringToFront() doesn't work.
EDIT 3 :
The problem doesn't appear on device before Lollipop. On KitKat, the layout works as intended.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="80dp" >
<Button
android:id="#+id/filter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="7dp"
android:background="#0000FF"
android:gravity="center"
android:paddingBottom="25dp"
android:paddingTop="25dp"
android:text="Sort"
android:textColor="#FFFFFF" />
<ImageView
android:id="#+id/widget_title_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:adjustViewBounds="true"
android:paddingTop="-10dp"
android:scaleType="fitStart"
android:src="#drawable/ic_launcher" />
</FrameLayout>
Try it,though I haven't tested it.
Try
findViewById(R.id.img_bookmark).bringToFront();
You need to set the button below the imageview so:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background_white_clickable"
android:text="#string/book_now
android:id="#+id/but_book_now"
android:layout_below="#+id/img_bookmark"/>
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:id="#+id/img_bookmark"
android:src="#drawable/ic_action_bookmark_full"
android:layout_marginRight="15dp"
android:layout_marginEnd="15dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
EDIT
I noticed now that you wanted an image ON TOP of a button not ABOVE so don't care to my code above and use ImageButton:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background_white_clickable"
android:text="#string/book_now
android:id="#+id/but_book_now"
android:src="#drawable/ic_action_bookmark_full"/>
</RelativeLayout>
Sample code:
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/img_bookmark"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_alignParentRight="true"
android:src="#drawable/ic_launcher" />
<Button
android:id="#+id/but_book_now"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/img_bookmark"
android:text="Test" />
</RelativeLayout>
Note :
Edit the text and src, for your needs
If you want image view with button :
<Button
android:id="#+id/but_book_now"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/ic_launcher"
android:background="#ff00ff"
android:text="This is button"
android:padding="10dp"
android:textColor="#ffff00"
/>
</RelativeLayout>
If you want image view without button :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/but_book_now"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
android:text="This is button"
android:padding="10dp"
android:textColor="#ffff00"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff00ff"
android:text="This is button"
android:padding="10dp"
android:textColor="#ffff00"
/>
</LinearLayout>
You can define a RelativeLayout as a Button and add ClickEvents on it, add a child View with color or a child ImageView with a PNG, or whatever or both, to put images or color over it.
Example
<FrameLayout android:id="#+id/buttonTextFillColor"
android:layout_width="#dimen/mini_icon_width"
android:layout_height="#dimen/mini_icon_height"
android:background="#drawable/input_button_background"
android:clickable="true">
<View
android:id="#+id/colorTextFillColor"
android:layout_width="23dp"
android:layout_height="23dp"
android:background="#FFFFFF"
android:layout_gravity="center" />
<ImageView
android:layout_width="23dp"
android:layout_height="23dp"
android:src="#drawable/button_fill_text"
android:layout_gravity="center"/>
</FrameLayout>
You get a union of elements:
How will you see it?
please add the layout_below for Button attribute

Aligning my views to the right

Alright, what I'm trying to do is: setting an imageview to be on the right and the 3 textviews will be located on the left relative to the image. With the following XML code, the imageview is on the left and the 3 textviews are located in the right of the imageview.
Here's the look of it now:
As I said, I want the image to be aligned on the right side, and the 3 textviews on the left of the image.
So here's the current xml: http://pastebin.com/r68S1QKv
If I change the LinearLayout to RelativeLayout (so I can use alignParentRight = true), the textviews stack on each other and are not displayed vertically.
Suggestions, please?
EDIT: Looks like I haven't clarify the wanted look, here's an illustration of what I want:
Use This Code.Use RelativeLayout as parent & assign android:layout_alignParentRight="true" to his child this set your all view to right side.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_marginRight="20dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/row_title"
style="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hey1" />
<TextView
android:id="#+id/row_subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hey2" />
<TextView
android:id="#+id/row_postcode_city"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hey3" />
</LinearLayout>
<ImageView
android:id="#+id/icon"
android:layout_marginRight="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</RelativeLayout>
What you can do - is to make outer RelativeLayout, make you image alignParentRight=true, put text views in a separate linear layout (with vertical orientation), align your LinearLayout with text views to the left edge of the image view (layout_toLeftOf="#+id/img_id").
Here is what I manage to do following this approach:
<?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:orientation="horizontal">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_toLeftOf="#+id/img"
android:orientation="vertical"
android:id="#+id/text_container">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="text1"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="text2"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="text3"/>
</LinearLayout>
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/icon"
android:id="#+id/img"/>
</RelativeLayout>

Categories

Resources