2017-09-18 11 views
-1

添付画像のようにFABボタンを作成したいと思います。これで私を助けてもらえますか?Android正方形のFABボタンを作成する方法は?

This is i want to create. Car logo is FAB

CARのロゴは、FABのボタンです。最後に私が欲しいのはスクエアファブです。私は試してみた

app:borderWidth="0dp" , 
app:backgroundTint="" 

オプション。しかし何も働かなかった。

ここに私の研究があります。問題は透明な効果を取り除くことができないことです。

enter image description here

おかげで、 K.ラジェッシュ

+0

ドル記号の意味ですか? – olivejp

+0

イメージにファブボタンが表示されませんでしたか? – rookiedev

+0

添付画像のFABボタンはどこですか? –

答えて

0

私は、このようなFABアイコンがその位置に適しているか否かわかりません。私は同様の種類の要件を経て、RelativeLayoutを使ってこれを解決しました。あなたは見ることができますhere

あなたが探している効果をカスタマイズすることができます。ここで

activity_main.xml

<?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.support.v7.widget.CardView 
    android:id="@+id/login_card" 
    android:layout_width="320dp" 
    android:layout_height="420dp" 
    android:layout_centerHorizontal="true" 
    android:layout_marginTop="@dimen/dp80"> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="@color/skyblue" 
     android:padding="@dimen/dp20"> 

     <LinearLayout 
      android:id="@+id/content_login" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_centerHorizontal="true" 
      android:layout_marginTop="@dimen/dp70" 
      android:gravity="center" 
      android:orientation="vertical" 
      android:weightSum="2"> 

      <include 
       android:id="@+id/usercode_custom_layout" 
       layout="@layout/usercode_layout" /> 

      <include 
       android:id="@+id/password_custom_layout" 
       layout="@layout/password_layout" /> 

     </LinearLayout> 

     <android.support.v7.widget.SwitchCompat 
      android:id="@+id/rememberMe" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignParentLeft="true" 
      android:layout_alignParentStart="true" 
      android:layout_below="@+id/content_login" 
      android:layout_marginBottom="8dp" /> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignBottom="@+id/rememberMe" 
      android:layout_alignTop="@+id/rememberMe" 
      android:layout_toRightOf="@+id/rememberMe" 
      android:gravity="center" 
      android:text="@string/remember_me" /> 

     <Button 
      android:id="@+id/button_login" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_below="@+id/rememberMe" 
      android:background="@drawable/button_proceed_background" 
      android:bottomLeftRadius="15dp" 
      android:bottomRightRadius="15dp" 
      android:text="@string/button_login" 
      android:textColor="@color/white" 
      android:textSize="@dimen/version_size" 
      android:topLeftRadius="15dp" 
      android:topRightRadius="15dp" /> 


    </RelativeLayout> 

</android.support.v7.widget.CardView> 


<ImageView 
    android:layout_width="140dp" 
    android:layout_height="140dp" 
    android:layout_centerHorizontal="true" 
    android:background="@drawable/circle_background" 
    android:elevation="8dp" 
    android:padding="@dimen/dp10" 
    android:src="@drawable/aa" 
    android:layout_marginTop="@dimen/dp10"/> 

0

幅を変更、あなたがする必要があるすべてのものがあり、xml活動のボタンを見つけ、コードです、高さ、位置、表示したい画像が表示されます。あなたがfabbuttonを持っていない場合は、すでにそれから1を追加します。自分のイメージを想定し

<'android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab" /> 
0

が正方形で、コードスニペットの下 は完全にフローティング操作ボタンの背景を削除します。

<android.support.design.widget.FloatingActionButton 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="right|bottom|end" 
    android:layout_margin="16dp" 
    app:elevation="0dp" 
    app:borderWidth="0dp" 
    app:rippleColor="#00FFFFFF" 
    android:background="@null" 
    android:clickable="false" 
    app:backgroundTint="#00FFFFFF" 
    app:srcCompat="@drawable/square_shaped_image" /> 

これが役に立ちます。

関連する問題